Responsive Web Design with HTML5 and CSS3

12 Sep 13, Kelly N. Wilson

The other day, I came across an interesting read by Ben Frain. Titled ‘Responsive Web Design with HTML5 and CSS3’, it really refreshed me about the various responsive web designing concepts and why we advocate it so frequently.

Responsive Web Design with HTML5 and CSS3

So I decided to refresh your memories too and take you down the responsive lane once again, complete with the what, why and how of RWD

Why go Responsive?

In explaining to our clients why responsive websites are the need of the hour, web designers often have to be reminded themselves of the numerous benefits of a responsive website. Well, let’s put it clear and simple for you:

  1. They save money and time as you don’t have to create separate websites for mobiles and desktops or worry about developing a mobile app.
  2. They are better from an SEO perspective and a single URL links to your website
  3. Wide browser support is now available for responsive websites.
  4. Maintenance of the website is easier as there is a single website to look out for.

Let’s Visit Our Not-So-Old Friend, HTML5

This is the fifth version of the HyperText Markup Language for presenting content on the web. It offers complete support through graphics, multimedia, offline storage, real-time and communication, etc.

And Now a Bit about CSS3

CSS3 is the newest implementation of HTML5 and it supports a responsive layout through special stylesheets. With CSS selectors for background colors, web fonts, text wrappings and columns, CSS helps liven up any website. With CSS3, however, the advantage is that you can do all that and have additional features such as text shadow, round corners, animations, transitions, rotations, and, of course, device detection…which brings us to media queries.

Media Queries – the Core Feature That Brings Out the ‘Responsiveness’

A media query combines a media type and a condition so that a certain web content will appear on different screen sizes depending on the screen resolutions and width.

Check out this example to see what we mean.

A media query such as this…

@media screen and (min-width : 1001px) and (max-width : 1400px) {
	body {
		background-color: red;
	}
}
@media screen and (min-width : 501px) and (max-width : 1000px) {
	body {
		background-color: blue;
	}
}
@media screen and (min-width : 240px) and (max-width : 500px) {
	body {
		background-color: white;
	}
}

Will generate something like this on different screen sizes:

different screen sizes

To sum it All up…

HTML + CSS3 + MEDIA QUERIES + BRILLIANT WEB DESIGN = A MIND BLOWING RESPONSIVE WEBSITE!!

Now Some Useful Tips for Designing a Responsive Website

For starters, design from the smallest to largest screen sizes. Remember to focus on systems rather than the number of pages when doing so. Pay attention to the content and be careful about the typography you use for smaller and larger screens.

Overall, responsive websites provide for a premium user experience for your web visitors. If you get a chance to, do read BenFrain’s book and share your thoughts with me.


Leave a Reply