Way back in December 2012, Mashable declared 2013 the “Year of Responsive Web Design”. Even before that, responsive web design was a buzzy concept, and especially since then it’s become practically ubiquitous.
If you haven’t built a new website recently, or ever, you might not be aware of what a responsive website is, why you’d want one, and how you can make yours. Let’s take a look.
What are responsive websites?
You may have wondered: why is does the same website looks different on my smartphone than on my computer? It’s no accident. It’s been designed that way.
The same website can look different on different devices because it’s been designed using responsive design.
So what is a responsive website and what is responsive design?
If you’re not in the world of website design, you might not be familiar with this terminology, even as it’s shipped from trend to best practice.
Essentially, responsive websites are websites that take into account the context in which you’re viewing them. Specifically, that usually means what device you’re viewing a website on.
But the thing that responsive websites respond to is not actually the browser or device type, but the window size.
The first website that changed depending on window size was actually audi.com in 2001. The idea was so novel at that point, that in Netscape Navigator, the page actually had to reload every time you changed the window size.
Things have evolved a bit since then, to say the least.
Today, responsive design utilizes CSS (Cascading Style Sheets, the files where all the styling of your webpages are stored) to create different layouts, image sizes, and menus for differently sized windows.
Why should you use responsive design?
If it’s not obvious already, you should aim to make your website responsive so that whether people visit your website on their phones, tablets, or computers, their experience is still optimal.
2014 was the first year in which more web traffic came from mobile devices than from desktop computers, and today, users spend 59% of their time on mobile devices.
Clearly, the days of designing a desktop-only website are over.
But at the same time, they also spend 41% of their time on desktop, so while mobile usage is growing, desktop still cannot be ignored.
What about mDot?
Sometimes, you’ll notice that a webpage loads as “m.example.com” when you view it on your mobile browser and “www.example.com” when you view it on your desktop. Is that responsive design?
No, not exactly. In this case, the user’s experience is being considered across multiple devices, but really what’s happening here is that the website owner has created two separate websites—one for mobile and one for desktop.
One website is on the subdomain “m” and the other is on the subdomain “www” (or it might be on the bare domain).
The advantage to this is that you can truly customize the mobile experience in ways you can’t with responsive design using CSS tricks. You might want to emphasize completely different elements of your website for mobile users, or you might for marketing reasons want mobile users to enter a separate sales funnel.
The downside is that your web traffic essentially gets broken up to two different webpages. Whatever SEO benefits may result from mobile users landing on m.example.com won’t translate over to www.example.com.
How do you make a responsive website?
This is going to depend on how you want to build your website and how ambitious you are and can afford to be with learning new skills.
“Built-in” responsive design in a website builder
Website builders where you can design your website online usually have responsive design “built in” to the design tool. Oftentimes you can view how your website will look on a mobile device during the design process by toggling between the desktop and mobile versions.
This is the easiest way to incorporate responsive design since, really, it all comes pre-coded and pre-packaged for you.
Using a responsive theme in your CMS
If you want to use a CMS such as WordPress to create your website, and you might want to for reasons unrelated to whether or not it’s responsive, you can choose a theme for your website that incorporates responsive design.
Similar to having it “built-in” like with a website builder tool, the responsiveness of the website comes pre-packaged with the theme.
⚠️ The following section delves into writing basic HTML code ⚠️
Incorporate responsive design in your website’s code
However, if you need to customize your website’s theme on your CMS, or you’re making your own website theme, you might need to know some of the elements of responsive design.
Of course, we won’t be able to cover comprehensively the design considerations, but we can provide you the basic tools you’ll need.
Viewport
The “viewport” is the area of a webpage that a user can view. Before responsive design became a thing, webpages that were designed for the relatively wide screen of a desktop computer would be squished into the narrow “viewport” of mobile screens.
This obviously had less than ideal results.
Eventually, the means to set the viewport to the equivalent of the device itself was introduced into HTML. Specifically, this is done with <meta> tags in the HTML header.
This is what this <meta> tag looks like:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Images
If an image extends beyond the viewport, though (if it’s wider than the screen it’s being viewed on), then users will have to scroll left and right in addition to up and down, which is usually not desirable.
To fix this, you can style images with different width properties.
One way is to use relative width, where images take up a certain percentage of the screen, or the element that they’re in. It looks like this:
<img src="image.jpg" style="width:100%;">
You can also set a maximum width, which means an image will never grow larger than the maximum width you set, but will scale down on smaller screens.
It looks like this:
<img src="image.jpg" style="max-width:100%;height:auto;">
Text
You can also re-size text based on the screen size. Usually text size is measured in ‘pt’ but you can also measure it in ‘vw’ for “viewport width.” This lets you set text size relative to the size of the screen it’s being viewed on.
Media queries
Media queries are a responsive design technique used in CSS. They let you set “break points,” which allow your website style and layout to be one on a certain size screen and another way on another size screen. The “breakpoint” is the width at which it changes.
You can design based on mobile devices and use your media query to set a special condition for when the screen is a certain width or wider:
@media only screen and (min-width: 600px) {
...
}
or the inverse:
@media only screen and (max-width: 600px) {
...
}
You can use this as a condition that can control virtually anything. It wouldn’t do anything to help the user experience, but you could use this to make text color change from blue to red at a certain screen width. We’ll leave it to you to figure out how you can use this creatively to your benefit.
In any case, websites that respond to the size of the device you view them on are essential for any serious website.
While you might need a pre-packaged option like those found in CMS themes or website builders, we also hope that you have time to get your hands dirty trying out some of these CSS and HTML responsive design elements. There’s no better way to learn than to try.
Tagged in Nom de domaineSimple Hosting
