Neat and modern design – responsive

Date: 02nd Apr 2013 Author: admin 7 Comments
Posted in: HTML/CSS |Tags: , , , , ,

Neat and modern design - responsive

Neat and modern design – responsive

The last time we had finished the foundation of our template – we prepared a universal template (see: Neat and modern design, which is centered on the center). But our template had one disadvantage – he was not ready to work on small screens (mobile devices, like iPhone or Android). When it comes to mobile things, it usually means two things: mobile applications or a mobile version. Not so long ago were popular WAP technology but, more recently, people are more and more talking about responsive templates. Responsive templates become a trend. This technology makes it possible to simply use your site on mobile devices without a global alteration of your template. If you ask – if it works with Internet Explorer – yes, it works. Ok, it’s time to start.

Before we start, I would like to show you how it looks on real mobile devices:

result on mobile phones


Live Demo
download in package

Now, let’s download the source codes and start making it !


Step 1. HTML

Compared with the previous version of our index page – I made a few small changes. First, we have to add next code to our header:

index.html

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <link href="css/responsive.css" rel="stylesheet" type="text/css" />

The first row is a little trick how to hide a compatible mode icon for IE browser. The second row tells your mobile browser to use specific width (width of the screen) at a scale of 100%. It helps adjust sizes for mobile devices. Finally, – we linked a new CSS file: responsive.css. All new responsive styles will be published here.

Now, I think that we can make a little break in order to understand .. what is that magical ‘responsive’ and how to do it. Actually, this is not very difficult. We all know that the work of any web designer is to compose the various design elements on the page so that it looks comfortable and handsomely. Now let’s add a fact as the existence of mobile devices with small screens. Now designers have to think more in order to provide comfort with a beautiful design for small screens. Usually, the work is reduced to the reorganization of the menu, page blocks, forms, and other elements. As example, instead a wide drop down menu – we can use some custom drop down menu (clickable menu). The best way – is to display all the menu elements vertically, rather than horizontally. Then, in case of wide screens, we can display page content or in the center, or, we can use fluid techniques. When our screen is small, usually we don’t have a lot of space to display multiple columns with blocks, in this case, we can display 1 (sometimes 2) columns on our screen. In case if you use some wide elements like promo (slider), it is wise to just hide it, or – shrink images of slider.

I’m going to display two (after – one) columns for small screens, and, convert our menu into custom dropdown menu. In order to prepare our menu for custom onclick behavior, we have to modify the HTML code of our menu a bit:

    <div id="navmenu">
        <nav id="menu">
            <input type="checkbox" id="menu_check">
            <label for="menu_check" onclick>&nbsp;</label>
            <ul>

As you see – we added a checkbox here. This checkbox will be invisible for usual screens, and visible for small screens. Of course, it will be customized with CSS. But, as you see – this is a great way to control Onclick event for our UL-LI dropdown menu.

Step 2. CSS

css/responsive.css

The first thing we will do – will be the menu. As I mention before, depending on screen resolution, our check-based label element will be invisible (by default) and visible for small screens. So, let’s hide them:

#menu input[type=checkbox] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}
#menu label {
    cursor: pointer;
    display: none;
    user-select: none;
}

Now, we have to apply custom styles for smaller screens:

@media (max-width: 850px){
    #navmenu {
        height: auto;
        overflow: hidden;
    }
    #menu {
        float: none;
        overflow: hidden;
    }
    #menu ul {
        display: none;
        height: 100%;
    }
    #menu label {
        background: -webkit-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
        background: -moz-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
        background: linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B5D63', endColorstr='#4D5055',GradientType=0 );

        color: #EEEEEE;
        display: block;
        font-size: 18px;
        padding: 8px;
    }
    #menu label:after {
        content: "\2261";
        position: absolute;
        right: 10px;
    }
    #menu input:checked ~ ul {
        display: block;
    }
    #menu input:checked ~ ul > li {
        width: 100%;
    }
    #menu > ul > li {
        float: none;
        padding-bottom: 5px;
    }
    #menu ul li a {
        border-width: 0;
        height: 18px;
        line-height: 18px;
    }
    #menu ul ul, #menu ul li:hover ul {
        display: none;
    }
}

As you see – all these styles will be applied on screens with resolution with max width 850px. Most androids and iphones are here. So, our label elements obtain own custom styles now. It turns into a clickable bar (with linear gradient and a small symbol (three lines) in the right corner). Once it is checked (input:checked) we display our main UL element and make child LI with width 100%. Now – this is vertical UL-LI dropdown list. Now – finishing touches: we need to add custom styles for the main layout, page blocks, and footer:

@media (max-width: 1050px){
    #header, .main, .footer {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 96%;
    }
}
@media (min-width: 851px) and (max-width: 1050px){
    .left, .right {
        width: 49%;
    }
}
@media (max-width: 850px){
    .left, .right {
        width: 100%;
    }
    #search {
        float: none;
        margin: 10px 0 10px 10px;
    }
    .footer {
        font-size: 16px;
    }
}

Well, if our screen resolution is below 1050px, we set main width to all parent elements: 96%. If our screen width is between 851px and 1050px, we can display our content in 2 columns (left and right columns), but in case if we have lower resolution (less than 850px) – we can display only single column (boxes with width 100%).


Live Demo
download in package

Conclusion

Well, we’re done. Now we have a really high-quality template which works fine for most of possible devices (from mobile phones to widescreen monitors). I’m sure that it will be very useful for you. Good luck and welcome back

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

7 Comments

    • Fidel Guajardo's Gravatar
    • Fidel GuajardoApril 2, 2013 7:28 pm

      This information is really helpful. Thank you for sharing. Here is one of the best responsive frameworks that can save you some time in coding all of this. Foundation by Zurb

    • Damian's Gravatar
    • Hi Andrew,

      This is a great article and I really enjoyed the read. Thanks for creating it. :)
      I do believe it is highly important these days to consider how your website will look on mobile devices.
      Keep up the good work.

      Regards,
      Damian

    • cesare casadonte's Gravatar
    • lowwwol's Gravatar
    • Santosh's Gravatar
    • Mukesh's Gravatar

Leave a Reply

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

*

CAPTCHA Image
Refresh Image

*

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>