Create a Responsive Web Design Template

The web is buzzing with responsive web designs right now. To have a single site that will change its styling accordingly to fit to the device it's being viewed on. In this tutorial, I'm going to make a (very simple looking) web template that is responsive from desktop size down to mobile version.

HTML Structure

I'm writing this example in HTML5, so we can use the new semantic elements like header, footer, etc. I recommend putting the HTML5 shiv in there for IE, and using a reset.css file to start off from a nice blank sheet.

So we start out by making a page wrapping div, a header section with titles, tagline and navigation. A main content section with a featured article section, some recent blogs, a sidebar, an about section and finally a footer. Nothing really special here, just setting up the page structure with some useful CSS class names for later.

Now we'll style the #wrapper div, we'll give it a fluid width of 90% for when we resize the browser window, and a max-width for when viewing the site on a desktop machine.

Main Styling

Now for the rest of the styling, it's basically just to make the test page look presentable. In the middle section we have a 2 column layout, and remember, any widths have to have percentage values to stay fluid. Now you'll see some CSS Transitions in there, they won't do anything until we stick our media queries in there, which we'll do right now.

Media Queries

We'll link the HTML file to another CSS file which we'll name media-queries.css where we'll target specific browser window sizes and change the font size of the h1 title, the h2 tagline, the overall body copy size, and finally change the 2 column design down to a one column one.

iPhone View

Conclusion

Now because of the CSS transitions that we added to the CSS file, the title, tagline and body copy will animation their font size so the page doesn't jump, and the sidebar will animate to it's position and not jump as well.

So that's about it, please do comment, maybe say how I could better the code or method. I'm not saying this is the best way to make a responsive web template, just that this is how I'd do it. Feel free to download and better or modify, or just use as a starting point for one of your projects.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.