en en en en en en en en nl en it en en en en en en en en en en en en en en la en it en en en en en en en en en en ar en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en
Create a Responsive Web Design Template
Web Design and Development Online Magazine
Menu - Select Page - Categories Inspiration Sponsored Design Freebies Graphics CSS Deals WPEngine: 20% OFF Elegant Themes: 20% OFF SiteGround: 60% OFF Iconfinder Coupon About Advertise
September 12, 2011 in Tutorials by Harry Atkins
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.
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.
Site Title    Tagline  &  Some clever comment about the company     Home   About   Portfolio   Blog   Contact              Featured Article :   Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.    Continue Reading →              Latest Articles :     Blog 1    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.    Continue Reading →     Blog 2    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.    Continue Reading →     Blog 3    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.    Continue Reading →           Archives       July 2010     August 2010     September 2010         Categories       Articles     Tutorials     Roundups         Social       Facebook     Twitter     RSS     Google+                   About   Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.   Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.           © 2011 - Responsive Website Template
So here is the structure without any styling.
You’ll see in the head tag of the HTML that I’ve included the Droid serif font from the Google Web Fonts API, so let’s set the body general and typography styles.
body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; }
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.
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.
h1 { font-size: 90px; font-family: 'Droid Serif', serif; line-height: 75px; padding: 10px; -webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } h1 a:hover { text-decoration: none; color: #27B3CF; } h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px; -webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } h3 { font-family: 'Droid Serif', serif; font-size: 30px; } h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; } h4 a { text-decoration: underline; } h4 a:hover { text-decoration: none; } nav { background: #222; padding: 0; margin: 10px 0;} nav a { color: #F9F9F9; display: block; float: left; padding: 10px; } nav a:visited { color: #f9f9f9; } nav a:hover { text-decoration: none; background: #27B3CF; } nav a:active { position: relative; top: 0; } .left-col { width: 70%; float: left; } .sidebar { width: 20%; float: right; margin-bottom: 10px; -webkit-transition-property: width; -moz-transition-property: width; transition-property: width; -webkit-transition-duration: 0.5s, 0.5s; -moz-transition-duration: 0.5s, 0.5s; transition-duration: 0.5s, 0.5s; -webkit-transition-timing function: linear, ease-in; -moz-transition-timing function: linear, ease-in; transition-timing function: linear, ease-in; } #featured { padding: 20px; } #latest { padding: 20px; } #about { padding: 20px; } p { padding: 0 5px 0 5px; } ul { list-style: none; } ul li { margin: 0 5px; } footer { padding: 5px; }
So here’s what our page looks like now.
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.
@media screen and (max-width: 478px) { h1 { font-size: 70px; padding: 1px; } h2 { font-size: 13px; padding: 1px; } body { font-size: 13px; } } @media screen and (max-width: 740px) { .left-col { width: 100%; } .sidebar { width: 100%; } } img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Here’s the same site at the smallest browser size possible on iPhone.
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.
Get access to the latest tools, freebies, product announcements, and much more!
Join over 60,000 subscribers!
50% off first month
Iconfinder Coupon Code and Review
Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…
Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…
25% - 61% off
InMotion Hosting Coupon Code
InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…
SiteGround Coupon: 60% OFF
SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.
Onextrapixel is, and always has been an independent body. We strive to share the best web resources for designers, artists, and individuals who are passionate about web design.
Best Landing Page plugins
© 2022 Onextrapixel. Handcrafted in Singapore. All Rights Reserved.