What are responsive websites?

Websites for all screen sizes

Is your website fully responsive?

Why do some websites display poorly on mobile phones?

What is a responsive website?

What are responsive websites?

What is a responsive website?

Responsive websites have been around for over a decade, and we use them every day, probably without realising it. But what if, when you picked your phone up and opened up websites to find that they're squeezed up like this?

default

We have to agree that it's unusable unless you zoom in so that the text is legible and you’re able to hit one navigation button instead of three at once. But you then have to scroll sideways to read anything!

Before we go any further, if you're wondering why it's so important to have a mobile friendly website, I have written a separate article on the subject, which I think you'll find useful.

[Back to top]


Should we design websites specifically for mobile phones?

It is possible to design a website specifically to display correctly on a mobile phone, but if you were to view that same website on a laptop, the display would look pretty poor. The text would look huge, and images would look pixelated.

So here’s an idea... let’s build two versions!

But then we would need to make sure that people on mobile phones don’t accidentally go to the version designed for laptops and desktops, and people using their laptops don’t accidentally go to the version designed for mobile phones.

And another thing... do we really want to have two websites to maintain?

Thankfully there is a better solution.

I had been designing websites for more than 10 years before this new web design concept appeared on the scene, which allowed a website to transform itself based on the screensize. This method of display became known as responsive design

[Back to top]


Screen Size and Orientation

In hindsight many things sound obvious, but provided there was a way that the website could detect the width of the screen of the device it was being viewed on (phone, laptop, tablet, desktop monitor, etc), we as web designers could determine in advance how things should display.

And given that since 2010 and the introduction of the iPad, the use of tablets became widespread, and these could be used in both portrait and landscape orientation. So if we could detect orientation as well, that we be even better.

Fast forward to today...

[Back to top]


Screen Size Variations

Mobile phone screen widths can be as small as 320 pixels, and it’s not unusual to find desktop monitors which have widths in excess of 2000 pixels.

Differentiating between those two extremes with two layout versions is achievable, but with laptop screen widths typically ranging from 1024 to 1440 pixel, and tablets ranging from about 720 to 1024 pixels depending on the model and whether the user has it in portrait or landscape orientation, we need to accept that two layout versions (one for phones and the other for laptops) is unlikely to be sufficient in many cases.

Screen Size Variations

So how to we determine at what point (or points) one page layout should switch to another layout? Breakpoints, that's how.

[Back to top]


What are Breakpoints?

We obviously can’t build an infinite number of layout variations, so it makes sense to determine where we should set breakpoints ... suitable points at which we could determine when a change in the page layout needs to occur based on screen width.

In between those breakpoints we could allow some flexibility in the page, where images, content placeholders, etc., could scale to shrink or expanding to fit the page design in a controlled way.

And even whilst allowing things to shrink or expand within the breakpoints, we could set maximum and minimum widths for elements such as images, content placeholders, columns, etc. This way a pretty good degree of control could be maintained on how the page displays, and all of this is happening people are viewing the same website on different devices.

[Back to top]


How many breakpoints should a website have?

The number of breakpoints a website should have would depend on the nature of the website. If the page simply contains nothing but text which is intended to fit the entire width of the page, there might not be much to gain from setting up several breakpoints.

But if the page contains images and other visual elements including boxes with content, etc., size would be one consideration, but so might the positioning of some elements relative to other elements… above, below, side by side, etc., and it might also be important to prevent some things from displaying at all in some cases.

All of these design considerations can be worked out and discussed before any coding begins or page creation begins, but there is also one common reason where so many websites are let down by a lack of planning, attention to detail, cost cutting, or just a general lack of awareness... poor use of web images.

Responsive Websites: Speed


Other Web Design Posts


Daron Harvey, motor racing fan and owner of Targa Web Services

About the author: Having begun building websites back in 1996, Daron Harvey has been professionally involved in website design, UX and eCommerce best practices for over 26 years, including product management and maintaining multi-lingual websites largest global corporations. During the global pandemic, Daron left the corporate world behind and founded Targa, specialising in Website Design, User Experience (UX/UI) and Search Engine Optimisation (SEO).
    

What are responsive websites? What are responsive websites?