{"id":22591,"date":"2020-07-09T14:43:17","date_gmt":"2020-07-09T14:43:17","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=22591"},"modified":"2020-07-09T14:43:17","modified_gmt":"2020-07-09T14:43:17","slug":"beyond-screen-sizes-responsive-design-in-2020","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/beyond-screen-sizes-responsive-design-in-2020\/","title":{"rendered":"Beyond screen sizes: responsive design in 2020"},"content":{"rendered":"

By Kilian Valkhof<\/strong><\/p>\n

Responsive design was introduced more than 10 years ago. In fact, Ethan Marcotte\u2019s <\/span>seminal article<\/span><\/a> turned 10 on 25 May. Here’s how I would describe responsive design:<\/span><\/p>\n

The way a website adapts to different screen sizes by reflowing and repositioning content as the available space allows.<\/span><\/i><\/p>\n

We do this by using media queries and flexibly sized elements using relative, minimum and maximum sizes. In recent years, this has gotten easier with the introduction of the <\/span>Flexbox<\/span><\/a> and <\/span>Grid<\/span><\/a> layout modes, which have been developed with responsive design in mind.\u00a0<\/span><\/p>\n

Before responsive design, we already had a way to develop websites for smaller devices. Back in 2008 I wrote an article for a Dutch web development site on handheld stylesheets. These used the now deprecated “handheld” media type and were supported by mobile browsers back then, like Opera Mini and Internet Explorer Mobile. <\/span><\/p>\n

However, overall support for these handheld stylesheets, and what you could do with them, was pretty terrible. I ended my article with a glimmer of hope. Soon we would be able to use a thing called “media queries”, which would allow us to respond to device widths, heights and <\/span>number of colours<\/span><\/i>. Somehow that seemed important to mention back then.\u00a0<\/span><\/p>\n

The best news was that Opera 9 and Safari 3 already supported it. We didn’t realise it back then, but the mobile internet and media queries were here to stay.<\/span><\/p>\n

We’re now more than a decade in, and of course support for media queries is terrific:<\/span><\/p>\n

\"\"<\/p>\n

Support for media queries<\/span><\/i><\/a> according to caniuse.com.<\/span><\/i><\/p>\n

I also think we have a solid, shared understanding of what constitutes good responsive design. Here’s how I would describe it. (If you disagree, <\/span>find me on Twitter<\/span><\/a>.)<\/span><\/p>\n

Responsive design means\u2026\u00a0<\/span><\/p>\n