Responsive Website Design
A responsive website is one that scales and adapts to suit the users’ device size and orientation.
Just like these do.
If you want to make your website mobile-friendly then you need to implement responsive website design techniques to set different stylesheet rules for different sized devices.
The magic happens mainly in the CSS stylesheet where a designer would add different classes to style and layout content in an optimal way for the device’s dimensions.
Common techniques include
- rolling up the main navigation into a hamburger menu
- collapsing long paragraphs of text
- changing column widths
- changing the order that content appears
- serving lower resolution imagery to mobile devices
A mobile-first approach refers to the way in which the CSS stylesheet is written and is a technique aimed at providing a better user experience.
Based on the premise that smaller devices are limited in how much content they can physically display and may well be connected via a wifi/2g/3g/4g metered connection, mobile-first seeks to send out less data to those devices. The larger the device, the more data we can send to it. This is known as ‘progressive enhancement‘.
Developing CSS is a craft and adopting a mobile-first approach is an excellent discipline to take on board.