iAllenkelhet er firmabloggen til Netlife Research. Vi lager slanke, lettstelte og effektive interaktive løsninger som gjør at du oppnår dine mål og får fornøyde brukere.
While designing a portal for finding and comparing dentists’ prices across Norway (to be launched later this year), @schjonhaug and I decided to dive fully into a mobile first approach. We designed the site for mobile screen sizes, and then gradually made it into a fully fledged responsive site through several iterations, user testing along the way.
Here’s some of what we learned during this process:
Given that mobile content is largely structured in a linear way due to the relatively small width of a handset screen, we quickly sketched out rough page concepts, with each unit of content stacked on top of each other.
One of the main benefits of designing mobile first is forced prioritisation of content. While this is potentially obvious, it cannot be overstated. Sidebars for stuffing extraneous fluff became a thing of the past. Anything that did not aid the user to achieve their main goal could be either left out altogether, or placed further down on the page, if absolutely necessary.
This prioritisation early on helps retain focus when designing for larger screen sizes later on, but can also lead to some tricky situations, as can be seen in point #2…
As the content had been cut to the bone for the mobile experience, there wasn’t much content left to “spread” to fill the larger screens, but we didn’t want to resort to reintroducing content we had already managed to strip away.
The main task of the site, to find a dentist, on mobile screens, consists of either searching directly by location, or navigating through a few simple pages of place lists (region > commune > neighbourhoods > top results). This process of page by page navigation was so stripped down that it was decided the entire process could be take place in one page on tablet sizes and up.
By introducing a map, focusing on this, searching and displaying the results dynamically, we were able to use the space in a more efficient way and consolidate multiple mobile pages into one on larger screens.
One unexpected benefit of designing for a mobile screen first was link styling. Traditionally, designing a desktop-sized website could potentially lead to small links which, while browsing with a mouse might work fine, but prove to be problematic with an inaccurate finger for tapping on a small screen.
This situation was reversed in our case, as all links had a large tap area and solid colour-blocked hover state, which worked as an active tap state on mobile. On larger screens, we found this translated really well to mouse hover, without having to do any extra work. The other way round, at least in our case, would have certainly involved more effort.
In order to maximise space usage on mobile screens, we decided to hide the top level navigation, consisting of five items, in a “menu toggle button”. The full, expanded navigation was also included in the footer of the page.
This approach is clearly not new, but we found all the same that in user tests, some would see and use the top menu button, but those who didn’t would scroll to the bottom in any case and find the footer navigation. No one was ever lost, but it was certainly key to include the full expanded footer menu.
It’s easy to get carried away in this all-mobile first approach. We went straight from sketching out wireframes into HTML prototyping, with CSS catering solely for the mobile experience. Only after having fleshed out the site into a working application, did we begin to sketch out the transition to larger screen sizes.
Aside from some general thoughts, this was the first time in the process we concretely worked out how the site could adapt to larger sizes. In hindsight, this phase could have been smoother if we had planned some designs for larger screens right after the initial mobile sketches, before the HTML prototyping.
What lessons have you learned, designing mobile first?
1. mai skifter jeg beite og begynner å jobbe med innholdsstrategi for Helsedirektoratet. Hvorfor i all verden gjør jeg det? Jeg har jobbet i Netlife Research i over fem år. Og – med hånden på hjertet – jeg har aldri trivdes bedre. Å jobbe i et knallsterkt fagmiljø og stadig få nye utfordringer å løse, [...]
Jag är ganska nyanställd på Netlife Research. Flyttade från Sverige efter årsskiftet. Trots att jag är ganska nyanställd så jag har jobbat med design och internet i sisådär 15 år nu, det beror lite på hur man räknar. Under dessa 15 år har processen alltid fascinerat mig. Eller snarare bristen på en bra sådan. Tills [...]
Atle Lillehovde, 29.05.2012 7:50 am
Can’t wait to see the site live, it looks very promising. It’s a type of site that demands mobile first, I think. Are you doing any fancy geolocation-stuff? Would also like to know more about the transition to tablet and desktop, how wide is the content, did you “fill” the screen with larger text, graphics/icons that are not shown on mobile?
Will, 29.05.2012 7:12 pm
Hi Atle, thanks for the interest!
In terms of the transition to tablet and desktop, the site sizes up from a min-width of 320 up to 1140px, with 2 “major” and one “minor” breakpoint along the way (for small text-size changes), and is fluid inbetween.
We used SASS to calculate the css width percentages. This allowed us to declare a few pixel value variables for different column widths and re-use these calculated percentages throughout the code (and easily change them site-wide if it wasn’t working).
As for “filling” the screen on larger sizes, actually the text size didn’t change that much – mainly just in the navigation. We added some icons when the screen gets larger, but the design is largely type-driven. The main difference on the tablet/desktop version is the addition of a large map, and therefore a different way of navigating.
Geolocation is a feature that is unlikely to make it for V.1. unfortunately.
Pingback: → Touch-friendly top tasks | J. Boye Aarhus 12
http://tinyurl.com/clercross46031, 27.01.2013 5:23 am
“5 lessons learned from a mobile first, responsive design process.
— iAllenkelhet” really enables myself contemplate a little bit extra.
I loved every individual section of this post. Thanks ,Evan
at Yahoo, 01.02.2013 1:24 am
Right here is the right webpage for anybody who really wants to understand this topic.
You realize so much its almost hard to argue with you
(not that I actually would want to…HaHa). You definitely put a fresh spin on a topic
that has been discussed for ages. Great stuff,
just excellent!