Newsletter #163 Responsive Changes Everything

Posted on Oct 15, 2019, 8:29 PM

Responsive design is building one Website that serves all screen sizes - the site will respond to your device by rendering it a way that suits. Generally the site content stays the same although functionality will often be increased as the screen sizes gets bigger.

Last year we talked about Building Your Mobile Version First - this year it is actually part of our design process. Unless you are thinking about how your Website design translates to mobile, you're not designing for the modern user.

Already we are seeing designers' responses to the challenge and opportunities of responsive design. Large format imagery and video that fill the whole screen are now common as are long pages that mean the users have to scroll whatever the device. Check out PayPal and Flickerplate as examples.

Designing for mobile forces you to think about what really matters:

  • Why are people going to visit this Website?
  • When they visit what do you want them to see?
  • Why do you need that? If it's not central to the previous two questions, then take it out.
  • What do you want them to do?
  • How does all the above change when you change device?

When you are planning the flow should be the same across all screen sizes but there may be specific things you want for a particular type of device. This is common with mobiles that might want things like a 'Call Us' button or an easy way to use the mobile's mapping app to find an address.
 

Why Run 50 Mountain Marathons in 50 Days?
 
Why indeed. On 7th February 2015 Kiwi Mal Law will attempt this feat throughout New Zealand in order to raise $250,000+ for the Mental Health Foundation. I will be joining Mal on days 12 and 13 of his challenge deep in the South Island. Want to know more about this incredible challenge? If you would like to donate to this worthy cause.


Other things designers and you need to be aware of:

  • Don't use too much text and use typography to distinguish between text blocks. Always be aware that screen sizes are getting bigger (we've seen 4000px on sale) and that there may be other screen size variants in the future.
  • As part of the planning process you should develop basic wire frames for mobile, tablet and desktop.
  • Scaling considerations. Larger heading text doesn't necessarily scale well. You may need to generate different size images and think about how icons look across all devices.
  • Simple, clean sites are the way of responsive design. Matte colours are best without gradients across button or other image surfaces, sharpness and contrast rather than vignettes and shadows.
  • Complex image elements simply don't scale well - for example how does that complicated header scale when you go from a wide screen desktop to iPad?
  • Flat designs can be good, tiles often work well and there is a trend to using more than two or three colours which used to be the norm. You can also use fewer colours but change the colour tone.
  • Declutter and bear in mind that users are used to scrolling, particularly on tablets and mobile devices.

It is not good enough to design with desktop in mind just because that's what everyone is used to - your design is obsolete already. If you want your site to be more than a brochure then not building a responsive site means you'll be rebuilding again within two years.

Responsive design has changed everything.



Best wishes

Alex Garden

Posted 5 years ago 3 Minute(s) to read