Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Building responsive layouts


This penultimate section in responsive design will be about creating layouts for your responsive design. Creating the layout is the exciting and challenging part of creating a responsive web design. There are a number of ways to go about this. We'll go through them, starting with some very simple methods of creating a responsive layout for your project.

Creating responsive padding with the box model property

The first aspect of responsive layout we will cover is the use of padding and margins to control your responsive layout. This is indeed a low-level form of responsive design. First, let's review some of the mathematic principles you should keep in mind when using padding in your responsive layout. These are referred to as the box model properties. The total offset width of your object should include the actual width plus its left and right padding, its left and right border, and its left and right margin, or 2 x (margin + border + padding) + Element = total width. Next, divide one side of the padding by the total width of the box model property.

To make the padding responsive, a static width will not be a useful attribute. A 10px width may look first right for your desktop design, but on a mobile device, it is preferable to make the padding a percentage of the viewport. We can use the box model property to calculate the padding percentage. The percentage is easily calculated by one side of the padding divided by the total with of the page viewed in standard desktop format, or 1024px. Let's look at a real-world example.

A real-world example

Start by creating a new HTML document, and include an image followed by a paragraph of text. Next, we'll work on creating the responsive padding in CSS. I have shown the setup below:

<html>
    <head>
        <meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
        <style>
        </style>
    </head>
    <body>
        <img src="img/robot-med.png"/>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
    </body>
</html>

Within the style tag, add a style for the img and p tags. And add a 4px padding, 4px margin, and 1px border around the img tag. This is a standard non-responsive design for layout padding. Look at the following code example:

<style>
    img{
        padding:4px 4px;
        border:1px solid #ccc;
        margin:4px;
    }
    p{}
</style>

Let's take this simple example of a static design and turn it into a responsive design. In this example, we want to convert the static padding width in pixels into a width measured by a percentage of the viewport.

Applying the box model property

To calculate a percentage that will be proportional to the desktop design, apply the box model properties formula to this example, as follows:

4px / [2 x (4px + 1px + 4px) + 300px] = 0.0126

Take the fraction and convert it to a percentage, and then apply it to your padding of the img element. You can also apply it to the margin. To apply it to the margin, I would recommend you only apply it to the left and right margins, not the top and bottom. Otherwise, your vertical alignment could become distorted and produce some unintended consequences. See it done in the following code sample:

<style>
    img{
        padding:1.26%;
        border:1px solid #ccc;
        margin:1.26%;
    }
</style>

Finished!

Upon launching the HTML in your browser and in the mobile device emulator, you will see that this makes a good layout control for the image that looks good on both desktop and mobile viewports.

Going further

A useful variation of this will be to add a media query to keep the padding static for desktop viewports. This will prevent the padding and margins from blowing up on larger desktops. I have done this in the following sample code:

<style>
    @media screen and (max-width: 620px){
        img{
            padding:1.26%;
            border:1px solid #ccc;
            margin:1.26%;
        }
    }
    @media screen and (min-width:620px){
        img{
            padding:4px;
            border:1px solid #ccc;
            margin:4px;
        }
        p{
        }
    }
</style>

This is a good start; however, it does not really utilize the space very well. There are some problems to fix in order to make this a good responsive design. The first problem I see is that the paragraph of text clears the image on mobile and desktop. We need to better utilize the space if this is going to be a good responsive design. Start by cleaning up the CSS. There are some redundant attributes, such as the border attribute. To clean this up, we should have only the attributes that change inside the media queries. See it illustrated in the following sample code:

<style>
    @media screen and (max-width:620px){
        img{
            padding:1.26%;
            margin:1.26% 4px;
        }
    }
    @media screen and (min-width:620px){
        img{
            padding:4px;
            margin:4px;
        }
    }
    img{
        border:1px solid #ccc;
    }
</style>

Now, in your min-width media query, add a left and right float to the img and p selectors, adding a paragraph selector. In the same media query, add a percentage width to each element. You will need to account for the box model properties you calculated previously. In our example, our margin and padding were 1.26%, and the 1px border would altogether make it about 2.53%. To be safe, you can round the percentage width of the img down to 47%, as I have in this sample code:

<style>
    @media screen and (max-width:620px){
        img{
            padding:1.26%;
            margin:1.26%;
            width:95%;
        }
    }
    @media screen and (min-width: 620px){
        img{
            padding:4px;
            margin:4px;
            width:47%;
            float:left;
        }
        p{
            float:right;
            width:50%;
        }
    }
        img{
            border:1px solid #ccc;
        }
</style>

Viewing your example

Launch the new version of your HTML document and you will see how, on viewports larger than 620px, both elements are floating left and right. When viewed on a mobile viewport, you will see they are aligned horizontally. This is a basic responsive layout.

Adding more complexity

You can add more complexity through additional media queries. Let's add another media query for additional practice. We want to add a media query for all viewports over 1024px. This also means that we need to prevent conflicts with the min-width:620px media query. Add to it another query parameter that limits the style to a max-width value of 1024px, like in the following sample code:

@media screen and (min-width:620px) and (max-width:1024px)

You will also need to add the new media query for viewports over 1024px, like in the following sample code snippet:

@media screen and (min-width:1024px)

In this media query, add the same selectors as for the 620px to 1024px viewports; only change the width to make the image take up a smaller proportion of the screen than before. In my example here, I make them 17% and 80%:

@media screen and (min-width:1024px){
    img{
        padding:4px;
        margin:4px;
        width:17%;
        float:left;
    }
    p{
        float:right;
        width:80%;
    }
}

Finished! Now view your work

Launch this in your viewport, and you will see your responsive layout optimizing itself for these three differently sized viewports. Look at the example illustrated here:

Next, it will be up to you to use the same principles to make more creative and exciting layouts.

