Initializr: With Great Templates Comes Great Responsivity!

Resize Me - Responsive Web Design Template

Today I’m proud to announce that a “Responsive template” is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors… Making your site work correctly on all these devices is a real nightmare. Well guess what? This nightmare is… absolutely not over! But as least, the boilerplate code of a responsive layout is now here to make your life easier.

Let’s see how it works and what best practices are introduced with this new template.

Little reminder about responsive web design

For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a “responsive” design is.

The concept, introduced by Ethan Marcotte, is pretty simple: the page layout should adapt depending on the screen size so it’s always convenient and easily readable for the user. On mobile for instance, it’s more comfortable to get a minimalistic one-column vertical view than getting a 2 or 3 columns view – which is perfect for desktops. What about tablets? Maybe we can also adapt the layout to fit their medium size screen too? Since we can’t know the screen size of our users’ devices, well it should just work everywhere.

Responsive Web Design Ethan Marcotte

To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries.

A fluid layout with percentage widths

The first thing our page needs is a “fluid” layout. A layout is called fluid when the text adapts its container size and when proportions are preserved when the window is resized. To get this working we can’t have any hard coded static value for widths, horizontal padding nor horizontal margins. We can basically only use percentages:

 
#this-is-a-fluid-container{
	width:50%;
	padding: 20px 10%;
	margin:0 10%;
}

If you strictly follow this approach, your layout will scale perfectly from a small mobile screen to a huge desktop monitor. It’s already pretty cool, but you still have the same layout on every device, which is far from ideal! Don’t worry, now comes the fun part with media-queries to solve this problem.

Mobile-first approach media queries

Media queries are a cool way to specify different styles depending on the device used (by aiming particular screen resolutions or orientations for example). The mobile-first approach is the equivalent of progressive enhancement for media-queries. The principle is to start with the lowest resolution devices and then enhance the experience for bigger screens.

The “mobile” view

Here is the very simple mobile display of the responsive template. It doesn’t take into account any media query yet:

Responsive Layout for Mobile - Smartphone - iPhone

You can see that an aside orange block is located at the bottom of the page:

Bottom of the mobile layout for smartphones

Note: Remember that an aside element is absolutely not meant to just be on the right or the left of an other element. Its semantic definition is that its content should be related to the main content, so its perfectly fine to have it under the article.

The “intermediate” view

If we display this page on a larger device (like a tablet or a wide smartphone), the vertical menu gets a little bit annoying and ugly because its buttons are stretched too much. We can use a media query to display them horizontally for screens larger than 480px like this:

@media only screen and (min-width: 480px) {
   	
	nav a{
		float:left;
		width:27%;
		margin:0 1.7%;
		padding:25px 2%;
		margin-bottom:0;
	}
}

Which has the following result:

Media Queries Tablets iPad

The “wide” view

We now have a more convenient menu for tablets. Awesome! But what if we open this page on a laptop now? They have bigger screens so the vertical one column layout might not be the best fit for these devices. We would rather prefer a 2 columns layout, so we can move the “aside” block and the menu to the right of the page, and keep the content on the left. Let’s use a second media query to do that for resolutions higher than 768px:

@media only screen and (min-width: 768px) {
	
	#title{
		float:left;
	}

	nav{
		float:right;
		width:38%;
	}
 
	#main article{
		float:left;
		width:57%;
	}

	#main aside{
		float:right;
		width:38%;
	}
}

This is what we get on a screen of approximately 900 pixels wide:

960 pixels wide layout

We now have a nice 2-columns “desktop view”. You see, it wasn’t that hard to start from the mobile version first! I admit it might not be intuitive at first, but you get used to it pretty fast, and it’s definitely cleaner.

Note: You may have noticed some new shadows on this one. Fancy CSS3 effects, like shadows, are CPU consuming so they’re not very suitable for mobiles and low-CPU devices in general. This layout will probably be displayed on a more powerful device like a laptop or a desktop, so we can suppose they’re good enough to handle these effects.

