What should we know while creating responsive layout?

First of all, if we aim at website compatibility with mobile devices with small screen size, we have to make sure that these devices don’t scale the layout to fit the screen, which means it will become tiny and barely discernable. This is achieved by forcing the device browser into displaying the site in the original size with the following piece of HTML metatag code placed between the <head> </head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Since imagery is normally an inherent feature of almost any website on the Web, its ability to adapt to varying screen sizes is very important. There’re two main techniques to achieve this in responsive design: either by dynamic scaling or by context aware image placing. The latter means that for each type of screen size a different version of the image file is loaded.

method 1:

CSS code

.content img{

max-width:100%;

}

method 2:

HTML code

<img src="picture.gif" data-src-800px="image-800px.gif" data-src-400px="image-400px.jgif" alt="">

CSS code

@media (min-device-width:800px) { img[data-src-800px] {
content: attr(data-src-800px, url);
}
}

@media (min-device-width:400px) { img[data-src-400px] {
content: attr(data-src-400px, url);
}
}

Since modern designs feature background images a lot, it’s important that they’re properly rendered on different viewing devices as well. To achieve full coverage of the screen by the background image the following CSS code can be used:

html {

background: url(bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Here ‘cover’ is the keyword from CSS3 specification which commands that background image is scaled proportionally covering the entire browser window.

Another integral part of website design is typography – it also needs to adapt to the screen size of the device it’s being viewed on. There’re two main aspects of responsive typography: the typeface size and the line length. The basic trick is not to define font size in pixels, since this value is static. Instead of this ‘em’ or ‘rem’ units are used, which allow inheritance of the value from the parent object, either body (in em’s case) or HTML element (in rem’s case). The values are set in fractions of the reference value related to it, which is necessary for dynamic scaling.

We start by setting the reference to HTML element with this CSS line:

html { font-size:100%; }

Then using media query, we define a series of font size values according to different screen sizes:

@media (max-width: 640px) { body {font-size:1.2rem;} }

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

Now in order to maintain the optimal length of the line for each screen size, we need to preview the way our chosen typeface is displayed (under different screen dimensions) and decide what content container width would be best for each iteration of the design. After having decided this factor, we add the container width value to each of the above media queries, for example:

@media (min-width:960px) { body {font-size:1.2rem;} { .container {width:675px;} }

Another strategy in designing responsive typography is the use of different typefaces on screens of different sizes. That means in our media queries we can create associations of specific fonts with the specific screen sizes, much like in case of context aware image placement method we’ve mentioned above. The following example shows how different typefaces are introduced to different heading iterations:

@media (min-width:1100px) { h1 {font-family:"Arial", script;} }

@media (max-width:1100px) { h1 {font-family:”Times New Roman”, serif;} }
Mastering these techniques takes some time and practice. But this doesn’t mean that until you become skillful in applying them, you must live without a personal responsive website. Just get yourself a responsive template for the period of honing your coding skills. Once your degree of responsive design mastery is sufficient enough, you’ll be able to modify this template on a much more profound level and with a much greater awareness than the average user who is usually only able to change out text and images. Now take a look at some selected templates’ samples below:

 Clean Corporate One Page Resposive Template

Restaurant Responsive Web Template

Fashion Models Responsive Web Template

Luxury Hotel Website Template

2 Column Grid Tumblr Theme

Cars ID Responsive Website Template

Swimming Pool Responsive HTML5 Template

WordPress Responsive Photo Album Theme

Restaurant HTML Responsive Template

Interior Design Portfolio Responsive Web Template

Related posts:

  1. How To Make Your Magento Store Responsive Get started with Responsive Magento templates now if you want...
  2. Ultimate Beginners Guide To Set Up Responsive Websites Nowadays people want to get access to the Internet data...
  3. 24 Responsive Web Templates: Get Yours Now! Dear Friends, Is your website design 100% friendly and looking...
  4. Top 20 Responsive Sites of 2012 Just not so long ago we didn’t give so much...
  5. 10 Tips How to Build a Personal Homepage With Joomla Joomla is one of the most popular amongst free open...

Follow FlashMint on Twitter for more awesome Flash Tutorials!
 
"Like" FlashMint FaceBook Page to stay in touch!

Leave a Reply