Responsive-web-design-devices

Responsive Website Basics – 3 Key Elements

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

This post covers three key elements to make your site look good on desktops, laptops, tablets and mobile phone. Understanding these elements are your first step to understand Responsive Website basics.

So in the industry right now there’s a big shift going on, everything is moving to mobile devices and responsiveness and this is largely due to increasing trend on mobiles and tablets. These small devices have really changed the way that we designers have to work.

Screen-Shot-2014-02-28-at-7.11.28-AM
source : marketingland

 

Responsive Website Basics – Element 1 : META TAG

Most browser scale your site accordingly to the width available on mobile device, making it so difficult to use and read, literally a nightmare to click a link, you need to pinch, zoom in and then click. There is way to override this default behaviour, the meta viewport tag allows us to tell the browser to use the device width as the viewport width and to disable that initial scale.

The above tag will cause your website to squeeze down to the available width of device. So for instance if you open your website on an iPhone then your website will have on 320px width.

Responsive Website Basics – Element 2 : HTML Structure

To make your website responsive, all you need to do is to think all of your html element as either Container or Content element.

a. Container elements
A container is an element used as a layout tool, it has form, volume, shape. A classic example would be a grid container. You can also have a container within container, like a grid column in a grid container.
The idea behind the container elements are structural and used for layouts, they inform the structure of the page.

container-elements

 

b. Content elements

Elements which actually hold content are known as content elements, they can be paragraphs, images, forms or buttons. A content element is as wide as its containing element, so if you have naked paragraph on a page it takes all the width available on page. The paragraph tag is just holding the content and not describing its form or layout, so its flexible and assumes the form of the container it is in. So when you put that in a container element that where the magic happens.

 

Responsive Website Basics – Element 3 : MEDIA QUERIES

SO the last ingredient which we need in our responsive web design is media queries. Media queries are little snippets of css that queries or ask the screen what size it is, rather you can tell media query to look for all kind of conditions.

The query below tell the browser that if you see or you are on a screen below 960 pixels wide, include the code defined in between the curly braces.

you can query almost everything with media query, talking from the device with to type of device the page is opened on, for detailed learning of media queries, here a link to media queries @ w3c.

Here are the link to some of the responsive websites being sold on superbootstrap, Nature , Flip Resume , Riders

 

Conclusion :

With three basic steps we can easily create a website which responds the the width and type of device. Let me know in comments if anyone needs a working responsive website.

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0
  • Bhupinder Kumar

    nice tutorioal