The “maximal width” view

Last but not least, we want a decent display on wide screens. If we leave it as it is now and open the page on a wide screen, a 5 line paragraph would be turned into an awful huge single line, which is terrible for readability. We need a maximal width limit to avoid this on wide screens. This limit can be anything: 960px, 1140px, 2000px, whatever, just choose one that make sense for your site.

In our case I picked 1140px, which suits well 1280 pixels wide screens, the most common resolution. An old school wrapper with fixed width and auto margins does the job perfectly:

 
@media only screen and (min-width: 1140px) {
 
	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
		margin:0 auto;
	}
}

I’ve set the wrapper’s width to 1026px (1140px – 10%) because on the previous layouts the margins were set to 10%. Therefore if we resize the browser it will move from one layout to another seamlessly. Here is the widest layout we can get:

Wide screen 1140px static layout

All right! We’re done with media queries!

Christmas presents for nice web developers

Since you’ve been very nice this year, here are some other presents for you!

1st gift: A Live Demo!

There is now a live demo of the responsive template to see if it works as expected before downloading anything. This is also particularly convenient to see how it runs on your mobile or tablet.

You can find it on initializr.com/try.

2nd gift: The Golden Ratio

This responsive template comes with some golden ratio black magic. You may have heard of it, it’s a weird mathematical proportion that our stupid brains are supposed to like. Even if its effects are pretty uncertain, many designers and artists like to use it, hoping people will subconsciously like their work more. I’ve set the proportions of the left and right sections of the desktop view to 62% and 38% (take margins into account) so it always matches the golden ratio as you resize the browser.

Here is also a golden ratio calculator for you to play with, and an interesting tutorial about how to apply it to your layout. Feel free to use this black magic or not, but don’t go crazy with it, this is more myth than science :)

Golden Ratio

3rd gift: Readability For The Win

This new template comes with pretty decent styles for a good readability. Remember that readability is absolutely crucial for your users. It will make them actually read what you have to say instead of just looking at pictures, and if this reading is pleasant they will be more eager to subscribe, retweet, buy your stuff or whatever you want them to do. This is a pretty big deal!

Here is some advice to improve readability:

  • Use a big font size and an adapted line height (this template uses 16px / 24px).
  • A line should have approximately 80 characters (you’re all set with the template).
  • Avoid paragraphs of more than 5 lines.
  • Avoid sections of more than 5 paragraphs in a row.
  • Put stuff between paragraphs when you can and when it makes sense so the reader can breath before he starts a new one (charts, pictures, code, decorations…).

Readability

4th gift: A Github repository for this responsive template

Some of you might have noticed that Initializr’s Github repository is the website’s repository, not the template’s. So it’s pretty useless for you except if you want to know how to generate archives in Java! I’ve created a new Github repo for this responsive template, so you can fork it and suggest modifications and improvements to it. Way more useful, yay!

Here is the new repository: github.com/verekia/initializr-template

Github Logo

Enjoy!

I hope this new responsive template will make your web developer life easier, so you can focus on your actual business instead of setting up again and again the same boilerplate code. I would love to hear your feedback about this, so feel free to open issues on Github or mention @initializr or @verekia on Twitter, I usually reply fast :)

Merry Christmas and Happy New Year!

