On this week’s show: The entire boagworld community shares its thoughts on web design and Megan Fisher gives us practical advice on building a mobile website.
Charm Clients, Win Pitches
I am running a workshop on the 23rd of October that you maybe interested in attending if you are a freelancer or involved in selling web design services. The workshop will teach you how to sell yourself to prospective clients, how to generate sales opportunities and how to work effectively with your clients in long term partnership.
If you are interested in attending or want to find out more visit the ‘Charm Clients, Win Pitches’ web page.
As an added bonus, enter the code CWPB_09 at checkout you receive 15% off.
Normally this conference sells out in minutes due to its amazing line up of speakers and subjects that will leave you feeling like a beginner!
However, we actually have even better news because we have two tickets to give away each worth £115+VAT. To win a ticket you have to complete the following sentence on Twitter…
My perfect web conference would include…
Tweet your answer by the 1st August for a chance of winning. The guys at Clearleft will then pick the two most inspirational/funny/entertaining answers and contact you by email.
The importance of microcopy
I have learnt a new word this week – Microcopy. Microcopy is a small piece of text that reassure users and nudges them in the right direction. It is different to the instructional text criticised by Steve Krug in “Don’t Make Me Think“. This copy does not just state the obvious. Instead it clarifies and reassures.
In his post “Writing Microcopy” Joshua Porter provides a number of examples of Microcopy in action.
- When signing up for a newsletter, say “this low-volume newsletter”
- When people add their emails, say “we hate spam as much as you do”
- When subscribing for something free, say “you can always unsubscribe at any time”
- When selling an paid-for web application, be sure to let people know if you have a free trial.
- When storing customer’s information, say “You can export your information at any time”
- If offering optional account creation, say “If you create an account, you’ll be able to track your package”
Content templates to the rescue
In someways it seems almost pointless to discuss Microcopy when most website owners are having problems generating any quality content at all. Its not that they are doing a bad job. It is simply that they are under resourced. They are relying on ‘experts’ within their organisation to provide copy and either these people are too busy or are terrible writers.
That said, the copy is what users really care about, and one way or another we need to ensure it is as consistent and of a high quality.
One thing that might help is a List Apart article on ‘content templates’. These are not the kind of templates found within a content management system. Rather they are templates that can be given to content providers to help them write better content.
In essence a content template is a form content providers can fill in. It will suggest what kind of content they need to provide and even advice on how to write and present that content.
In the article the author gives an example of a content template for product pages. The template asks for information such as…
- Product name
- What is it?
- Who is it for?
- What does it do?
- Why does the reader need it?
In 2003 Cameron Moll wrote “Good Designers Copy, Great Designers Steal” in which he explored where designers draw their inspiration. It was not the first article to tackle the subject and neither was it the last. In fact only this week the Web Designers Depot released a similar post entitled “Great Designers Steal?“
What is interesting about this new post is that he defines three levels of designers…
- The designer that copies – This is normally a designer who is starting out and who learns from visiting website galleries and lifting designs in their entirety, making only minor alternations.
- The designer who steals – Generally more experienced, these designers find inspiration in website galleries but will not copy directly. They will be inspired by a theme or specific detail. However, these elements will be heavily customised and altered.
- The designer who seeks originality – This designer actively avoids looking to other sites for inspiration. They turn instead to sources such as print, art, architecture and nature. Their desire is to create something entirely orginal on the web.
The idea of looking beyond the web is far from new but there is something inspiring about the post. His conclusions are particularly ponient…
The pursuit of originality on the web is not a lost cause. The web industry is still young, and some things have yet to be attempted.
Once you understand the basics of design, try to think outside the box, and try new and different things. Be atypical and unique. Experiment. Don’t be afraid to design from the heart. But keep this in mind:
“Things which are different in order to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams
Theories and conventions are always being questioned, challenged and broken, and they should. If you believe a better way is possible, you will often find your way to it.
Tools for testing mobile websites
On this week’s show we have Megan Fisher talking about practical ways you can start building a mobile version of your site. It therefore seemed appropriate that we featured a post from Sitepoint entitled “Six Tools For Testing Designs On Mobile Devices” in our news section.
The six tools featured are…
- Device Anywhere is a commercial operation, allowing customers to sign up and test “Any Device. Any Network. Anywhere.” There are a range of subscription plans but you can sign up for a free trial.
- MobiReady is tests mobile-readiness using industry best practices & standards. After testing you receive a free report outlining how well your site performs.
- Opera Mini is a live demo of the Opera Mini browser that functions like it would when installed on a handset.
- W3C Mobile OK Checker performs a range of tests on a Web Page to determine its level of mobile-friendliness. The short report produced will tell you where you’re going wrong.
- dotMobi Emulator emulates a real mobile phone Web browser. It’s a bit limited as you can only choose from two different phones you like as a skin.
- iPhoney, as you could imagine, is specific to iPhone testing. It’s a downloadable application that is precise to the pixel, so useful for the designer working on iPhone apps.
With the number of internet enabled smartphones rocketing, this is an area of increasing importance and these tools will become incredibly useful. Check out the post for more details.
Interview: Megan Fisher on starting building a mobile website
Stanton:Alright so we’re here with Megan Fisher, Hello Megan.
Stanton:Hiya, how are you?
Megan:I’m well thanks.
Stanton:Good, we’ve just seen you onstage talking about designing for mobile.
Stanton:Designing effective mobile interfaces.
Ryan:Paul checks his badge as we speak, just to double check, you are Megan Fisher aren’t you?
Megan:Yes I am.
Stanton:So I really enjoyed your talk.
Stanton:So we’re just really asking you about it for all the Boagworld listeners
Ryan:I suppose first of all do you want to tell use who you are, where you’re from so the people who don’t know who you are have a bit of an understanding.
Megan:Sure, I’m Megan Fisher I work for SimpleBits with Dan Cederholm and we’re based in Boston, Massachusetts, small little web design shop.
Stanton:Do you want to give us the overview of what you talked about today.
Megan:Sure, so basically where I’m coming from is I’m a designer for desktop browsers first, and that’s what I’ve being doing for the passed several years, and kind of ignoring mobile web because it seems intermediating and there are so many devices out there with all different resolutions and different CSS support so, it seemed rather scary, but recently Dan’s been working on this new application he’s launching and I decided to take on the challenge of doing a mobile web site for it, so my talk was kind of covering how you get started when you’re first approaching mobile web design.
Stanton:Ok and you gave us three distinct levels of mobile support you can role in, the easy with little work and the benefits with that, and then progressively the more work you put in then the better experience.
Megan:Right, and I think that’s the key with starting with mobile web design, is that you can do it in small steps, it can be iterative, the first step can be showing your markup and that’s obviously the easier step, and then slowly adding a little style so it kind of enhances the site for mobile users and eventually it would be great if we could all design our own mobile specific sites.
Stanton:So in your kind of day to day client work, is this something that you try and roll in to the client saying we can build you this mobile interface, I can tell it’s probably one of the things that’s often gets cut from the budget if you say we can built this fantastic mobile interface for you, or we can give you just the basic level of support.
Megan:Yes, that’s funny. I haven’t had a lot of clients actually requesting mobile sites, and normally I’ll just kind of, you want to make sure your markup is well written and I’ll do a quick little mobile style sheet, sort of when you do your print style sheet that’s like a standard step, and I actually haven’t really offered to do a full on mobile interface yet, that’s kind of a big task and working on dribble is the first step, when you work on your own project you can do these things and not worry about budget and just have fun with it.
Ryan:You talked about three steps in your talk, do you want to take us though those and give us an overview of each.
Megan:Let’s see if I can remember them without the slides
Ryan:I can remind you, I’ve made notes.
Megan:No no no, so the first step is you just want to make sure your markup is always standards based and semantically correct, hopefully most of your viewers, or listeners are already doing this, the benefits of using web standards are well known, they’re faster to load and accessible for a lot of people. So the first step is writing clean and accessible markup, there’s a lot of benefits to doing this as we well know, but for mobile devices specifically they’re going to load a lot faster and if you’re not using tables for layout and you’re using correct semantics in terms of headline tags, and unordered lists and strong tags for emphasis then you’re going to have a much better shot at getting your site to render correctly on a mobile browser.
Stanton:You also talked about mobilising the layout and reordering the content based on the device, and the context in which the site will be used.
Megan: Right, so the first step you can do is making sure your sites one column, and disabling floats is an easy way to do that, and then you want to, display: none is your friend, you want to hide content that’s not going to be useful for mobile users, especially things like flash and all that sort of added stuff, and making sure the most important content comes first and it’s easy to navigate and you can get a clear picture of what the site does, disabling images is another good step because that improves load times of course.
Stanton:And finally it was staying with your brand.
Megan:Right, so a lot of people thing maybe, or maybe people assume because you’re designing for such a small screen space and you want to keep your load times fast that this means you can’t have all your cool branding stuff that would have on your regular web site for your desktop browser, but that’s necessary true you can still incorporate background images and if you use small compressed graphics that are relevant to your branding that would still work, keeping the colour scheme consistent with what you have on your normal web site and the typography you can kind of play with that, and there’s fairly good support for that.
Stanton:You got this asked in the Q&A at the end but I’m going to hijack it and ask you again for the benefit of our listeners, with the adoption of devices like the iPhone and the BlackBerry and consistent UI’s with WebKit and Safari coming into the mobile browser and being able to use jQuery and all that jazz, can you see it getting easier to develop these things and how would you go about testing for different devices.
Megan:Sure, so it’s kind of a two parter, when you’re considering things like the iPhone there’s still a lot of advantages to creating a separate mobile site for these devices, and really the biggest thing you want to think about is the resolution, in the old days of web design we had to design sites that were for 800 by 600 resolution, obviously that was something you considered in the design process, so just because the iPhone renders using WebKit and it looks like it would in Safari, it doesn’t mean you don’t want to design for that screen size, as far as testing for different devices, most of the major devices out there have a rendering engine that you can look at, there’s lots of great tools, one that I used mobify.me and they have support for something like 4,000 devices and they’ll let you test on those and also they have a script you can use that will automatically direct those browsers to your mobile site.
Ryan:How consistent are they between devices, are some devices majorly inconsistent in the way they render sites or are they quite, are we nearly there?
Megan:It’s definitely gotten better especially with things such as zooming, there’s a lot more support for different styles, it’s difficult to say because it really varies in places like Africa they’re using older devices maybe with smaller screens and obviously the iPhone is hugely popular in the States so, that’s what I use to test, it’s difficult with consistency and there’s been a lot written about it, I mentioned in the talk the article on A List Apart about the return of the mobile style sheet is what the article is called, and he kind of goes over that and the consistency and support for handheld CSS.
Stanton:Are there any books or articles that you would recommend people that are wanting to know more about this to check out?
Megan:Yea absolutely, so like I said if you go on A List Apart and just search mobile, obviously A List Apart is a great resource for designers and they have excellent articles on the mobile web as well, Cameron Moll has written a fantastic book called mobile web design and it’s available as a PDF download it’s fairly inexpensive, and that’s what I used when I first started doing my research, also if you go on Delicious and search the tag FOWD09 research you can see all the resources I used for putting my talk together.
StantonOk, well thank you very much.
Megan:No problem guys.
Thanks to Ben Everard for taking the time to transcribe this show.
Listeners section: Web design advice from Twitter
This weeks listener section is going to be a little different to normal. Instead of answering a listeners question, I decided to ask my Twitter followers to help me write a blog post. I posted the following Tweet…