Creating responsive navigation with CSS and JavaScript

A usable navigation element is vital to your audience being able to find what they want on your site. A top-horizontal navigation layout may work on a desktop-only site, but it will be difficult to see on a mobile device. Due to the differences in the viewports of desktops and mobile devices, the navigation design should be different and optimized for each.

Jump into an example

This subsection builds on top of the previous one on responsive layouts. If you have not been following along by section, you can just as easily start with a new file.

In this example, we will add a navigation element to the work we did in the previous chapter on responsive layouts. Inside the body tag at the top, insert a nav element. Next, inside the nav element, add a list of links. This is demonstrated in the following code snippet:

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>

Your navigation HTML is complete, so let's double our efforts and add the CSS to make it responsive.

Creating the responsive CSS with media queries

In a media query for viewports under 480px, add a selector for the nav with the display:block style and a selector for nav LI with the display:inline-block style. Also, let's add some style to this menu so that it does not look so plain Jane. Add a section in the CSS outside of any media queries, and in it, add the html, li, and li a selectors.

In the non-responsive area of the CSS, give the HTML a font-size value of 100%, the li a 1px solid green border with a 4px border-radius value, and the li a a block display, Helvetica font, bold font-weight value, font-size value of 1.5 rem, green color, and none for text-decoration. You can also invert it on hover by adding a hover pseudo-element to the li element with a green background color, and to the li a with a white font color. Look at the non-responsive CSS in the following sample code:

html{
    font-size:100%;
}
li{
    border-radius:4px;
    border:1px solid green;
}
li a{
    font-family:Helvetica;
    font-weight:bold;
    font-size:1.5REM;
    color:green;
    text-decoration:none;
    display:block;
}
li:hover{
    background-color:green;
}
li a:hover{
    color:white;
}

Next, inside the smaller media query, one with the max-width value of 480px, add an LI and an li a selector. Inside the li selector, add a block display attribute and a top and bottom margin of 2px. Give the li a selector a padding of 1.26%. This is done in the following code:

@media screen and (max-width: 480px){
    li{
        display:block;
        margin:2px 0px;
    }
    li a {
        padding:1.26%;
    }
    img{
        padding:1.26%;
        margin:3px 0;
        width:98%;
    }
}

Conversely, inside the larger of the media queries, the one with a min-width value of 480px, add the li and li a selectors. Then, give the li selector an inline-block display. And add a 4px padding to the li a selector. Cue a corresponding code snippet:

@media screen and (min-width:480px){
    li{
        display:inline-block;
    }
    li a {
        padding:4px;
    }
}

Your first version is complete

Congratulations, you have created a simple responsive menu! Open it on your desktop and mobile browsers and see whether it looks like these examples:

It is optimized for each of our defined viewport sizes. Even though it works, it can still be better, so let's keep working on this responsive menu.

Going further

The problem with our current responsive menu is that on the mobile display, the menu takes up too much vertical space on the viewport. Imagine the frustration of a viewer having to scroll down on every page just to be able to view your content. So, this menu is incomplete. To make it more complete, let's convert it into a hidden menu that is revealed by the user clicking on a button.

Adding interaction

To begin, add a button element with a parent div element with a navbutton class to the top of the page directly beneath the body opening tag. Also, add an ID called menu to the nav element. We will be using an ID because we will be writing some simple JavaScript to the UI. This JavaScript is so simple we won't be using any libraries such as jQuery. Inside the button body, add an inline onclick JavaScript code block that activates a function called menuButton(). Take a look at the new HTML code example:

<body>
    <div class="navButton">
        <button onclick="menuButton()">=</button>
    </div>
    <nav id="menu">
     …

Before writing out the interaction function, let's finish our style in the CSS. Add to the max-width: 480px media query selectors for the navButton class and the button. Give the navButton selector a block display. Next, give the button a 30px width value, a padding of 4px, a 4px border-radius value, and match the color scheme to the navigation buttons. Then, add a selector for the nav element, and add the nav element with a class of show. The nav selector should have a hidden display, while the nav.show selector should be displayed as a block. Take a look at the following CSS code example:

@media screen and (max-width: 480px){
    .navButton{
        display:block;
    }
    button{
        background-color:green;
        color:white;
         width:30px;
       padding:4px;
        border-radius:4px;
    }
    nav{
        display:none;
    }
    nav.show{
        display:block;
    }
    …

We do not want this element to be displayed on the larger viewports at all. Add a selector for the navButton class to the media query for viewports larger than 480px. Look at this example code:

@media screen and (min-width:480px){
    .navButton{
        display:none;
    }
    …

Finally, the interaction function

Finally, let's build that interaction JavaScript function. Immediately following the closing style tag, add an opening and closing script element. Inside it, define your menuButton() function. Its function starts by defining the theMenu variable as the element with the menu ID. Next, add the conditional test to check whether theMenu does not have the class with the property className of show. If this is true, add the string show to the className property. Otherwise, if the condition is false, and the element does in fact have the show class, set the className property to be a blank string. This will make the button click activate the function to add the show class, show the element if it is not already showing, and if it is visible, to remove the show class, hiding it again. Take a look at this example script:

<script>
    function menuButton(){
        var theMenu = document.getElementById("menu");
        if(theMenu.className!="show"){
            theMenu.className = theMenu.className + "show";
        } else {
            theMenu.className = "";
        }
    }
</script>

Viewing your interactive responsive navigation

Now, launch your completed page and test it on a mobile device or emulator, and compare it to a desktop view. You will see the menu completely changed, or optimized, for the different views. See the example screenshots here:

There are still a number of further customizations you can add to this to make it look even better, such as adding transition animations, changing the position of the menu, and, of course, adding more style to the menu. I will leave these improvements to your creative mind.