Sunday, June 2, 2013

Responsive Web Design - Getting started, Part II

So as promised, coming back to responsive design and digging into HTML and CSS straight away.

We mentioned in our previous post "Responsive Web Design - Getting started" our idea was to identify what kind of browser our client is using, if it is something old-school that doesn't support all latest features then we should use one CSS style, we called it "screen.css". The same css we woud apply for even advanced browsers, but on a screen with resolution starting from 1000px and up (our full frame version of the website).
For all the rest (two other breakpoints) we would use css named "mob.css".
Pretty much we have following picture:

0 - 480 px - mob.css
480 - 999px - mob.css
1000px - up - screen.css

So to implement this in your html, head section, use following code:
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="mob.css" rel="stylesheet" type="text/css" media="screen, handheld" />
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen  and (min-width: 62.5em)" />
    <!--[if (lt IE 9)&(!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="screen.css" />  
    <![endif]-->

So first line is just to set up a viewpoint. Then we have two other css declarations. First to link mob.css for browsers with media type = handheld, second to use screen.css for browsers with min-width equal to 62.5em (which is 1000px).
Then we have a section of code, that looks like a comment. The comment bit would be ignored by old-school browsers lie IE8 and older and we would simply use screen.css overwriting all styles from mob.css.

Simple enough? I think yes.

Okay, now let's talk about CSS itself. Screen.css - i don't think it would be worth spending time reviewing this. There are plenty of resources online dedicated to designing your website with CSS. Since we decided that our full version will be fixed to 1000px, we would implement our css design to make it look nice.

All the fun is with mob.css. Let's have a look. Since we were advised to start designing based on mobile version and then expend into tablet and desktop. Think about content first, and then design and all the cool jquery features after, this is how we should proceed.

Implement your styles trying to make your site look like a mobile version first.
This is our HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>BestBars.In - Find Best Bars in the World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="mob.css" rel="stylesheet" type="text/css" media="screen, handheld" />
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen  and (min-width: 62.5em)" />
    <!--[if (lt IE 9)&(!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="screen.css" />  
    <![endif]-->
</head>
<body>
    <div class="header">
        <div class="fullline">
            <div class="logo">
                <a href="#">
                    <img src="logo.gif" alt="BestBars.In Logotype" /></a>
            </div>
            <div class="title">
                <h1>
                    Find Best Bars in the World</h1>
            </div>
            <div class="login">
                <a href="#">Sign in</a> <a href="#">Sign up</a>
            </div>
        </div>
        <div class="fullline">
            <div class="search">
                <div class="searchctrl">
                    <input type="text" />
                    <input type="button" value="Search" />
                    <a href="#">Advanced Search</a>
                </div>
                <div class="searchsuggestions">
                </div>
            </div>
            <div class="social">
                <a href="#">Follow us on Facebook</a> <a href="#">Follow us on Twitter</a>
            </div>
        </div>
        <div class="breadcrumb">
            <a href="#">Home</a><a href="#">Netherlands</a><a href="#">Amsterdam</a>
        </div>
    </div>
    <div class="content">
        <div class="leftcolumn">
            <div class="about">
                <h2>
                    BestBars.In - the universal resource to find best bars, pubs, and cocktail lounges</h2>
                <p>
                    We constantly search for best places to visit all around the world, and try to provide
                    you with the best and most up to date reviews.</p>
            </div>
            <div class="maindata">
                <div class="datablock">
                    <h3>
                        Recently Opened Bars in Amsterdam</h3>
                    <div class="bar">
                        <div class="barleftcolumn">
                            <img src="Vesper.jpg" alt="Vesper Bar profile image" />
                        </div>
                        <div class="barrightcolumn">
                            <a href="#">
                                <h4>
                                    Vesper Bar</h4>
                            </a>
                            <div class="address">
                                Vinkelstraat 57, Amsterdam, Netherlands
                            </div>
                            <div class="rate">
                                *****
                            </div>
                            <div class="facilities">
                                <div class="wine">
                                    Wine bar</div>
                                <div class="cocktails">
                                    Cocktails</div>
                                <div class="food">
                                    Food served</div>
                            </div>
                            <div class="description">
                                Boutique Bar Vesper is located in the middle of the Jordaan area in Amsterdam, between
                                the trendy Haarlemmerdijk shopping district and the Brouwersgracht.</div>
                        </div>
                    </div>
             </div>
            <div class="extras">
                Dynamically loaded information here, about top rated bars or something</div>
        </div>
        <div class="rightcolumn">
            <div class="suggestions">
                You may also like</div>
            <div class="ads">
                Advertising here</div>
        </div>
    </div>
    <div class="footer">
        <div class="footermenu">
            <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Contacts</a> <a href="#">Sitemap</a>
        </div>
        <div class="copyrights">
            © Copyright 2012 GPTeam.nl - All Rights Reserved
        </div>
    </div>
</body>
</html>

It is not the most beautiful HTML code, but should do the trick for this example.
I'm not the best designer, so I don't pick the best colors, border etc. But what I wanted to do is to reformat our layout depending on our breakpoints.
We have three sections: header, content, and footer (divs with styles header, content, and footer). In the header section we have three logical sections (well logical per my point of view and idea of designing this particular example):

  1. logotype, page heading message, and login section
  2. search block and social media icons (i did not have time to put real icons, so just put placeholders instead)
  3. breadcrumb control (to show where on the website our users are)

First section on the phone i want to display vertically, so first logotype, next line page title, next line login information. On tablet and desktop, these three blocks i want to display horizontally, one after another and login block should be glued to the very right, when logo is on the left and message is in the middle.
Second section, I want to show the same way, vertically on the phone, and horizontally on tablets and desktops.
Third section i don't want to show on the phone at all, and display it on tablets and desktops, taking full width.

As you already noticed i grouped all the logical bits into divs, two of them with class="fullline", last one with style breadcrumb.
let's define fullline class:
.fullline
{
    display: table;
    width: 100%;
}
What we do here? Just specify display type as table (which means height would be adjusted based on the content, and width = 100%, so it would take full width.
Then we have class="logo" for our logotype:
.logo
{
    width: 100%;
    display: table;
    text-align: center;
}
Similar thing, we just want to make sure it takes 100% of the space width-wise.
Same for title and login:
.title
{
    width: 100%;
    display: table;
    margin-top: 8px;
}
.login
{
    width: 100%;
    display: table;
    margin-top: 8px;
    background-color: #CCCCFF;
}

Now, let's ignore the rest of the styles, and focus on tablet view. Let's define same style in the same mob.css document but for browsers with resolutions higher than 480px:
@media screen and (min-width: 30em)
{
     .....
}
we have to specify the same styles inside the @media block. What is it? This is a cool feature of CSS that allows you to specify that styles inside that block would be applied to browsers matching some particular requirement (in our case with min-width = 30em, which is 480pixels). So here we are:
.logo
    {
        width: 30%;
        float: left;
    }
    .title
    {
        width: 40%;
        float: left;
    }
    .login
    {
        width: 30%;
        float: right;
    }

As you can see in total all widths of all the blocks give us 100%, which means they will be displayed as one line, exactly what we wanted.

Pretty simple, right. Well I'll let you play with the rest of the code since it is pretty much the same thing but with more styles. Once you are done, open your HTML file with Chrome or Firefox and re-size your browser, you'll see how it is going from one layout to another.
Here are the screenshots of what i got:















I hope you enjoyed this article, if not, well sorry about that, we are just trying to help you out :-) But feel free to drop a line, we would really appreciate your comments and suggestions.

Have fun coding and come back next week, we'll try to post something new for you :-)

Cheers,
Your GPTeam

0 comments:

Post a Comment