RSS

How to Make Mobile Friendly Websites. Responsive Web Design for Beginners

13 Sep

Responsive Web Design is a web design process which ensures optimal viewing experience in all displays available. The display can be of desktops, tablets, mobiles and now the increasingly popular big screens of smart televisions.
This article helps you to make your website mobile friendly or tablet friendly. This article suits for those developers who wish to convert their existing website to responsive layout or for those who wish to develop a responsive website from scratch.

Here I have listed few techniques which help you to make your website responsive. For better understanding, I have created 2 demo pages. One is not responsive and other one is responsive. I will be using these pages to illustrate each points. Here is the html which I have used for both responsive and non responsive pages.

Demo 1: Non Responsive Web Page
Demo 2: Responsive Web Page

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class=”container”><!– Main Container –>
    <div class=”header”><!– Top Header –>
        <div class=”logo-wrapper”><!– Top left for logo –>
            <img class=”logo”/>
        </div>
        <div class=”search-wrapper”><!– Top right for search –>
            <input type=”text” class=”search”/>
        </div>
    </div>
    <div class=”main”><!– Main content holder –>
        <div class=”content-wrapper”><!– Main window for content –>
            <h1 class=”title”></h1>
            <div class=”content”></div>
        </div>
        <div class=”sidebar-wrapper”><!– Right sidebar –>
            <ul class=”widget-wrapper”>
                <li class=”widget”><!– First widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Second widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
                <li class=”widget”><!– Third widget –>
                    <div class=”widget-title”></div>
                    <div class=”widget-content”></div>
                </li>
            </ul>
        </div>
    </div>
    <div class=”footer”></div>
</div>

 

Fluid Grids

While implementing your design from Photoshop files using html, try to avoid tables for layouts. Using tables give a less flexible layout. Use tables only for its real purpose, i.e. to display tabular data. For layout design, use div tags instead. div tags are by default block level elements. They can be floated based on our layout and will stack smoothly in small display sizes. As the term suggests, fluid grids means the grid is self adjustable. A fixed grid is defined using pixels or points, where as the width of fluid grid is defined using percentages or Ems. When we use say 90% width for the main page container div tag, the div itself will shrink when we reduce the size of screen or browser.

In the non-responsive page design demo, we have created a main parent div of 960px width and all inner sections are clearly defined using pixels. While in responsive page, we gave 68% width to main content area and 32% width for sidebar.

CSS3 Media Queries

CSS3 media queries allow a developer to set css style rules based on different display properties. The size of a mobile device may be different from that of a tablet. We use media queries to show a web page comfortably in each devices.

In our demo, we have used media queries to display all major blocks, one below the other. This layout is more comfortable for mobile users to read an article. Some websites hide some elements in smaller display devices. This helps to avoid distractions like ads or less important content.

Fluid Image size

This part is simple, yet really powerful for responsive web design. Usually we design needed image with a size which is predefined for the layout. Only thing we need to add is a width measurement in percentage. This will increase or decrease image size based on screen width.

Advertisements
 
6 Comments

Posted by on September 13, 2013 in CSS, HTML

 

6 responses to “How to Make Mobile Friendly Websites. Responsive Web Design for Beginners

  1. website design

    September 13, 2013 at 10:20 am

    hi,
    it’s a comment.
    thank you for sharing such a great information with us.
    i need some more information to develop mobile friendly web site design, can you provide me.

     
  2. click here now

    September 14, 2013 at 6:22 am

    with|Are you affected from|Withstand|Are you suffering with} kidney disease? Strengthen your renal overall health the natural way

     
  3. check here

    September 15, 2013 at 12:49 am

    Is it possible to get off kidney dialysis? Melbourne doctor affirms it actually is.

     
  4. click over here

    September 16, 2013 at 7:34 am

    Withstand kidney disease? Learn the way doctor manages it effectively time and time again

     
  5. learn web design

    September 17, 2013 at 12:40 pm

    When someone writes an paragraph he/she maintains the thought of a user in his/her
    brain that how a user can understand it. Thuus that’s
    why this piece of writing is amazing. Thanks!

     

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: