Steve Workman » User Interfaces

Responsive web design in practice: making Steve and Emily’s Wedding.co.uk

Steve Workman — Fri, 17 Jun 2011 09:00:44 +0000

Over the last few months I’ve been making a web site for my wedding. Emily (my fiancée) and I didn’t want your run-of-the-mill wedding website, hosted by someone on an unrecognisable domain (for example, ewedding.com or gettingmarried.co.uk sub-domains). I wanted something that I had control over, that I could make as the perfect website for us, not a nice template that thousands of others have. We wanted something personal.

Secondly, these pre-packaged themes aren’t suited to modern web standards. They just-about work on small screens, and quite a few of them use flash, or they take 5-10 seconds to load (lots of people, heavily shared servers, you do the math). Don’t get me started on the ones that play music in the background.

So I started with a solid foundation of responsive web design and HTML5. This is how I did it.

The spine of this site is:

WordPress for the CMS
320 and up for layout
Tangerine and Scriptina font
Appcache to increase performance

WordPress
I used wordpress because it’s easy to make great themes quickly. You’ve got full control of the output in a simple CMS. Job done, but for one thing: the default theme doesn’t use HTML5 semantics.
I took the WordPress html5 boilerplate from Jeffrey Sambells and used that as my base, giving me a good template for responsive web design.

320 and up
The choice of layout framework, 320 and up, comes from seeing Ethan Marcotte present at Future of Web Design, showing off the Boston.com re-design. I thought it was a wonderful talk and seeing how a site responds to screen size and context on such a high profile site made me rethink my views on responsive design. I used to think that for large, image-heavy sites, it just wasn’t economical to make a site work with media queries.
It’s a change in mind-set to design for mobile first. Thinking like that, instead of retrofitting a smaller design onto your UI, makes the whole proposition a lot more appealing. Andy Clark took this concept and made a framework out of it, and that is 320 and up.

320 and up works on the principle that you code a mobile site, and layer additional layout on top with media queries for each of the sizes you want to support. Coding this way also makes you very aware that the content is very much the purpose of the site, and that nothing should be left out, no matter what screen size you’re on.

Adding 320 and up to the HTML5 WordPress baseline wasn’t as easy as I’d have liked. No offence to Malarkey, but you don’t need all of the 320 framework to make a great site, so I cut a number of the hacks out and updated the respond.js library. Still, it solves many of the gotchas for you, so use it

320 and up has these screen size stops built in: 480, 768, 992, 1182, and a high-dpi option for retina displays . For my this site, I added in 768 and orientation: portrait to deal with iPad portrait mode problems. It’s up to you what stops you use, but these worked for me. If you want to support the galaxy tab and other screen sizes, more media queries are easy to add in.

The Design
There’s a lot of CSS3 that’s gone into this site. The background and header uses CSS3 multiple backgrounds to allow the layout to flex without the overhead of another div to layer the extra backgrounds on. Note, I did chicken out and add those extra divs in as it just didn’t look as good on IE7/8 and that’s what 30% of people are using on my this site.

The font choice was very important for me and Emily, and FontSquirrel came to the rescue. It’s got a great selection of script fonts that just aren’t available in the standard set that comes with computers these days. Text shadow adds to the effects but isn’t essential, so it doesn’t look out of place on IE.

My use of box shadow is basically in place of borders. It makes the whole theme pop off the page with slight shadows and a red tint that matches the theme really well. However, box shadow on the iPhone and small screen devices slows down scrolling, and should be used sparingly. Lovingly, responsive web design lets me turn it off for small screens

There’s lots of other little things, like using CSS3 selectors so that class names don’t have to be used all the time, and some nice stuff for the first letter, and also border radius (as standard).

Performance
The site uses appcache to speed up the site loading, and it makes a massive difference. The cache is around 1MB, that’s data I’ll never have to download again. It works on all of the latest browsers and mobiles (where is makes the most difference). I can’t recommend it enough.

For the useful information section, I used local storage to keep the different sections open/closed so that it’s the same when you come to the page next time.

