What on earth is that?

Responsive Web Design is where the very good web designer aims to make every web page look great on all kinds of devices - ie mobile phones, laptops, desktops, PCS, even watches ...

... and every posible web browser.

Web Browsers

This is, in fact, impossible. There are simply too many web browsers that have been used over the years, so we stick to the newer and major ones (not including Internet Exporer). Those being Google Chrome, Microsoft Edge (er, based on Google Chrome), Firefox, Safari, Opera, UC Browser, Samsung Internet and some others.

There is also an exceedingly long history of old and new, weird and wonderful browsers on a range of devices including games consoles, ebook readers and smart TVs.

Screen Size

So, the major thing we have to do is to make a web page look good on a huge screen (landscape) and a mobile screen (portrait).

How to do this then?

There is a feature in web coding called media queries. These detect what the screen size is and can be used to display things differently depending on the size. For a mobile phone, which is typically portrait, the main sections of the site can be shown vertically - ie one section wide and lots of scrolling up and down. For the same website on a wide screen, the sections can be shown across the screen.

When Twitter was Good

To make this easier for web designers, back in the good old days of Twitter (2011) they invented a grid system called Bootstrap (still in use today, at version 5). This divided a page into 12 columns.

12 is a Highly Composite Number because it can be divided into 2, 3, 4 and 6. So a web page on a desktop computer may have 3 main sections, each 4 columns wide (adding up to 12). On a mobile, we can set those columns to 12 (full width) each, and you'd scroll down to see them. Many other combinations for parts of a website are possible. See Lilac Pixel Websites  as an example on your phone and on a desktop computer.

Images

The other main thing to consider is images. There is a technique (called Source Sets) which allows the web browser to pick an image that will load the best on whatever device it is on. So for a small screen, we will only need a small image, which loads faster. The web server will have a few images of different sizes to offer.

The other trendy thing to do with images is to cleverly crop them depending on the screen size, so you will get the full image on a desktop and a cropped one (showing the main content, ideally!) on a mobile. This is called Art Direction. We can also optimise images so that they only load when the user scrolls to them.

Browsers

In the past, we tended to see if we could detect what web browser is being used to show our site, then design the page accordingly. We no longer need to do this, but we want the site to be functional in all modern browsers.

That means using relative units for things like font sizes, column widths, etc, rather than fixed values (ie 16pt). And having buttons that are at least 44x44px for mobiles (even if that looks a bit big). We can also detect what individual features are available in a web browser to provide enhanced visuals for browsers that support them while maintaining a fallback for others.

So that is what we mean by responsive web design!

If you have any questions about this, then feel free to contact us below.

 

Contact Us

andyc@lilacpixel.com | 07549 011 321 | WhatsApp

Or fill in the form and we will be in touch.