Page 1 of 1

Simple Responsive Page Rate Topic: -----

#1 andrewsw  Icon User is online

  • Speak up, I'm wearing a towel
  • member icon

Reputation: 5250
  • View blog
  • Posts: 20,329
  • Joined: 12-December 12

Posted 06 October 2015 - 11:24 AM

This tutorial presents a simple introduction to responsive web design, creating a page that changes at different screen resolutions using media queries.

I use the Simple Responsive Menu from my tutorial here. I don't discuss the menu here so refer to my menu tutorial for any questions concerning it.

I want to stress that this is an introduction to this subject, see the links that follow. I borrowed from another simple tutorial here. I had to modify it substantially though, first to incorporate my navbar, but also because that tutorial takes a desktop first approach rather than my mobile first approach. I prefer mobile first because it is more challenging to fit the content neatly at such small resolution, then easier to gradually allow for more room and more content.

This image presents the structure at larger resolution:

Attached Image

At smaller resolution, the sidebar drops underneath:

Attached Image

The navigation will also become a button that displays or hides the (full width) navigation items.

At even smaller resolution the sidebar disappears altogether. For mobile phones we need to consider whether some content is necessary. Consider, in particular, how much vertical space it occupies, and that the user will need to scroll past it. An alternative to removing content is to re-order it so that more important content appears earlier.

Some Links:

Responsive Web Design :alistapart
Responsive or Adaptive Design
Responsive Web Design
Techniques for Responsive Typography
Type study: Sizing the legible letter
The EMs have it: Proportional Media Queries FTW!
And You Thought Responsive Text Was Just a Fad?
Should You Use Inline-Blocks As A Substitute For Floats?
FLEXNAV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Page</title>


(The full code is at the end of the tutorial.)

The meta tag for viewport is required. (Once you've completed the tutorial try removing this and viewing the page on a mobile phone or tablet.) It is essentially scaling the content to the current device.

Here's the complete HTML, then we'll come back and work through the CSS:
</head>
<body>
<div id="pagewrap">
    <header>
        <button id="menu">Menu</button>
        <nav id="navbar">
        <ul class="navbar">
            <li><a href="index.html">Home</a></li>
            <li><a href="newsletter.html">News/Hints &amp; Tips</a></li>
            <li><a href="courses.html">Courses</a></li>
            <li><a href="materials.html">Materials &amp; More</a></li>
            <li><a href="testimonials.html">Testimonials</a></li>
            <li><a href="ourteam.html">Our Team</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
        </nav>
    </header>
    <main>
    <h1>The Main Heading</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </main>
    <div id="sidebar">
        <h3>Sidebar</h3>
        <p>text</p>
        <p>text</p>
    </div>
    
    <div id="footer">
        <h4>Footer</h4>
    </div>
</div>
<script>
    document.getElementById('menu').addEventListener('click', function () {
        var nav = document.getElementsByTagName('nav')[0];
        if (nav.style.display == 'block') {
            nav.style.display = 'none';
        } else {
            nav.style.display = 'block';
        }
    }, false);
</script>
</body>
</html>


The script at the bottom is discussed in my menu tutorial, it shows or hides the menu at small resolution.

Add a style tag in the head:
<style>
#pagewrap, main, #sidebar {
    padding: 5px;
}
main {
    border: 1px solid gray;
}
#sidebar {
    display: none;
    border: 1px solid gray;
}
#footer {
    clear: both;
}
h1 {
    font-size: 20px;
}


Remember, we are working mobile (lowest resolution) first. There are no floats, or specified widths. These elements will sit one above the other, with the sidebar removed. clear: both on the footer has no impact here but will do when we float at larger resolution. I prefer to put a property like this (one with no side effects) in the main CSS rather than adding it in media queries.

The borders aren't pretty, they are just providing an outline so that we can see how far the elements extend. (I could have used the 'outline' property.)

I'm setting a specific, and reasonable, font size for the h1 at low resolution, and will increase it to 30px. See a couple of the links above for a discussion of typography. The font can be made to scale automatically, but there are other considerations such as letter spacing (and choice of fonts, colours, etc.).

This is followed by the CSS for the navigation bar, see my other tutorial:
/* the navigation bar */
#menu {
    margin: 2px;
}
#menu a {
    text-decoration: none;
}
nav {
    display: none;
    font-family: 'Source Code Pro', Consolas, monospace;
}
nav ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 0;
    background-color: blue;
}
nav li {
    display: block;
    font-size: 14px;
    color: white;
    border-bottom: 1px solid cornflowerblue;
}
nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
nav a:hover {
    background-color: cornflowerblue;
}
/* ************** */


Here is the first (of three) media queries:
@media screen and (min-width: 480px) {
    h1 {
        font-size: 30px;
    }
    #sidebar {
        display: block;
    }
}


This will apply to any resolution of 480px or more.

I only change the h1 font-size once, when we get beyond mobile phone size. The sidebar will come into view, sit below the main content, and occupy the full width.

Choose reasonable cut-off points and test thoroughly (there are many emulators available). Don't try and code to specific devices, you won't be able to keep pace with the number and variety of new devices. However, if you are building a corporate site, and many staff have access to a specific device, then it is common sense to include a media query that targets it.

I'm using 3 media queries. You could use 4 or, at a stretch, 5. (Prefer 4 to 5, unless you can justify needing 5.) Any more than this then it is likely that you are trying to target specific devices, which I have advised against.
@media screen and (min-width: 700px) {
    #pagewrap {
        width: 94%;
    }
    main {
        width: 65%;
        float: left;
    }
    #sidebar {
        width: 30%;
        float: right;
    }
}


To float the sidebar next to the main content both have to have a width specified. Now that we have attained the width of 700px we can use percentages, creating a fluid layout. Min and max-widths can also be considered.

The remaining (third) media query is just for the navigation bar (see my other tutorial):
/* just for the navigation bar */
@media screen and (min-width: 900px) {
    #menu {
        display: none;
    }
    nav {
        display: block !important;
    }
    nav li {
        display: inline-block;
        border-right: 1px solid cornflowerblue;
        border-bottom: none;
    }
}


I chose 900px because of the number of buttons on my bar. It could have been lower, which I prefer, but then some buttons will drop down to a second row. I don't actually mind this second row, although I suppose some might consider that it looks a little clumsy.

If you wanted to, you could put some effort into making the buttons split evenly/neatly to two rows. Bear in mind though, that if you add or remove buttons, or change their text, then you'll probably need to revise your code that attempts to split the bar.

The full code:

Spoiler

This post has been edited by andrewsw: 06 October 2015 - 12:44 PM


Is This A Good Question/Topic? 1
  • +

Replies To: Simple Responsive Page

#2 andrewsw  Icon User is online

  • Speak up, I'm wearing a towel
  • member icon

Reputation: 5250
  • View blog
  • Posts: 20,329
  • Joined: 12-December 12

Posted 19 December 2015 - 02:55 AM

Here's a screenshot at mobile size.

Attached Image

Slightly larger, the sidebar appears:

Attached Image

This post has been edited by andrewsw: 19 December 2015 - 02:59 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1