113 thoughts on “Initializr: With Great Templates Comes Great Responsivity!

  1. I think the guidelines you have provided in this article would surely help most of the people. It has been seen that a web template is a convenient website design which is created to use as a basis for fast and high quality website development. Thanks for sharing such useful information.

    • Yes! I will work on this as soon as possible, probably after holidays.
      I’ll also try to mix nicely the golden ratio with the typographic modular scale.
      But feel free to suggest modifications on Github if you know about this!

      Happy holidays!

  2. Well done. Main menu could also turn into default OS dropdown list menu when in narrowest mode. Default OS menus tend to be compact and extremely usable, as they are native elements – fast and optimized. Current solution will turn ugly if 5 or 7 main menu items are present.

  3. Awesome! Thanks! Have been using a static left sidebar and now thinking to move it to the right and have it “vanish” for smaller devices. Great starting point saving me that most precious of commodities, TIME!

  4. Wow, interesting stuff..
    It is always nice to hear about new web themes that can cater to mobile users..
    Gonna explore this further for our projects.

    Thanks for sharing, Verekia! =)

    • The responsive template is released under the Whatever Web Hippie License a.k.a Public Domain :) Feel free to do whatever you want with the HTML markup and CSS, it’s all yours. However you should be aware that these components have different licenses:

      • jQuery: MIT/GPL license
      • Modernizr: MIT/BSD license
      • Respond.js: MIT/GPL license
    • Indeed, I tempered a little bit that part about the Golden Ratio so people don’t get to excited about it, thank you Keenan :)

  5. Great resources and article, thanks a lot.
    Regarding the weirdo behind what we call Golden Ration, we’re probably hardwired to search for it, since in Nature everything grows up more or less following a Fibonacci sequence and blah blah. You can watch a cosy short about all of this on YouTube, search for “Doodling in Math: Spirals, Fibonacci, and Being a Plant” ;)
    Thanks again for this page // C

  6. it turns out than 768px is still too small for the desktop screen, my ipad 2 switch to it when in landscape mode and it doesn’t handle the big title i’ve set for the desktop correctly.

    Using 800px instead works like a charm …

  7. Really useful, though what if you have more than one article? You could post all the articles and then the aside but then it moves to the bottom of the page. Or you can insert it before or after the first article like it is now and have the other articles beneath it which looks fine in normal view. But on a smaller screen you would have the aside beneath the first article and then the rest. If this was a blog layout you would want the sidebar to be aligned to the top but below the content in mobile view. Any ideas how to align the aside with the top of the article but let it slip underneath all the articles in mobile view?

    • Hi David,
      If you want the aside to be on the right of the desktop view and at the bottom of the articles column on mobile view, you can do this:

      • Put the aside below articles in the HTML markup so it appears below on the mobile view (since we follow the mobile-first approach),
      • Make your articles column floating left and the aside floating right in the desktop media-query.

      That’s all :)

      • When I add 3 or more articles the aside doesn’t show to the right but at the bottom, my articles have float:left and the aside float:right but it still showing at the bottom, if you add two more articles at the sample html you can see that the aside aligns to the right of the last article

        Also is it possible to get fixed position on desktop view or <768px resolution?

        • Are all your articles in a container? And is this container floating left? Also, make sure the aside or the articles don’t use too much width (check borders and paddings too), because if there is even a very little overlap, the aside will go straight to the bottom!

  8. It would be nice if you post the responsive template as .zip file ;) some newbies don’t know how to work with git ;)

  9. When I try out the demo in Internet Explorer 8, the page looks like the mobile version. Only when I switch on compatibility mode, it looks like in the other browsers. Do I have to change a setting in Internet Explorer?

  10. Great piece of work, still flapping about with the menu nav, trying to get more than 3 tabs on the site. Can not see the answer yet on GitHub.

    2012, what year already!!

  11. Very helpful article, using styles to fit content to the device it will display on. But doesn’t it beg a bigger question? Aren’t there times when certain content shouldn’t be displayed at all on a real-estate constrained tool like a mobile phone? Consider a page that contains a picture slide show with lots of tricky scripting,
    http://demo.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/html5-slideshow.html

    Is there a way to do stuff like this on big screens that can display it well, but not even attempt it on tiny devices? Or should we let the tiny devices constrain us everywhere else?

    • Very good question.

      Indeed, any heavy behavior should be avoided on mobile. When it’s possible, we should always use progressive enhancement. For your slideshow for instance, we could probably just display the raw images in a simple column, and enhance this experience on desktops with the rich JavaScript slideshow.

      Of course it takes time to re-think and re-code your page multiple times, that’s why responsive web design is not a perfect universal solution. It is absolutely great for content-oriented websites like blogs, but it gets more tricky for web apps with heavy scripting, because the whole user experience is changed. So we just have to choose wisely depending on our project if it’s worth it or not :)

  12. Hey Jonathan Verrecchia,
    I will make my students read your blog over and over. You have just made the responsive matter a lot more understandable for those just starting. Thanks for you contribution on educating us in the most simple, clear and understandable way. One thing is knowing the matter and another one is been able to explain it and share it properly. You do it all perfectly!
    Thanks a ton!

  13. Nice and simple idea, however it breaks if there are more than 3 menu items and the pixel size specifications don’t seem to pass the smell test. Needs some work to make it great.

  14. Thanks so much Jonathan for your time, creativity, and many contributions you have made, and continue improving web development. Seriously brother you have helped so many like myself with you works. Cheers!

    • Wow… This is the rare kind of comment that really makes you want to continue you know… Thanks Mark, I sincerely appreciate and I will have you in mind as I work on new cool stuff to give to the community. Thanks for your precious support :)

  15. Thank you for including BootStrap!
    I’ve been playing with it for the past few weeks and it’s really amazing how improved my workflow is.
    NOW that I have a solid foundation and framework to start, my new freelance web developer idea will start to flourish!

    I love that you put it on github. It makes contributing and learning all the better!
    Thanks again!

  16. Jonathan, thank you so much for a fantastic, clear and concise article. I’ll let on that I’m 70 years young(!), and still building Web sites after 12 years and still loving it! I think it’s fantastic that you young and tech savvy guys donate your time and effort freely to help others in this way.

    I recently decided, after building a number of sites for mobile that I’ll go the responsive way, as it seems to have a great future. As device power steps up, data cost gets cheaper and network speeds get faster, I see a time not too far away when fully featured responsive sites will be the norm.

  17. A responsive boilerplate was much needed, thanks for explaining it for me. I think its gonna take me a little while to code it from smallest to biggest size but I´ll give it try

  18. This is completely incredible! Can’t wait to initialr my next project, but I am curious about one thing. In the responsive template, is there a reason that the html5 elements like are encased in a div container? This seems to be redundant:

    • The containers like “header-container” are used to have horizontal layers going to the left and right edges of the screen and not just stop at the wrapper’s horizontal max width limit :)

  19. Hi,

    Thank you for this! Beautiful help!

    Is this possible to put the aside column to the top? Just below the header section. For mobile version.

    thank you!

    • Hey!
      Sure, just put it above the main content and make it float on the right for the desktop version, and remove the floating for the mobile, that’s it! :)

  20. Hey, I just finished personalizing this template, I think its outrageous but I think it can use some images. Can someone help with any code for images? Thanks

  21. Thanks, you are right about been living in a cave for the last few months, but it’s getting more and more complicated to keep up with so many different devices. Nice article.

  22. Hi,

    I’ve been browsing for hours (again) trying to find a theme or template for a site I have. I landed on your site somehow, and not sure I understand what this is about. It sounds like I could create my own HTML5/CSS “responsive” themes using your “initializr-template.”

    If so, do you have any video tutorials on how to operate?

    Thank you kindly,

    Andre

    • Hi Andre,
      You can use download initializr-template (and more generally use initializr.com) to generate a basic responsive template.
      Then, starting from this, well… just customize it the way you want, that’s all :)

      If you’re looking for a CMS template (like WordPress) you will have to create your own, which is not difficult but requires PHP experience and learning how to do it. So basically insert stuff like $blogpost_title and stuff like this in the template downloaded from Initializr.

  23. That my friend was an awesome read and certainly food for thought. I spent yesterday talking to a Flash video site designer about converting his sites.
    That was an awesome way to perceive media query and frankly turned it completely upside down for me which makes sense. You’ve got a follower.
    PS I spent thirty years building studio furniture and cabinetry and the golden ratio does in fact take a different direction in the human brain.

  24. Great template, I’ll try to implement responsive template with twitter bootstrap to use with my symfony2 project, effects should be enormouse when I switch from basic 960gs to this one.

  25. Hi, Awesome template and starting point. I’m starting to convert the basic template to work with Joomla CMS. How can I change the height of the top navigation bar as I’m looking to make it deeper. It does not “push” down the rest of the site when I put anything in there higher than it is currently set to. I’ve tried modifying css but getting stuck!

    Please help!
    Thanks!

    Lee

  26. Hi,
    Thanks for your awesome template. I am using wordpress and your template for my project but how do I hide sections that doesn’t require to be display in mobile?

    Thanks :)

  27. awesome template! I am just wondering how i can fix the font readability in IE? it appears to be really thin and unclear… thanks!

  28. I get what you are saying about readability but even this website doesn’t use a base size for font of 16px. Most websites use something smaller than that.

  29. This site and tool are all beautiful. Thank you! I’m also a huge fan of the golden ratio implementation. Very beautiful stuff.

    Business:
    So, what’s the difference between the “Mobile-first Responsive” template and the “Responsive Bootstrap 2.0.4″ one?

    Thanks again.

    • Hi!
      The Mobile-First-Responsive template is a minimalist responsive template and doesn’t use any UI toolkit.
      The Bootstrap one includes Twitter Bootstrap’s markup, CSS and JavaScript.

  30. What if the client asks that the template should have same placements as it appears in desktop. Like here in small screen (mobile view) the menu tabs get under header and similarly we have aside. Can you make these appear same in all screen sizes?

    • Well yes you can, but you probably don’t want that, since it’s not as good in terms of user interface to have super small buttons on mobile compared to full-width buttons.

  31. Thanks a lot for your great Responsive template.I am having number of questions about this template world.I feel your the best guy for resolve my problems.

    Q 1. I have installed HTML5 Boilerplate default template for my ASP.Net MVC project.So then I need to find the template for the my application.I need to have choice to do that.Is there any collection of templates for H5BT ? If it’s there please
    put a link for that.

    Q 2. After installing default template for H5BT then can I use Bootstrap template with my applications ?

    Q 3. I saw lot of buttons, scaffolding and lot of UI components exist with BST but how can I find such a collection with H5BT ? If it’s there plz put that link.

    Q 4. This is related to the Q 3.That is Can I use BST components (buttons, etc ) with H5BT default template ?

    Q 5. Still I am having a chance to choice pre-build template for my app.So which should you suggest for me.Either H5BT or BST ?

    Thanks in advance.

    • 1) There is no official ASP.net template for H5BP, or Twitter Bootstrap (or any other pure Front-End template). Feel free to create one and become ASP developers’s hero!
      2) The overlaps between H5BP and TB are just the CSS file and the default markup. TB itself includes its own default styles, so you should just choose which one you prefer.
      3) There is no components like this in H5BP, just robust, blank, default styles.
      4) Refer to Q2, they don’t really overlap, it’s one or the other.
      5) I don’t really understand this question, it sounds ASP-specific. Can you rephrase?

  32. I have only recently learned about Media Queries but is it not better to have them point to 3 separate CSS files to keep everything easy for the web builder? Is this what some refer to as overkill (using 3 CSS files)?

    One might think (from your tutorial) that you are suggesting putting the Media Queries inline. Or are you?

    • Including multiple CSS files reduces performance because of the additional HTTP requests that are performed for each file.
      You can use a CSS preprocessor like Sass or Less to work with multiple files and organize your code in a clean way, and combine the files together in only 1 final production file.

  33. I definitely join the others and thank you for the hard work you have put into the initializr responsive template. It is a true God-send for the beginning designer and hopefully will help to streamline our mindset in approaching web design. Thank you for your foresight and vision.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>