To continue on the same page as my last post I’ll be looking at several different tip and pointers I have learned when designing for a mobile first experience, something I’m trying to incorporate more into my workflow.
The whole ideology behind mobile first is basically the idea of progressive enhancement. A mobile first approach allows the designer to decide what elements are essential to the goals and functionality of the site then build or progressively enhance the experience from there.
Like any good Design project start with a grid. While a lot of designers (including me) would usually start with a desktop layout and multiple columns a mobile first approach encourages you to start with 1 or maybe 2 columns and build from there.
I guess from a content and wire-framing perspective this approach has allowed me to think more clearly about what content I need to prioritise and what content is less relevant to the user experience, delivering a better core experience overall.
Anyway I thought I’d list a few interesting pointers and bit of advice if stumbled upon over the last while:
One of the most important things concerning a sites visual appeal but also affecting performance time is images. With a fragmented landscape of multiple devices and screen sizes it has become important to tailor your images to whatever screen size your user is viewing the site on. The introduction of srcset allows designer to quickly define what images should be served up at different resolutions. eg.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
Therefore maximizing image quality and download speeds at the same time. A better and more thorough description can be found here
I know myself it was hard to get into the principals of designing responsively and thinking about grid systems etc before diving into the features. So for a really clean and direct approach to grid systems use this. For an more in depth explanation of modern responsive development techniques look to google!
Finally for text based considerations I found this article to be really helpful. It really clearly explains the difference between px, ems and rems and what the advantages are.
theoneandonlynaoise 