Summary
In summary, this site has allowed me to showcase responsive design, mobile first, lots of CSS3 and make it work in IE7/8. Take a look at the source code, and learn. Oh, and wish us well on our wedding

If you liked this, you may also like:

Future of Web Design Sketchnotes – Day 2

Steve Workman — Thu, 19 May 2011 14:13:16 +0000

Over the last few days I attended the Future of Web Design conference in central London. It was a great two days meeting some of my peers and heroes of web design. Here’s my notes from Day 2, featuring Ethan Marcotte, Femi Adesina, Josh Clark, Bruce Lawson, Martin Beeby (from #LWSIE the day before), Elliot Jay Stocks, Sarah B Nelson and once again, Josh Clark!

Sketchnotes for Day one can be found behind this link.

Thank you once again to everyone involved.

If you liked this, you may also like:

Future of Web Design Sketchnotes – Day 1

Steve Workman — Thu, 19 May 2011 14:12:48 +0000

Over the last few days I attended the Future of Web Design conference in central London. It was a great two days meeting some of my peers and heroes of web design. Here’s my notes from day 1 including talks from Aaron Walters, Mike Kus, Rachel Andrew, Robin Christopherson, Daniel Rhatihgan, Sarah Parmenter, Dan Rubin, Matt Gifford and Aral Balkan.

Day 2 sketchnotes can be found behind this link.

If you liked this, you may also like:

Hardware, then UI, will drive mobile forward

Steve Workman — Wed, 16 Feb 2011 09:21:31 +0000

It’s Mobile World Congress 2011 this week, and amongst the throngs of Honeycomb tablets, Nokia and Microsoft square dancing on the showroom floor, there are a few announcements that may not be hugely exciting to the general public, but that the tech community should be giggling with glee about.

I’m talking about this:

Kal-El benchmark, courtesy of Anandtech

This is Nvidia announcing the Kal-El SoC (System on Chip), a 12-core Tegra 2 GPU mixed with a quad-core ARM Cortex A9 CPU, all on one chip. Even better yet, this chip will be seen in tablet computers in 6 months time. That’s an incredibly aggressive timeline considering the brand new Tegra 2 chip is only 9 days old, and yet it’s performance has already been doubled.

The even bigger news that has slipped by, is that that’s not all.

Tegra 2 roadmap, courtesy of Anandtech

Notice the scale on the left hand side. Whilst the new chips are rising in a linear fashion, that’s a logarithmic scale, so every year, these chips will double in power. By 2014, we should have SoCs in mobile computers that are 4 times as fast as a Core i7 CPU and 25 times faster than a Core2 Duo. That’s an amazing amount of computational power in a chip the size of a peanut with a TDP of ~1W.

Modern UIs need this power
So what are we going to do with all this power? Whilst it’ll be like having an XBox 360 in your pocket, games aren’t the only thing that will use this power.

Just take a look at Microsoft’s Beauty of the Web demo site, showing off IE9′s hardware acceleration enabling it to make blizzards with HTML5 web technologies. That’s just the start of what we’ll be able to do with this power. Think how useful Honeycomb’s 3D Google maps will be, and think how it can be used to empower a mobile workforce, being able to take your entire desktop with you and have it work like your desktop pc. It will enable the mobile user to process huge data sets which previously would have been a server job, letting the workforce make complex decisions quickly and on the move.

Of course, don’t expect things to change overnight. The first things to happen will be “true” multi-tasking, then a proliferation of HD video including Skype. It’s taken years for web developers to embrace CSS3 functions, it’ll take another few years to truly embrace canvas, SVG and WebGL.

The future vision is coming
At CES 2009, Microsoft showed off a video for their Office of 2019 concept (below). The hardware announced today will drive this forward and enable developers to make these UIs of the future. I can’t wait to be part of this future

Images in this post are from Anandtech.com

If you liked this, you may also like:

Droid Doesn’t do tablets

Steve Workman — Wed, 01 Sep 2010 13:03:15 +0000

As a developer and iPhone fan, nothing pleases me more to say that Android has caught up with the iPhone. Android hardware has been great for a while, the Motorola Droid and Nexus One being the first in a wave of great devices, but the software hadn’t been right. Android took its sweet time to develop but finally has all the great features iPhone users have enjoyed since the iPhone 3G and more (wi-fi hotspots for example).

Thing is, the iPhone, and iOS, has moved on.

Since the launch of the iPad, every Android-lover has been waiting for a tablet with Android on it. They want the brilliance and openness of Android on a more useful (day-to-day) form factor. To those people, I say wait, it’s not ready yet. In order to put iOS on a tablet, Apple had to fork the code base into two versions, iPhone 3.1 (later 4.0) and iPad 3.2. To date (though that may change at the September 1st event), these two branches have not converged, nearly 9 months later. Apple did this for a very good reason: the native controllers and views are not suitable for tablet devices and new paradigms needed to be created.

The SplitView Navigation controller, necessary for much of the good UI interaction on the iPad. Courtesy of Apple

Android tablets, on the other hand, are content with throwing the same old mobile-centric code at tablets. For example, today Archos unveiled five new Android 2.2 devices from 2.8″ to 10.1″ and Samsung is about to unveil their Galaxy tablet which is a 7″ Froyo device.

So, why isn’t this a good idea. For one, the Android developer API says it doesn’t support screens larger than 4.3″. That should be a pretty good first clue. Take the iPad HCI guidelines for a second clue. It states that full screen transitions are bad, interfaces have to be tailored to the device, and you have to do more than just blow up the interface to twice the size. Take a look at how iPhone apps look on the iPad for that one.

iPhone app on an iPad, now think of an Android app, just blown up.

Truthfully, the current Android SDK just can’t cope with the demands of a tablet UI. Little things like smooth transitions when rotating to big things like having universal apps which cover multiple screen sizes well. Android has support for multiple screen sizes, but it relies on relative positioning for this and is an inelegant solution compared with Apple’s interface builder.

A bigger screen will accentuate the differences in the quality of iOS and Android apps. If you have a mediocre Android app and put it on a tablet, it’s going to look poor, but put a mediocre iPhone app on the iPad, and it’s at least usable. Take a look at this video of a $50 Android tablet from India Do you want a UI like that on your tablet? Didn’t think so.

So, my advice, is wait. Wait until Android 3.0 (Gingerbread) comes out in Q4 this year, then wait until 2011 for some good hardware. 3.0 has set precedent by disallowing vendor customisation, forcing a much-more Apple-esque standard set of controllers which will suit more purposes. Acer and Motorola have already announced that they’re delaying the launch of their Android tablets until 3.0 is available.

Still, when that time comes around, the second generation iPad will be out, and then Android will be playing catch up again.

Update: Just seen the ViewSonic ViewPad 7, a 7″ Froyo tablet. Take a look at the video in the link: it’s full-screen all the way, sluggish and, I quote “a plastic rebadge me-too Android tablet”. When you’re watching the video, think about how that’s going to work on a tablet the size of an iPad (or the Archos 101 for that matter). It’s not going to be pretty.

If you liked this, you may also like:

Designing for Touch

Steve Workman — Wed, 16 Jun 2010 16:30:55 +0000

Over half of the UK population has a mobile phone, and there are 40 million active mobile devices. Of that number, there are about 8 million touch screen devices, with around half of that number being accounted for by the Apple iPhone. More than half of the new handsets being manufactured today have touch screen functionality, though no other single device has had the success of the iPhone.

The reason is partly to do with the Apple brand, but this is second to the iPhone’s well-designed software, specifically the user interface (UI). Interacting with an iPhone is simply a joy and no other device has combined its simplicity and accessibility. How can its design principles be learned upon to produce great touch screen interfaces?

The secret lies in keeping to the four principles of touch screen applications: direct interaction, concise wording, natural input and integrated applications.

The iPhone is a direct interaction device, meaning that all of the input takes place on the screen, not relying on any other hardware keys to support the UI. It uses this direct input mechanism to allow the UI designer to place important navigation and action buttons within the UI in more intuitive places than hardware keys allow. This principle can be leveraged in one simple piece of advice: touch screen input is direct, place buttons in intuitive, easy to reach places for best usability. Because these devices are small, the edges of the screen are always in reach and easy to access, so it makes the ideal place for navigation and essential functions.

It is important to note the difference in the web and web interfaces with touch screen applications. A lot of web sites rely on a pointer hover in order to reveal different or additional navigation options. This is simply not possible with direct input devices as a finger never hovers on the screen, it simply taps. A small paradigm shift is expected from these designers to harness direct input correctly. This does not mean that a web interface cannot function as well on a touch screen device, far from it. The web has to be tailored for direct input. In principle, the web will work just fine on any display, but the screen is a lot smaller on handheld devices and information is either lost of compressed, making the user perform a large number of ‘zoom’ actions to locate the information that is contained within the web page. Making direct input usable can simply be a matter of reducing the zoom operations. Make action buttons big; big enough for a finder to press without having to zoom in. Apple recommends a 40 pixel or larger button to allow for all finger sizes.

All of these lessons on the mobile web show why Apple’s applications have taken off so well; they are simple and concise. None of the apps are overcrowded or even feature word-heavy instructions. This part is key: if a user does not know what to do with a button within the first few seconds then the wrong label has been chosen. It is not that the screen is complicated and needs explanation, if it does then you should think of alternative ways to express that function.

Take, for example, the iPod application. It plays music, but often there is a very long list of music to be displayed; it has to be categorised by artist, album or genre. If the app decided that it wanted to give categorisation choice to the user, it may start with a few buttons asking for a category selection (see diagram).

Instead, it offers the most recognisable selection and then keeps all of the other options available at all times by using a tab bar. This level of functional accessibility paves the way for a golden rule in touch screen menu navigation: all functions must be accessible within three actions. There are no functions in the iPod app that cannot be accessed in more than three screens of data. This is a very important rule for touch screen devices, as many follow the single hardware button principle of the iPhone, giving no permanent button for going back a level of detail (which, as before, is a good thing) then burying functions deep within the menu system, making it very difficult to go from one set of functions to another. Three is the ideal number here as it allows for a good level of data granularity and yet has all top-level functions on two taps away.

There are some exceptional applications, but no exceptions to the rule. If there are circumstances where actions require more then three touches, then those apps need to make use of natural input, an innovative facet of touch screen design. Natural input is performing an action with a motion or gesture which is indistinguishable in the given context. Put into plain English, there can be no other plausible action that can be represented by a given gesture. A perfect example of this is the Photos app on the iPhone. Select an album, where to start, then view the pictures (note: three steps). To view the next picture, push the current one off the screen. Zoom is performed with a pinch and you can rotate pictures by picking up its edges and turning it round. Photos also rotate pictures automatically based on the orientation of the device. There are few better examples of natural input that this.

Applications can be further improved by using natural input. The iPhone’s Maps application, especially when compared to its web-based counterpart, is not the most intuitive application. Sure, it has a good amount of options, uses one finger to pan around the map and two to zoom, but when I want to do anything advanced it falls short. Say I want to know how far Leicester Square is from my office in Victoria. Both locations easily fit on one map, but I have to search for the locations before it drops a pin into the map. A more usable way would be to allow me to drop the pin from the UI, a double-tap would be natural, or dragging a pin from a menu bar and placing it on the map.

Maps can create a route between those two places for me. The route it’s given me takes me along The Mall, but I want to go through Green Park. Attempting to move the route with a drag action (like the web interface) I only succeed in moving the map. There are ways around this, but it is not as easy as it could be and certainly isn’t as natural. The same goes for wanting to move a pin; the functionality is either absent or difficult to use. Improvements here would be very simple and highly effective.

Natural input is very under-used by non-Apple applications, but good use of it can lead to very successful apps, like the excellent Flight Control, where plane flight paths are dragged with a single finger, or the intuitive first-person shooter controls on Wolfenstein 3D.

The final piece of Apple’s puzzle is integration. This has been a large component of all ‘Web 2.0’ applications, the ability to communicate between sites easily, as if you were using the site itself. It is not simply about providing links but providing functionality between applications. This integration is important on touch screen and handheld devices as removing all unnecessary actions and tasks is essential. If an application is able to perform useful tasks with a piece of information, it should not rely on the user to perform that task. For example, the iPhone app Zensify can post pictures to Twitter and Facebook, and does so at the same time without the user having to perform the action for each service.

Creating great touch screen applications can be hard, but sticking to the four design principles, direct interaction, concise wording, natural input and integrated applications, and you’ll be well on your way to making an award-winning app.

If you liked this, you may also like:

Why tablets aren’t working

Steve Workman — Sun, 02 May 2010 11:36:44 +0000

It seems like making a tablet computer that is efficient, usable and cost-effective, can be quite a difficult proposition. The Joo Joo, a tablet that everyone wants to love is getting none. The Courier will never see daylight. The EeePad is delayed and most surprisingly, the Microsoft lauded HP Slate has been canned.

Only the iPad survives, and you still can’t get one outside of the states. Apple must be delighted that its competitors are falling by the wayside, giving it the whole market to itself.

Why have the others failed? The culprit seems to be a combination of OS, battery life and performance. HP claimed that the Slate, using Windows 7, was not suitable for touch. Its combination with a comparatively power hungry Atom processor meant battery life suffered (3-5 hours reportedly). The Joo Joo suffers from new OS syndrome. Like Android, the first few iterations show promise but stability is lacking and it needs a lot more work. These issues can be resolved, but it needs time and investment.

The Courier is an interesting proposition. Never going past a rendered concept video, its UX and ideas will hopefully make their way into larger screen Windows Mobile 7 implementations.

I believe that this is how tablets should work in real life: a mobile OS on a larger device. They are designed for touch, are low power and can do some remarkable things.

I’m going to be excited when the first Android and WM7 tablets arrive. If, as hoped, the Slate becomes a Web OS device, the market, completely dominated by the iPad, will have competition. The tablet isn’t dead; it’s just been approached in the wrong way. Apple is leading the way as usual, and everyone is playing catch up. They will get there eventually, as they did in the wake of the iPhone. I’m looking forward to the competition.

If you liked this, you may also like:

Microsoft’s Design Evolution

Steve Workman — Mon, 01 Mar 2010 17:10:04 +0000

This is an opinion piece about Microsoft’s Windows 7 Series phones. The opinions are my own and not that of my employer.

I remember the ‘good old days’. Back in 2004 (at uni) I tried to create a Windows CE program for a little mobile device. My friends and I spent months trying to get it to work (at one point resorting to Java, quickly realising our mistake), and in the end all we could produce was a list of menu items and a few forms. The overall user experience (UX) was horrible and it was slow and unintuitive. That was the standard for Microsoft products of the time.

The turnaround began in 2005 when MS hired their new head if UX for Office, Jenny Lam. Jenny revolutionised the tired Office UI with the ribbon, and hence inspired the Windows 7 UI. A few years later, the Xbox team developed the NXE, based on ideas from the Windows Vista media centre interface, which was leaps and bounds better than the XP MCE UI. This “text focused” design, using Jenny’s Segoe UI typeface found it’s way into he Zune, and came to fruition in the Zune HD. From this, we get the next evolution, the 7 series phone.

With such a clear evolutionary path, it’s hard to see why so many people are surprised by the new phone OS. When the Zune HD launched, people cried out for this UX to be made into a phone. Now that wish has been granted and Apple should be scared.

The 7 series UI is everything that the iPhone is not. It’s got a home screen that displays useful information, with integration into multiple web services out of the box. It’s got cloud-enabled apps, not relying on purpose built sites but working with service leaders. It’s got a calendar that’s useful, and a UI paradigm that is consistent, though, as with the ribbon toolbar, will take some getting used to.

And that’s the thing with MS’s UX strategy. They are now prepared to go out on a limb to try new stuff, even if it may require a learning curve.

We had a question go round the office a few days ago: name a MS app that was rubbish at first, and is now a market leader. We named pretty much every product that MS make (except IE). With 7 series phone, MS have completed their line up. Far from being a dead company to the consumer, Microsoft are still the king of the hill.

Where do MS go from here? The evolution will continue, and although it will seem slow, with product releases every 2-3 years, innovation will continue to flourish. MS will never be a trend setter, and will mostly go their own way, but their way is rarely wrong. I predict that MS still have their best work within, and you would be a fool to ignore them.

If you liked this, you may also like:

The Death of the Netbook

Steve Workman — Tue, 26 Jan 2010 14:00:54 +0000

I’ve never really understood the netbook craze. I can see the benefits of having a lightweight, low-power computer that performs 90% of the tasks you use a personal computer for; it just hasn’t appealed to me, or my wallet.

I can understand that it’s a very cheap way to get online (even though they are double US$ the price in the UK), but I’ve been perfectly happy with a 13″ Macbook I bought 4 years ago. I haven’t seen a purpose to re-spend the money that I invested all those years ago on a laptop that can do half as much.

Other things worry me about netbooks though, they’re a stop-gap. Since the iPhone, the dream has been to have a fully-fledged PC available in your hand, that works quickly and has a long battery life. Netbooks bridged a gap by providing a long(er) battery life and smaller screen, but have left it to the big boys to sort out the proper way of interacting with these smaller devices. See my post on netbook touch screen usability for more on how infuriating it gets.

So, in the next two years, netbooks will die completely. They will be replaced by what these users have wanted all along: a tablet PC with a good touch screen interface. For the first year, pretenders to the throne may have to carry a small bluetooth keyboard whilst the niggles are worked out, then the revolution will come, prices will drop and all those people who shelled out their hard-earned money will happily spend again to get a tablet.

If it is not beyond my power, I’d put the whole netbook format on deathwatch. Its death will be prolonged by price, but it will soon fall. The netbook’s time will come, and we’ll be a whole lot better off with its sucessor.

If you liked this, you may also like:

Tablet usability – the future can’t come soon enough

Steve Workman — Wed, 20 Jan 2010 10:30:29 +0000

Last weekend I was sat on the tube (London underground to international readers), picadilly line to be exact, heading into central London. A young man got on and sat down opposite me. He got out a little ASUS netbook, turned it on and swivelled the lid to use it as a touch screen. “Awesome”, I thought, “he’s got one of those cool touch screen netbooks running Windows 7, I’d love one of those, it’d be so convenient”.

I watched the man use the laptop for a while, tapping at the screen, using two fingers to scroll on a page and it looked ace; it looked simple. Soon, the experience turned sour.

I watched as the man pulled a stylus out from the side of the computer and starts to tap at the screen. I had thought styluses had been banned by international law since the introduction of the iPhone nearly two and a half years ago. Still, if there are some things that can’t use the OS zoom function then maybe a stylus has to be used.

I then received an even greater shock.

I watched in amazement as the man lifted up the screen to try and use the keyboard. Upside down. A control + something command that was not present in the touch screen menu.

Naturally, as a usability practitioner, I was horrified but continued to watch the bloke struggle. It took five stabs and glances back at the screen to confirm the action was successful. By this time, the man looked thoroughly frustrated with his program’s choice of shortcut. Soon after, he packed up his laptop and got off the train.

What appears to be the moral story, is that no matter how advance your OS is, the applications that you run can still scupper the experience, especially with tablets. There are two solutions to this problem:

1. The iPhone way – touch is the only interaction option. No legacy apps are allowed. It’s an OS designed for touch and for touch only.
2. The full screen keyboard way – Windows 7 may have a good touch screen keyboard, but it isn’t implemented in all apps (the iPhone way). You would need a true full-screen multi-touch keyboard, adaptable to different screen sizes, to make it function correctly.

Hopefully there’s a third way, the Apple tablet way. We’ll wait and see about that…

If you liked this, you may also like: