Everyone knows the key mantra for designing mobile web sites – “keep it simple” but there are some tips and tricks that will help to create a great user experience for mobile visitors…
- Capture mobile users from the full site – if your full site isn’t rendering well on mobile devices how are people going to find the link to your mobile site? Put in place a redirect to a mobile optimised layout though it’s worth remembering that redirects could also be annoying to users that wanted to see your main site so…
- Provide a link back to your full site – this could be in the footer or as a landing page but in some cases the user may be trying to achieve something not possible on a slimmed-down mobile site or they may be on a tablet that is incorrectly being recognised as a mobile device.
- Consider multiple mobile layouts - you could have a theme that optimises content specifically for iPhone and Android, leaving the other mobile users with a plainer but still small-screen optimised site. Figure out what your audience is likely to be using and target that but don’t forget to tweak and customise the site after you’ve gone live based on the type of devices your users are actually using which will change over time.
- Use appropriate input types – if you are asking the user to provide email address or usernames via a form it can be difficult for them to enter correctly if autocomplete is turned on, similarly it would be better to provide the numeric keypad if you are asking for a telephone number and you usually would not want . You can provide this functionality with a mix of the <input> tag and the autocapitalize property, there are a whole host of other possibilities including length checking and regular expressions but bear in mind not every device will respect these features.
- Avoid scrolling – pagination vs. scrolling has long been a debate in web design circles but if you want to provide your users with a more ‘app-like’ experience the key elements to your site should fit adequately on the page without the need for scrolling. This may not apply to content but if the user is being asked to follow through a process or provide a series of inputs it will be much clearer to the user what they have to do if it fits on one page, equally…
- Avoid clutter – if you have pages with little content it may be worth ensuring that any non-essential (but for whatever reason required) footer information sits below the bottom of the screen to avoid clutter, at the very least you should consider a little trailing white space followed by a dividing line to clearly separate the content from the footer.
- Consider the user’s goal – you might be falling over yourself to provide content or services to your mobile users but is that what they really want? Consider whether or not the user might have other goals in visiting your site and show how they can be achieved, even if that is not via your mobile site. For example, it may be helpful to include a ‘contact us’ or a telephone/email link on at least the first page if not every page.
- Don’t be annoying – it’s the little things that tend to irritate users and on a mobile device this is magnified since they are already compromising on screen size and input capability. For example, pre-fillling forms with help text may mean that the user is going to have to delete that text to enter their own – irritating enough on a desktop and even more so on a mobile device.
- Device testing is essential – there are dozens of emulators and simulators for mobile devices but nothing will ever match testing on devices, it is very tempting as a developer to test primarily on a desktop but it really isn’t the same as holding a small device at arm’s length and using a tiny keyboard to provide input. During your testing phase have someone with a very critical eye run through your site to check for any minor irritations, make sure to tell them to be ruthless in their criticism.
I hope that provides some useful information to those of you starting out with the mobile web and of course, much of this is up for debate so do get in touch if you disagree or have content to add. The list is not intended to be exhaustive and over the next few months I’ll add posts on testing and more technical aspects of the process.
I recently attended the Over The Air mobile conference at Bletchley Park (please donate), the event was free to attend and very well organised with plenty of free food and drink as a bonus. My focus for the conference was the mobile web and I’ve compiled links to topics mentioned in presentations I attended in that area, they’re well worth a look so I thought I’d share them here…
Responsive Web Design
- Responsive Web Design Article
- Pragmatic Responsive Design
- Responsive Images code on github
- Presentation on Media Queries
- Good presentation by Opera guy
- Using the viewport meta tag to control layout on mobile browsers
- YSlow Firefox Extension – shows why pages load slowly
- Full Opera Mobile Web Optimization Guide
- Making an iPad HTML5 App and Making it Really Fast
Some W3C links…
- Mobile Web Best Practices 1.0
- Web Content Accessibility Guidelines
- Relationship between MWBP and WCAG
I registered as an iPhone developer earlier this year primarily to get my hands on the pre-release iOS upgrades but recently I was asked to help design the user interface for a BI-related smartphone application and it started my brain ticking. When it comes down to it I’m a BI + SQL guy and it’s been a long time since I’ve actually gotten my hands dirty with real coding (remember the BBC Micro anyone?) but I have spent time on-and-off dabbling with PHP, HTML, CSS and Visual Basic as well as having managed a couple of development projects so whilst I’m rusty I’ve not been totally out of the loop.
- Content – what is the app for?
- Styling – how can I achieve the iPhone look-and-feel?
- Compilation – how to turn a website into an executable binary?
- Publication – what do I need to do to release my creation in the wild?
Since I knew I’d be putting some time into it I didn’t want to build an application that was just a glorified tech demo, I wanted to build an app that serves a valid purpose and that doesn’t exist already which was quite tricky. Fortune was clearly smiling on me since I started working on this project in the same week that I went for a short break to Bratislava (it’s lovely by the way, you should go), being a vegetarian one of my pre-holiday tasks is to find out how to say “I am vegetarian” in the local language and for that I use the International Vegetarian Union’s Vegetarian Phrases in World Languages. It’s a great resource and I usually just print the phrases to take them with me but then I had the lightbulb moment – wouldn’t it be brilliant if I had an app that did this? Thankfully the manager of the IVU agreed with me and so I had my concept – a veggie phrasebook.
Next came the styling issue, if you’ve been an iPhone user for a while you’ll be used to the default look-and-feel that comes with most iOS applications and I had no idea how I was going to recreate that. Thankfully I’m not the first person to have hit this brick wall and developers with skills that are orders of magnitude better than mine have built a number of solutions, the best one out there in my opinion is JQTouch, a JQuery plugin that mimics the native iPhone styling as well as providing excellent navigation animations. A demo of JQTouch is available here: JQTouch Demo and is will only work if viewed on an iPhone or Android handset or in a WebKit browser (e.g. Safari or Chrome).
My general approach to learning new technologies tends to be very simple: just start - sure, you’ll get it wrong and it might be frustrating for a while but you’ll be learning all the way and come out the other end battle-scarred but victorious. Thankfully JQTouch fits my methodology perfectly, there’s no installation to speak of, just download and unzip the package and dive in there with your favourite text editor (I’m fond of TextWrangler on Mac and Notepad++ on Windows). JQTouch essentially uses one giant HTML file with divs for each ‘page’ of the application, the file includes the JQTouch libraries and a couple of CSS theme files and image sets – one in black (as per the demo) and one titled ‘Apple’ which looks very much like the settings page of the iPhone.
Having assembled the content, built the base HTML pages and customised the theme my next concern was how to turn it into a compiled app. It’s quite nice being able to run the entire app in a browser window but I wouldn’t quite feel like I’d regained my developer strips without a bona-fide compiled app and there are a few toolkits out there that will help achieve that. The most interesting toolkit to me right now is Appcelerator Titanium which looks powerful but might take some ‘discovery’ time and since I wanted to do the best possible job but in the shortest possible timescale I opted for PhoneGap, a cross-platform toolkit that allowed me to literally copy and paste my web root folder and make a compilable Xcode project almost immediately (seriously, read their Getting Started).
If you’re new to Apple development in general, Xcode is Apple’s development environment for both Mac and iOS applications and comes bundled with the OS as standard – it’s a little like Visual Studio in that it’s an IDE but the similarities end pretty quickly after the obvious. Personally I find Xcode to be a little fiddly and not as intuitive as Visual Studio but that could be a little bias from having spent a lot more time in the Microsoft camp when it comes to development. Nonetheless, Xcode is a great IDE and other than spending the best part of three hours trying to nail down my digital certificate signing chain (what happened to “it just works”?) it became surprisingly easy to debug the app on my iPhone and build the final version of the app.
My secret weapon in this whole process was (believe it or not) the data professional’s Swiss Army Knife – Excel. I’ve often said that if you could teach even half of the world’s office workers how to use Excel properly you could change the world and I believe that the same is true even for the classically technical professions who eschew the GUI over scripting methods. Excel’s blend of spacial referencing and a comprehensive function library make it an ideal code generator and I regularly use it to write large batches of SQL – this time I simply copied the IVU phrases into a spreadsheet, sorted and categorised them and used formulae to generate the best part of over 4,500 lines of HTML – even the menus came from Pivot Tables.
A little bit of tweaking and I was ready to submit the binary to Apple for approval, but that’s enough for now so I’ll talk a little more about the submission process in a future post. Sure, there might be a few kinks round the edges but I think it’s a reasonably good first app and I’ve gained a stack of good experience building it which over the coming months I intend to share in a series of posts.
If you’d like to take a look please check out my Veggie Phrases app page or you can try it out (it’s free) here…
Every now and again I end up doing some web work, sometimes it’s part of a BI implementation where I’m trying to follow corporate branding guidelines but in most cases I just have a particular problem to solve and I want to put together a simple but aesthetically passable design.
So, when I need to delve into the world of HTML and colour schemes I always return to one site: colorschemedesigner.com - the site allows you to generate a single colour scheme or several complimentary schemes, adjust for colour blindness and has exports for HTML+CSS, XML, Text, Photoshop (ACO) and GIMP (GPL).