http://www.gradualism.co.uk/ Notes from a web designer and small business owner en gradualism@googlemail.com Copyright 2010 2010-02-28T17:09:18+00:00 http://www.gradualism.co.uk/articles/setting-up-the-london-expressionengine-meetup/ http://www.gradualism.co.uk/articles/setting-up-the-london-expressionengine-meetup/#When:18:09:18Z A few people have asked me how I went about setting up the ExpressionEngine meetup I’ve been running in London for the last few months. I didn’t quite know what to say at first because I felt like I just stumbled blindly into it. But as time goes on – we’ve just had our 4th meetup – and questions are starting to come up for me, I thought I’d share what I know and maybe gleen some answers from other meetup organisers out there about the areas I’m unsure about. Gauging interest This was easy. I asked a handful of people I knew via the ExpressionEngine forums and/or Twitter who are based in London and the South East if they’d be interested. They all said yes so I figured we were good to go. Photo of everyone looking very serious at our 2nd meetup: (L-R of those facing camera) shapeshed, adamkhan, paulcuth, paulstone and long distance member MarmaladeToday who was visiting from the Welsh Marches. Promotion and organisation It occured to me that I should really be using ExpressionEngine to set up a website to promote the event, but I didn’t know if it was something that was actually going to last past one or two meetups. And I really didn’t have the time. So I took advantage of the ‘1st 3 months free’ offer on the Meetup.com website and setup a group on there. I figured being on there might also help in letting more people find out about the group – it’s a known Meetup directory and you can search by topic and by location. I did hesitate about making people sign up to yet another website at first but it didn’t seem to put anyone off. It’s good to be able to see how much interest there is. I’m also finding it easier to remember people’s names when they turn up because I’ve seen the name (and possibly a profile pic) on the group and in the RSVP list. Meetup.com also does a lot of the work for you. If I create a draft meetup event but don’t feel ready to publish it, it will email me to remind me I have a draft waiting. If I publish the event before I’ve decided where it is going to happen, it’ll remind me by email to add a location. And it automatically sends out reminders to the group members when the date is approaching. I don’t want to turn this to sound like a big promotion for Meetup.com but I guess it taught me a lot about what is involved in organising a meetup. It has features like sign or name badges print outs – things I wouldn’t have thought of but which could be really useful. Once I’d created the group/event page I still needed to get the word out. Obviously I’ll always share the link on Twitter. And you know how that can get the word around. I also listed it on Upcoming.org (like a free Meetup.com) the first time (but haven’t bothered since). One of the members, Simon Cox, thought to post it on the EE forum too before I did, but now you can submit it to the official ExpressionEngine events listing and they’ll show it on their homepage. Format Partly as an ice-breaker and partly to give it structure I suggested that attendees might like to give a little show-n-tell about how they’ve used EE meet their needs. I had one in mind that I could give and it wasn’t long before Adam Khan volunteered too. And so our first meetup was set. This format seems to work really well. We’ve had a theme for the last couple meetups – at our 3rd meetup we looked at ecommerce and the last one was add-ons – and I’m gathering ideas for future events on our group’s message board. Incidentally, Meetup.com have now introduced a new Ideas board especially for this. (See what I mean? They think of everything!) Venue requirements Given that I wanted people to be able to give presentations to the group, I needed to find somewhere we could have a quiet room to ourselves. It also needed to be close to a (relatively central) tube station, since people would be coming from all over London and beyond. By happy coincidence, we had just finished building a website for a friend of a friend, Glyn, who’d just bought and refurbished a pub called The Bell near Liverpool Street station. The Bell has WIFI, beer, and an upstairs room that is available for hire, and he very generously offered it to me for free. One thing to point out about having presentations, which always require a screen for slides or a demo: it is difficult for even just 8-10 to be all be able to see the screen of one laptop. If someone is showing slides then you can just about get away with having (the slides copied onto) 2 laptops split between a group of around 12, but for more people or if it is a live demo then you’ll need a bigger screen or projector. One other requirement, that unfortunately our current venue doesn’t meet, is food. Our meetup happens in the evening so most people are coming straight from work and it would be really good if we could have some finger-food to munch on and keep us going. Instead we are currently surviving on beer and crisps 1, though on the one occasion a few of us indulged in a curry delivered from the restaurant opposite, it’d be more appropriate to be able to have some snacks available from the start. Time and Cost As I mentioned the venue isn’t costing me anything 2, but I am paying $72 per 6 month subscription to Meetup.com. It has also sucked up a fair bit of admin time so far. According to my Bubbletimer log I’ve spent 14 hours organising it to date. This has included tasks like: choosing and booking a venue setting up the group webpage/site arranging for presentations and/or writing the blurb for each meetup choosing a date (at one point I did a quick poll to see what dates suited people but I didn’t get many responses so now I just pick a date that I and the presentees can make and go for it. The more members you have, the less you have to worry about picking a date that noone can make.) trying to find PC/Mini Display Port to HDMI cables to plug people’s laptops into the big screen TV Glyn’s made available to us 3(N.B. This could be another cost you need to budget for – or an opportunity for sponsorship from an AV hire place) looking/appealing for sponsorship, then putting sponsorship received in place (uploading logos/links/blurbs) promoting event on Twitter and submitting to other listings Although I’m getting a lot back in terms of what I learn at the events, it would be nice be able to cover my costs. Meetup.com has some optional functionality to help you with this: one is charging a subscription fee to members and the other is getting sponsorship. I certainly don’t want to make members pay – I think they’re contributing enough by turning up and giving presentations. But I have considered sponsorship. Actually I got some sponsorship (at the last minute) from Brandon Kelly’s add-on shop for our Add-on-tastic meetup: we looked at Pixel & Tonic at the event and link to it from our page and I get a free Playa license in return. But in the long run I have absolutely no idea how much a spot on our webpage/mention at our event is worth… our attendance varies from 9 to 21, we have 52 members and since I installed Google Analytics 2 weeks ago we’ve had 108 unique visits. If anyone can give me some advice about the value of this kind of sponsorship – or other ways you’ve raised funds for a meetup – then please do share in the comments. Or if you fancy sponsoring it yourself, please use this form to get in touch. Result Well, I know I might be a bit biased, but I think the meetup has been a real success so far Apart from being super useful as an opportunity to see and learn from how other people are using ExpressionEngine, I also love just getting to talk shop with fellow web designer/developer/small business owners. Last week we got side-tracked into discussing everything from how we manage our client’s website hosting (reselling or dealing with their—so often—poor choices) to which text editor/ftp applications we use. You don’t have to just take my word for it either. You can read what other members have to say about it here. 1. Yes I know we[Brits]‘ve survived on a diet of mostly this for hundreds of years but this isn’t a purely social event – you actually need to keep a hold of your braincells for some of the topics we’re discussing! ↩ 2. Well, except maybe the odd bit of free design work/website maintenance for Glyn. ↩ 3. I’m still working on this one. I left it to the last minute this time and could only find online shops which would’ve delivered too late. ↩ How to 2010-02-28T18:09:18+00:00 http://www.gradualism.co.uk/articles/why-cant-you-be-more-like-the-internet/ http://www.gradualism.co.uk/articles/why-cant-you-be-more-like-the-internet/#When:22:45:37Z Celebrating software as a service, wondering why other products can’t be more like it and enjoying seeing the web’s influence on print design. I try not to subscribe to newsletters which I’m not going to read but there are a few in which I usually find something interesting or exciting to look at. Two of these appeared in my inbox this week. One from my online accounting application Freeagent and the other from an online shop I buy from occasionally called Nigel’s Eco Store. Freeagent were writing to announce that they’ve released a new version of the application. I perhaps got a little over-excited about the features they’ve added. But the new functionality includes some things I’d specifically been waiting for, like linking an expense to a project without ‘rebilling’ it (useful if you charge a flat rate). In one way you could say that these features are things that always should have been there, but you know what it is like when you design things for the first time. You don’t always get it right. Like my kettle. I bought one of these Eco Kettles last year. I was seduced by the promise that you can measure exactly now much water you need to boil. I always found with a regular kettle that I’d boil at least twice as much water as I need and that seems like a big waste of energy. Not to mention the impact on our electricity bill, considering how many cups of tea we make in a week, with 2 of us working from home every day. Anyway it turns out that although the kettle does indeed let you only boil as little as 200ml water (and is probably saving a tonne of energy), it has some annoying little ‘bugs’: you can never get the last bit of water into the boiling chamber; the lid leaks and its a bit of an effort to push the button down (not such a biggy for me, but for elderly or arthritic users I’d say this is a major usability flaw). And it isn’t particularly attractive now, is it? So you won’t be surprised to hear that when I saw they were promoting a “New Eco Kettle“ in Nigel’s Eco Store newsletter this week my first thought was ‘Damn! they’ve fixed it!’. Unlike with my SAS Freeagent, when they come out with a new release of a product like this, existing users don’t benefit. That leaves us feeling a little sore. I feel a bit ‘used’ – like I was a beta tester but now I don’t get to try out the alpha product. I guess that is what you get for being an early adopter – a feeling which all you buyers of the 1st generation iPhones will know well. I was going to go on a big rant about how product manufacturers need to be more like SAS but I’ve been mulling over the idea this weekend and I just can’t make a real good argument. I can’t see us paying for kettles on a monthly subscription and I don’t like to think about the impact us tossing out our kettles everytime an new version comes out would have on our landfill sites (or lack thereof). I can conclude by siting a completely unrelated example of where an offline product has taken something from the online world and put it to good use. A Word cloud of the most used words in Tiger Woods’ statement, used as an illustration on the front page of the Sport section in Saturday’s Guardian newspaper. Design 2010-02-21T22:45:37+00:00 http://www.gradualism.co.uk/articles/mobilising/ http://www.gradualism.co.uk/articles/mobilising/#When:11:31:21Z Following on from my look back at 2009 I wanted to share my plans for 2010. This might seem a bit late to talk about plans for the not-so-new year, but there are some big changes afoot, and I needed a little time to get my own head around them before sharing the news. Leaving the big smoke This view is actually one of the good things about our current home & office. My partner North and I run our own business. It is just the two of us and we work from home. We rarely meet clients in person and when we do, we go to them or meet in town. We like living in Hackney, but we don’t feel like we’re taking advantage of what London has to offer any more. We’d been thinking we might move out of London in a few years time but then a noisy neighbour moved in next door and ‘broke the camels back’. Having to put up with his loud bassy music for a few hours every afternoon made us sensitive to the rest of the noise surrounding us: the busy road; the live music at the pub opposite; the kids hanging out on the corner with their car stereos cranked up; the list goes on. So this year we’ve decided to test out the theory that, as self-employed designers of the WWW, we can work from anywhere. Our test is two-fold. At the beginning of May we will be moving most of our belongings into storage and taking ourselves and our laptops to Vancouver. Thanks to the hospitality of North’s family, we’ll be living and working there for 3 months, with a visit to stay with friends in Chicago for a few weeks in June. And of course we’ll be taking a holiday while we’re there too (a week, on a little boat, touring round the wineries on the shores of Okanagan Lake, oh yes!). At the beginning of August we’ll be flying back to London and will start looking for somewhere to live around the Northhamptonshire – Oxfordshire – Warwickshire border. We’ll be looking for somewhere big enough to allow us to work from home again. (We’ll try not to get too distracted by the countryside walks, the veg patch and the gardening.) Brand refresh and website redesign Our plan has some pros and cons with regards to our business goals this year. On the up-side: since we will be living rent-free for a few months, we thought this would be the perfect opportunity to put client work aside and work on our own website’s redesign. We’ve been wanting to look at rebranding ourselves, or at least doing a brand refresh for a while now. A big part of this job will include moving our website onto ExpressionEngine too. So we will not be taking on any new client projects between May to July, but we will continue doing small design jobs and website maintenance. At least that is the plan*. *Since initial drafting this we’re already reconsidering this, as a new project has come up that we really don’t want to turn down. This is always the problem with redesigning your own website – you never feel like you can prioritise that work over client projects. View from North’s sister’s flat in Vancouver with Cypress mountain in the distance Expanding our team The down-side of our plan is that we’ve been considering getting in some extra help, by way of a part-time administrator/office manager/book-keeper/project manager. (This is going to be tricky since we need a little bit of a lot of different roles. I don’t even know if you can get one person who can do all of that.) It seems like kind of bad timing on our part to be looking to hire someone when we are going to be away for 3 months, and moving location. Unless they can work remotely? Obviously I support remote working in general, but might this be the one role that needs to be ‘on location’? Or is this what VPAs are for? If you have any experiences or ideas about this please let me know in the comments. Conferences The kind of view we hope to find in the countryside, found on Globrix One thing I am going to miss while we are away are the conferences. I won’t be able to go to FOWD and I’ll miss the first @media run by the Web Directions team. But I will still have the opportunity to go to dConstruct and I will definitely be attending European EECI2010, which I’m hoping will be in Leiden again. I did consider flying down to attend the San Francisco edition of EECI2010 since I’ll be on that side of the North American continent, but I think I’d rather go to the European conference so that I can meet more ‘local’ ExpressionEngine developers. I had been hoping that An Event Apart might be in Chicago while I’m there, but its in Boston this summer and I don’t think my conference budget will stretch that far this year. I’ll be blogging here about how business goes while we’re on the road. Or you can check out our moving to the country blog for more on that side of things. Have you tried taking your business ‘on-the-road’? Or have you upped sticks and moved your operations from an urban location to a more rural one? I would love to hear your experiences. 2010-02-10T11:31:21+00:00 http://www.gradualism.co.uk/articles/reclaim-unproductive-work-time-by-time-tracking/ http://www.gradualism.co.uk/articles/reclaim-unproductive-work-time-by-time-tracking/#When:20:03:12Z I have been running my own business full time for 2 and a half years now and one of the most difficult things to learn has been how little billable time you actually get done in a day/week. (I was reassured to read this week that the well established designer Jon Hicks is still getting used to this too.) What I found most frustrating about this situation—aside from the fact that I’d have no bills to send out—was that I didn’t know where my time was going. I would spend 8 hours sat at my desk 5 days in a row and then look at a measley 10 hours of client work logged and think – “What the hell have I been DOING?” Then I discovered BubbleTimer. It took me a while to come round to the idea, but I have been now been using this little application for a year. In helping me keep track of what I have been doing, it has prevented me from completely losing my mind (and giving up on my business!). Screenshot of BubbleTimer before I started writing this today BubbleTimer is an online application, and what you’re seeing above is basically it. You add your activities down the side, as many as you like. You can add and delete them whenever you need to. Then you check off your time in 15 minute increments by filling in the little lozenges. The 15 minute segments encourages you focus on each separate activity for longer without jumping around so much. As you can see from today’s example, my BubbleTimer records often make me look a bit A.D.D. The problem with “multi-tasking” is that if I’m all over the place, I’m most likely to be forgetting to track what I’m doing in BubbleTimer too. This is when I resort to one or two other tools. The history of my web browser Firefox, and a “web-based time management and analytics tool” called RescueTime. Firefox‘s history records every single webpage you visit as well as the date and time* when you visited it (*Safari, unfortunately, doesn’t track the time, which is partly why I don’t use it!). Considering probably 90% of my time is spent using a web browser, a quick look at the history for the last hour will likely show me where I’ve been and so reminding me what I’ve been working on. Firefox history screenshot from Monday Or not. You’ll see in the screenshot of Monday’s Firefox history that I either took at 3 hour lunchbreak, or I wasn’t using my browser for a change. In this case, if I have forgotten to track what I’ve been doing I’ll take a look at my RescueTime account. To use RescueTime you need to install an application on your computer which tracks what software and websites are actively being used. RescueTime activities by hour from another day By viewing the complete report I can see what activities I was engaged in for this particular hour down to the minutes and seconds. This should usually remind me what I was working on so I can go back to BubbleTimer and fill in the bubbles. And don’t forget the billable hours too! Here is a screenshot of a more focused day tracked in BubbleTimer. A day of client work, tracked in 15 minutes segments in BubbleTimer At the end of the week I need to make sure all my client project time has actually been logged, so that I won’t forget to bill for it. At this point I will print off a summary report which shows the total time spent on each activity for my chosen time period. A ‘good’ week’s summary, with additional notes. Once I’ve printed off my summary I add up all the billable hours and check that they’re logged against the relevant project’s timesheets or added to an invoice. Most of my projects are quoted for in advance so I use this paper based Task Project Tracker (from The Printable CEO series) for this. For the few separate invoiceable tasks I have done, I will add the time to Freeagent. Productivity assessment – how am I doing? The BubbleTimer summary report is crucial for seeing the bigger picture and it gives me a bit of a reality check about how I’m doing productivity wise. I’m learning not to feel stressed out when my billable hours only add up to 30% of my work time. Instead I look at what I HAVE been doing. It was a complete revelation when I first started using this app and I realised that I was getting things done after all. I was managing new business enquiries, doing the bookkeeping, dealing with IT issues or keeping up with the latest industry news online. I have another chart from The Printable CEO series called “When is something worth doing?” which I have stuck on my wall. This helps me remember that generating new business is equally as valuable as time spent on client projects. It helps me focus on what is important. (In fact, I need to reorder my activities in BubbleTimer according to importance. Then I would be able to see how productive I’m being at a glance – the more bubbles filled in towards the top of the sheet the better). There is another potential benefit of being able to see exactly how long I’m spending on all these other tasks. At some point I might want to consider getting a book-keeper or an administrator in to help me with these tasks. Since I’ve been tracking how long I’ve spent on them, I know how much work I might be able to provide a part-time freelancer with and I’ll be able to estimate how much it will cost me too. The working title for this blogpost was something along these lines “BubbleTimer has improved my productivity and maintained my sanity” It didn’t seem to fit once I’d written the article in full, but the statement holds true. If you feel like you are being unproductive or work is making you feel a little insane, I recommend getting serious with your time-tracking! My review of BubbleTimer on the Boagworld Podcast (00:38:32 – 00:43:56) Transcript Project 52 stats: Week 3, Post # 4 Time spent: 5 hours How to, Productivity 2010-01-22T20:03:12+00:00 http://www.gradualism.co.uk/articles/expressionengine-client-documentation/ http://www.gradualism.co.uk/articles/expressionengine-client-documentation/#When:18:44:09Z One thing I found out about at this month’s ExpressionEngine meetup is this Client Guide which has generously been shared by Kyle from Headspace Design. They have produced a very nicely designed documentation file for their clients, which they are sharing in PDF format as well as the original InDesign files so that you can brand it and edit it with your client’s own details. When I made my first EE site I spent a long time writing up a documentation file. It was written in HTML and linked from the “User Guide” link in the Control panel. This covered lots of the items Headspace included in theirs, like how to upload files and marking up your text. Ultimately though, I felt that a system which required such detailed documentation couldn’t be very user friendly, which is why – over time – I built up a must-have collection of extensions and plugins which simplified some of these tasks. Screenshot of my lengthy instructions for using the native EE 1.6.X file upload functionality For example, before nGen File Field and FF Matrix came along I used Mark Huot’s File Field (either way) combined with Imagesizer so that the client didn’t have to use the built in (and overly complicated) Upload File area. I also use Leevi Graham’s TinyMCE plugin to provide a WYSIWYG editor for them. No instructions are needed at all to explain how to use this nGen File Field and FF Matrix combination These add-ons make lots of the explanations in Headspace’s documentation unnecessary for my clients, but there are still some general overviews of the Edit pages and filtering which would always be useful. If you are new to ExpressionEngine and curious to find about more you’ll learn a lot about it by reading this guide too. It is interesting to discover this now, because I have just made the decision to stop offering documentation; it took me so long to customise each time (because I was adding instructions for the particular set of add-ons and weblogs which I was using for that site); and my clients always seemed to call me before they remembered to look at it anyway. Seeing Headspace’s documentation is making me rethink this. Perhaps I will make a more generic overview of EE like they have done, leaving out the site specific details. If/when I do this I will definitely share it here, so if you’re not following me on Twitter just add a comment here to be notified when I post this. General purpose instructions on using the TinyMCE WYSIWYG editor The other nice thing about sharing your documentation file is it exposes how you are using ExpressionEngine. I noticed in Kyle’s guide that he seems to be using the Gallery module to offer crop/resize tools even when the site doesn’t have a Photo Gallery per se. Do you provide your clients with a user guide or other form of documentation? If so, in what format and do they use it?! Transcript Project 52 stats: Week 2, Post # 3 Time spent: 1:45 min 2010-01-15T18:44:09+00:00 http://www.gradualism.co.uk/articles/highs-and-lows-of-2009/ http://www.gradualism.co.uk/articles/highs-and-lows-of-2009/#When:21:39:06Z I spent the latter part of 2009 thinking what a stinker of a year it had been. Mistakes I’d made to do with estimating the timing on some jobs meant that the summer months were an incredibly stressful time. But in thinking about writing this blog post (and reading yours) I’ve realised there were lots of good things that happened last year too. Let’s start with the positive. The Good ExpressionEngine: workshop, development and meetups It’s been a big year for me and ExpressionEngine, the CMS platform which I started using in 2008 and on which I have now developed over 10 websites. Here are some of the reasons why: I attended Jamie Pittock’s ExpressionEngine workshop at FOWD where I learnt a whole bunch of useful tips and had some major light bulb moments. But I was also reassured that, on the whole, I had been approaching EE development the right way. We launched 5 websites developed in ExpressionEngine. Three of these were designed by us, the other 2 were development-only projects involving other designers/agencies. I started the London ExpressionEngine meetup. We had our first meetup in September when there were about 9 of us. The attendance more than doubled at our 2nd meetup in November. So far it has been a really nice bunch of people – they’re friendly, easy-going and keen to share their knowledge. Socialising both online and offline I was fortunate enough to go to both the FOWD and @media conferences this year when I met lots of new people, some of whom I’ve admired for a long time and had even seen at conferences before but I hadn’t yet dared to introduce myself. Andy, Elliot and Simon (to name but a few) – I salute you. It feels like Twitter has really been happening for me this year, probably thanks to all the new people I’ve connected to after meeting them at conferences. I don’t know how I would survive without Twitter somedays, so to all of you who entertain me and especially to those who reply, I am extremely grateful. I went to the first Erskine Social up in Nottingham in November and was surprised at how many familiar faces were there. It was great fun and useful too, I only wish I had thought to book some accommodation for the night so I didn’t have to cut the evening short in order to catch the last train home. I also have to give a heads up to my local Hackney tweetup which just celebrated it’s first birthday in December. I didn’t go half as much as I would have liked this year due mostly to late night working and stress. Whenever I do go though I’m touched by the lovely, welcoming crowd of geeks assembled there at the Pembury Tavern. Gradualism was finally born After 2 years in-utero I finally launched this blog. I haven’t posted as much as I had hoped and there’s still development to be done but at least I have somewhere to share my longer-than-140-characters thoughts. The Bad I spent a few months around last summer feeling incredibly stressed and unhappy. I even found myself questioning whether running my own business was what I wanted to be doing. I certainly wasn’t enjoying it one bit. It was a coincidence of events, which effected both my personal and working life, that led to this state of mind. Work: under-estimating I felt I had seriously under-estimated my development time on one EE job and under-estimated the project management time required on another job, which we work with a PHP developer on. We also over-estimated how much time (my partner) North (aka Christian Kuras) would have to spend working on our projects while he was in Banff on his 6 week artist residency. This residency turned out to be much more demanding on North’s time than he had anticipated. Personal: living and working alone North is my partner in both business and life, so his trip to Canada impacted both our work and our personal lives. I had been quite looking forward to having some time on my own to chill out and I had great plans to catch up with friends I hadn’t seen for a while. But managing this very busy and stressful time at work, alone, and the financial worries that came with it left me struggling to get anything done. Seeing friends was suddenly the last thing I felt like doing. Recovery and lessons learned Ultimately none of the work problems had a terrible outcome. We had an accommodating and understanding client who’s deadline was not immovable so we simply adjusted that project’s schedule to allow for our slower pace. We lost revenue by under-estimating our time but we still got the jobs done and our clients were happy. I realised that it wasn’t simply that I under-estimated how much time was required. There was actually a lot of scope creep going on, but it was all these small little things which, in isolation, seemed so minor that I wouldn’t call them. But when I look back and add them all up, I realise what an impact they have – partly because it isn’t necessarily the thing that needs changing/amending that amounts to much, but its the time spent discussing the detail in the first place (hence the project management time) that adds on so much time. So I seem to have come out the other side of this difficult time relatively unscathed. I have already put into practice the lessons we learned from this: when quoting I am allowing time for contingencies (scope creep) and making sure the development time is bulky enough in the first place. I’m also quoting more time for project management, though this is less of an issue when we’re not subcontracting the development out. Since the summer I have quoted for and delivered on a complete project which (pretty much) came in on budget and this has been a real boost. I’m also feeling confident about the new projects we’re starting – this all contributes to me feeling happy about working for myself again and excited about the year ahead. Transcript Project 52 stats: Week 1*, post # 2 Time spent on this post: TOO LONG! (I spent most of my Saturday evening-night dipping in and out of drafting this post) *I’m counting Week 1 as beginning on Monday the 4th of January 2010-01-10T21:39:06+00:00 http://www.gradualism.co.uk/articles/unblocking-my-blog/ http://www.gradualism.co.uk/articles/unblocking-my-blog/#When:17:34:56Z So I don’t expect you to have noticed, since you wouldn’t have been here (because there hasn’t been anything much to see) that I haven’t been blogging a whole lot. Despite having a long list of story ‘titles’ and ideas for posts, I seem to be unable to bring myself to actually get any posts written and published. Screenshot of my blog writing to do list (in Omnifocus) What is stopping me?! Well, there is Client Work of course, this is a big one. The last 6 months of 2009 were very intense – it is good to be busy of course, but unfortunately it wasn’t all the good kind of busy (a subject I plan to write about later). And even when it is all good busy, I still think it is important to take sometime out from client work. Not to say that I don’t take time out. I went to a couple conferences last year and I spend plenty of time on twitter and reading peoples blogs. Hell, I spend lots of time commenting on other peoples blogs too but hardly ever writing my own original posts. I really want to change this, because – to answer the obvious question – “Why do you want to blog anyway?” I want to put something out into the community and I think I have some experiences worth sharing. I often get asked the same question by a few people and that’s when I add it to my blog post ideas list – since I think there might be more people out there interested in it too. I also just get stuck on it being this big daunting task and admittedly that is because I spend way too long on it. I go about it like I’m writing an article for a magazine or something. I really need to get over this! Hence this dipping-toe-in-water effort of a post which I’m just rattling off, one (okay, maybe 2) read overs before I click that publish button! What am I going to do about it? Photo by Judepics on Flickr Well I have set myself a bit of a challenge by signing up to participate in the Project52. “The goal is to write at least 1 new article per week for 1 year.” This post is now going to seem like a bit of a cop-out, but for me to actually post something about nothing is actually quite a break through, and I’m hoping might unblock the metaphorical sink full of posts sitting here. Yes, I’m aware of the other piece of bathroom furniture we could be talking about unblocking here, and I think that can go without saying Transcript P52 stats: Week 1, post # 1 Time it has taken me to prepare, write, edit and publish this post: 1:30 Things I had to leave out because I’m going way over time: Linking to all those people who do manage to churn out blog posts regularly who prove it can be done alongside client work. (I’ll link to you later when I get round to adding a blogroll – or you can just add your name in the comments below, heh heh!) Links to a bunch of blog posts I’ve spent time commenting on lately. 2010-01-06T17:34:56+00:00 http://www.gradualism.co.uk/articles/make-adding-images-to-ee-entries-safe-and-easy/ http://www.gradualism.co.uk/articles/make-adding-images-to-ee-entries-safe-and-easy/#When:19:44:38Z Most of the time when I’m setting up a CMS in which site editors can add images to their entries I will give them a specific image field to upload into, and that image will be positioned in the page template wherever I have designed it to go. End of story. But there is one type of content entry when this just doesn’t cut it. News and Blog entries. The site editor might want to put 1, 2 or 3 images into an entry and they’ll want to position them at the relevant part of the story, in between, or alongside specific paragraphs. And I have got to give them that – it isn’t such a big thing to ask, is it? The Problem If you have any experience of developing or customising a CMS you must have encountered problems with this. How do you let your clients add images to their entries without letting them completely screw up the design of the site, or without making it so complicated they will never even try? You may be thinking ‘but how hard is it to upload an image, embed it and float it left or right?’. Well, let me tell ya, it is never that simple. Here are some of the specific problems: the floated image is too wide, or just not wide enough, for the containing column, which means the text gets squooshed beside it (as illustrated above). a portrait image is resized to the same width as a landscape format image which means it might be way too big/tall. if you have image captions you’ll want them to wrap below the image which means the containing element needs to be set to the same with as the (variable – see above point) image width. if the editor has to be working with HTML code and accidentally deletes an end tag it could break the entire page layout. Finding a solution that prevents these potential problems rules out using the built-in ExpressionEngine File Upload, even with the functionality it offers to add ‘Image Pre/Post Formatting’, because you just don’t want the client to be editing HTML. Essentially what we are looking to output is a span (can’t use a div because it might be inside a paragraph) with display:block applied to it and a class of either ‘full’ or ‘half’ depending on format of image uploaded. This is because I want the span containing the image and caption to have a different width depending on the width of the image inside it, so that the caption, contained by the span, wraps below the image. <span class="image full"> <img src="images/image_filename.jpg" width="500" alt="Image caption" /> <small>Image caption goes here</small> </span> The Solution This solution relies on you having a number of ExpressionEngine plugins and extensions installed and enabled. It would probably help if you know how these add-ons work. This might seem like a lot of work, but I use them all for other reasons so it made sense to combine them for a new purpose. Reeposition plugin Allow EE plugin Image resizer plugin Field frame extension + nGen File Field type Textile plugin (+ optionally, Textile Editor Helper ) Method Add a custom field to the entry form which uses FF Matrix and nGen file field to allow the editor to upload multiple images for use in that entry. Each image can have a caption and size/format associated with it. Place the FF Matrix tags in the template and directly within them place the Reeposition variable pair tags, which will identify each item within them as a separate entity which can then be placed in different positions throughout the document using the single variable. Create a Textile Editor Helper button which allows the editor to position the Image/Caption set within their body text into the right place. The button will just save them copying and pasting the variable into the textarea, and will prompt them to enter which number image (if adding more than one in the FF Matrix) they’re positioning. The variable will be processed because you have wrapped the main body tag in the Allow EE variable pair. That method will probably make a lot more sense when you look at the code snippets below. Creating the custom weblog fields Create a new field of the FF Matrix type. Configure the matrix with 3 or 4 columns: nGen file field; Textarea for the caption; Text input for Alt. text*; Select for Image size (with options Full/Half or Large/Medium etc) (*I haven’t included this extra field in my example below but it is probably best if you want to allow links in the caption( for photo credits), you can’t have them in the ALT text). Put text in the instructions field which has the reposition code for them to copy and paste into the main body textarea. Or, preferably, add a Textile Helper Button which will paste the code in for them – I just made one of these because I was talking a client through how to do this reepositioning and I could hear she was stumbling over copying the whole curly bracket encased code and I realised this was potentially problematic. Not to mention the complications of adding more than one image and so needing a different id on the reeposition code (you can see I had added further instructions about this in my custom field, but with the TEH button these won’t be necessary). See below for the TEH config code addition. Creating Textile Editor Helper button You need to add some code to the config file for the Textile Editor Helper I figured the simplest way for me to share this would be to give you my amended config file – this ZIP also contains the image I used for the button. textile-editor-config.zip You will need to upload the icon image to the theme’s images folder. The one I included above is called winxp_jpeg.gif because I used a Windows jpeg icon so that my client, who uses a PC, would recognise it. When the editor clicks on the button, a drop-down dialogue box appears asking “which number image are you inserting?” and they insert 1, 2 or 3 etc to embed the image from the FF Matrix image set. Watch out for Search results (you’ll need to wrap in Reeposition and Allow EE code, so that the code doesn’t appear! (but you can prevent images from appearing) You can’t paste EE code into your weblog main textarea for demos like this blog post if you’re using this approach (because it will get parsed!), but generally for client sites this shouldn’t be a problem. All done! I hope you find this useful. Please don’t hesitate to ask questions in the comments if anything is unclear. How to 2009-12-15T19:44:38+00:00 http://www.gradualism.co.uk/articles/why-dont-you/ http://www.gradualism.co.uk/articles/why-dont-you/#When:09:10:06Z Working from home, 5 miles from central London, I can get really lazy. I can’t be bothered to go into ‘town’ so I end up missing what is arguably the whole point of living in London. The exhibitions, the galleries, the shows.  It’s usually when a friend comes to visit that I am forced out of my little Hackney bubble to check out whatever it is they fancy seeing. And then I find myself wondering why the hell I don’t do this more often. So I was pleased when my old art school chum Digger came down from Glasgow recently, cos we went and did some culture.  Digger had come to London to help his Interior design students set up the show of their final year work in the Free Range exhibition in the Truman breweries. He took me to check that out first.  They built a very cool plywood exhibition stand, on which they displayed the students’ A4 project books. Then we went to the Design Museum to see the Super Contemporaries exhibition, which is on until the 4th October, so you have no excuse not to see it if you haven’t already. This exhibition is mainly a historical look at design that has come out of London since the 1950s, plus it includes some specially commissioned projects by designers and architects working in London today.  These included a design for a bus shelter and a post office kiosk (like a telephone box, but for buying postage and renewing your driver’s license).  I found the historical overview fascinating, but I’m sure this was in no small part due to the brilliant way it was presented. They used a special kind of picture rail (I’m presuming it was custom made) that had 3 slots top and bottom that could hold laminated panels, of either photo reproductions or text.  It also supported angled display cases (for books and magazines) and original posters behind perspex.  The display followed a timeline around the room and set key moments and innovations in the design world, alongside the big news and political events of that decade. There was a LOT of information but it didn’t get boring, since the display was never the same twice. Then we went to the Serpentine Gallery and saw this year’s Summer Pavillion designed by Kazuyo Sejima and Ryue Nishizawa. This is a view peeping over the roof looking at the Serpentine gallery building. It was one big shiny, reflective rippling shelter which we had lots of fun with – as you can see. We also checked out the Jeff Koons “Popeye Series“ exhibition which included lots of sculptures that involved what looked like regular inflatable toys juxtaposed with unlikely objects. Like an inflatable crocodile cut through with a household ladder. Turns out all the ‘inflatables’ were made of polychromed aluminium, which added this tension that was created by the incongruity of the scenarios.  We also had a look at who was on the 4th plinth. Unfortunately the most interesting thing we saw while we were there was the fork lift truck coming in on the hour to facilitate the change over. But it looks like there have been plenty of other much more interesting plinthers. Of course you don’t even need to go to an exhibition or gallery to get inspired in London.  I quite enjoyed this promotional poster I saw in a dry cleaner’s window on the way to a meeting the other day. Clever topical adversting. So yeah. Don’t forget. There is a whole world outside the house, offline and in your face. Go check it out and be inspired, why don’t you? Design, Inspiration 2009-08-23T09:10:06+00:00 http://www.gradualism.co.uk/articles/comparing-atmedia-and-fowd-as-music-festivals/ http://www.gradualism.co.uk/articles/comparing-atmedia-and-fowd-as-music-festivals/#When:22:49:16Z I was fortunate enough to go to both the FOWD conference and the @media conference this year. I say fortunate because I think you are pretty lucky if you or your employer can afford to pay for (and allow you the time away from your normal duties) 4 days of conferencing in one year (let alone a quarter) – I managed both because I was volunteering 1 at @media, so I only had to pay for FOWD.  There was quite a striking difference between the 2 conferences this year and I thought I’d share these thoughts here. Please note that I am comparing like for like, so I’m only considering the conference part of FOWD with the @media conference. Obviously one of FOWD’s selling points is the following day of workshops, but that is a whole ‘nother story, one which I promised to blog about here, but we’ll see if that ever happens! @Media felt like a much more mature, serious event than FOWD this year and I think this owed to a few reasons: the 1 hour slot (cf. to about 30min at FOWD) allowed for speakers to go into more depth in their presentations the speakers tended to be more confident and experienced [at presenting at conferences] 2 there were less audience members using laptops throughout the presentations—which personally I find quite distracting and makes me think they are not really interested in the presentation—though this may have been due to the lack of a decent wifi connection 3 there is no (or very little) corporate sponsorship, in the form of stalls in the foyer or faux-presenters there was a smaller number of attendees (than FOWD and previous years’ @media) – I wonder if this is because of the credit crunch and prof. dev budgets being cut content of presentations was carefully chosen and curated so that it covered hot topics in the web design industry today although @media is roughly the same price as FOWD if you count the cost per day, tickets are only sold for the full 2 day event (whereas the FOWD conference is only one day), so the cost may deter those who’s budget for conferences is limited To use a live music analogy,  FOWD is like your regular music festival in a field: the sets are short, there are lots of new and upcoming bands playing, socialising is a main event, and everything (stages, refreshments) is sponsored. @media feels more like the SBC’s Meltdown festival or the even the Proms: the bands are well known or tend to have some significant industry recognition, they are curated (in the case of Meltdown, by a different, established musician each year) so there is some kind of coherent theme, each artist puts on a full length show, there is often collaboration and experimentation between the artists participating and there is little or no outside sponsorship. Lovebox festival isn’t exactly in a field, it’s in Victoria Park in Hackney, but it’s near me and I’m lazy I use this live music analogy because I want to be clear that both these formats are good in their own way.  I go to music festivals to hang out with friends, meet new people and discover new bands as well as enjoy singing along to those bands I already know and love 4. I might get tickets for the Meltdown festival because I want to see one of my favourite groups put on a full length show and/or try out other bands that I trust will be good because of the particular artist who is directing the festival. We are lucky to have a growing number of choices of web conferences to attend in the UK but this means (unless you have a bottomless pit of a professional development budget, which, these days, is unlikely) that we have to start being selective. I know I’m going to have to make some tough decisions next year. P.S. In case I don’t get round to writing a post to review @media09 in full—which is quite likely looking at my track record—I must share a link with you now, which will take you to a collection of links to all the slides and videos from @media09, on James Lindeman’s beautifully designed blog. (1) I have been volunteering at @media for the last 3 years, since I responded to an informal request for volunteers on the Pub Standard’s mailing list. I guess I showed so much commitment and enthusiasm for the task that first year that Patrick was happy to have me back again. (And you’ve got to be committed to get up at 4am to pack 700 bags, really).↑ (2) everyone has to start somewhere, so of course we must have conferences where people are speaking for the first time.↑ (3) excluding those using a laptop for note taking/live blogging, of course.↑ (4) No, I haven’t sung along to anyone on stage at FOWD before (!), but I have felt like I’m hearing something I already know, and been happy to hear it presented well by someone I respect.↑ 2009-07-05T22:49:16+00:00