Responsive web design means making your customers happy, which means responsive web developers do the same!
If you’ve got a responsive web design in place, your users will be able to easily navigate your site whatever device they’re browsing on.
But what are the specifics? What do responsive web developers actually do?
Well, let’s take a look.
As with all programming technology, responsive web design has thousands of variables. Fortunately, we won’t have to go through them all to illustrate the point!
In fact, responsive design can be broken down into three main factors:
- Flexible layouts/grids
- Media queries
- Flexible images
If you can understand these three things, you’re well on your way to understanding what responsive web developers actually spend time on.
Let’s drill down into all three:
Flexible layouts and grids
In the pre-responsive days, websites would be a set number of pixels across and centered on the page. Back when there was only one kind of computer screen, this didn’t matter: the only difference would be monitor size.
Liquid layouts became essential when smartphones – and Apple’s original iPhone in particular – started coming out with web browsers you could actually use.
(In the early days, web browsing for mobiles was available, but no-one actually wanted to use it!)
So, fluid grids became necessary. Responsive design grids are designed in terms of proportions, rather than pixels. So, when the website’s layout is squished onto a mobile screen, the elements contained within the design – pictures, text, etc – will resize themselves BUT hold the same proportion to each other.
In theory, you’re left with a website that’s the same, but small enough to fit the user’s device.
There’s a problem with the grid systems, however: some site designs – even those that are proportioned carefully – are simply too big.
Sure, they’ll fit on a smartphone screen, but you won’t actually be able to read them – the content will be tiny!
It’s for this reason that we need the next principle of responsive design: media queries.
Media Queries
Media queries relate to CSS coding.
CSS – or Cascading Style Sheets – are the programming language of design.
Though similar to traditional HTML, CSS differs in that it allows one design to be sent across the whole site.
(Pre-CSS, you’d have to go through and make changes to every page on the site to guarantee consistency!)
With CSS, you can make a change to the menu bar – for example – and it’ll instantly be applied to every page. One change, the whole site.
(For a great beginner’s guide to CSS, head to Mashable).
But, how does this relate to responsive design?
Simple:
By applying specific code to the site’s CSS, you allow it to gather data on the user: specifically, their device.
So, when the user loads up your website, it’ll automatically detect how big their screen is.
Here’s the clever part:
When done right, it’ll also re-size itself accordingly.
Yes, your responsive design will take the information gathered from the media queries and pick a layout that suits the user, leading to a more enjoyable browsing experience.
So, if you’re viewing the page on an iPhone, your website will note that the pixel width is below the ‘minimum’ for the full website and will load the mobile layout.
(Needless to say, you set the parameters).
Now, it goes without saying that a boatload of work goes into this part of development: in an ideal world, you’ll create a layout to suit every screen: and there are a LOT of different screens!
Media queries allow your website to detect the screen it’s being viewed on and to detect itself accordingly.
Mac or mobile, your design will always look great
Flexible images
Web design is a visual medium.
Though text – good copywriting in particular – is a key part of getting the response you want from users, you can’t do it without good imagery.
But how can you get an image – which is usually a set size – to respond to your changing design size? After all, images aren’t naturally fluid.
There are a few options available:
Simple fluid images. This code will display the image in its natural dimension as long as there’s room to do so. The image will still scale to fit, but will hold its shape.
This works well when you have one ‘hero’ image – that is, a main picture that’s designed to grab the attention. However, for body images there’s another option…
Measuring the image as a percentage of the page.
So, if you have an image with a natural width of 500 pixels and the website is 100 pixels wide, you can set the image to always take up 50% of the page’s width. This way, the image always remains in scale with the rest of the page.
When doing this, it’s also possible to give the image a maximum or minimum width – upper and lower limits – to prevent it from looking too big on the smallest screens.
The other option – which applies when several images are grouped together – is to change the spacing between the images so that they align with the adjacent text. So, as the text changes size, the images still align but without being altered themselves. (There’s a great tutorial on this here).
Now, we’ve simplified this somewhat.
Responsive design can be a very complex process, and doing it wrong can have serious consequences: you can lose thousands of customers to a poor layout!
At Iconic Solutions, we’re specialists in responsive web design and pride ourselves on helping our customers make money.
If you want your website to create leads or make sales while you sleep, give us a call today.
