Website design is still a relatively young discipline. When it first started websites were designed primarily using HTML tables with content in cells and rows similar to spreadsheets.
After this, and with the advent of new HTML standards, the <div> element became king.
For such a young industry there have been countless changes. None, however, has changed web design more than the advent of mobile devices.
In 2007 Steve Jobs took to the stage at the MacWorld conference and announced the iPhone. It provided a touch interface, a real web browser and rid the mobile industry of clunky phones with poor design. It used touch, icons and would (eventually) allow apps to be developed for it.
At the time of the iPhone launch the web browsing experience was still not quite right. Websites designed in older HTML had to be pinched and zoomed in and out of to view content. It was far from ideal.
In 2010 an article from Ethan Marcotte (still available at on the alistapart website) introduced all but the most cutting edge designer to the concept of a media query and the viewport meta tag.
The viewport meta tag was introduced along with the HTML5 specification. This tag gave the web browser instructions on how to control a web pages dimensions and zooming / scaling. Without a viewport tag a website had to be zoomed, pinched and scrolled to view. With the viewport tag new layouts became possible.
A typical viewport meta tag looks like the following:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0"/>
This tag basically tells the browser to set the page width to the width of the device and sets the initial zoom level to 100%.
The media query, available as part of an update to the CSS specification, uses attributes of the viewing device to target specific CSS styles to those devices. Typically media queries can be used to target many things including:
- width and height of the viewport
- width and height of the device
- orientation of the device
- resolution
- screen or printed document
For example the following media query means apply the styles contained within the curly brackets only to screens and where the browser window maximum width is 992 pixels.
@media screen and (max-width:992px) {}
Usage of viewport tags and @media rules means that the developer has control over how their website displays on Laptops, Desktops, Mobiles or Tablets.
CSS frameworks such as Bootstrap and Tailwind grew up to ease the extra code necessary to target devices and change layouts to use responsive mobile design. As such designing mobile responsive websites does not have to be any more complicated than non-responsive with, for example, tailwind able to target classes at different screen sizes by simply prefixing them with a size identifier – for example lg:p-4 means to pad by a certain amount only on a larger device.
In 2019 an important change was announced by Google that has ensured the necessity for responsive design.
In a well publicised update in 2019 Google announced they had changed how they indexed websites. They announced they would use a mobile version of their GoogleBot website crawler going forward. This would visit websites as if it were a mobile device and as such any website would need to ensure it worked correctly on mobile if it wished to continue to rank well.
A huge amount of effort is now spent by developers and digital marketers in ensuring website display correctly on mobile devices. Mobile speed, layouts and metrics are measured using apps such as Google Lighthouse and Google Mobile-Friendly Test App to ensure compliance and boost performance.
Responsive design has come a long way in the 12 years since it first became mainstream. Its never been so important to get it right.
Signalfire uses the Tailwind CSS layout framework to create responsive websites and ecommerce stores.