Styling our navigation

Next, let's style our navigation to look and feel a bit more useable.

nav ul {
    padding: 0;
}

nav li {
    list-style: none;
}

nav a {
    display: block;
    font-size: 12px;
    padding: 5px 0;
}

Here we remove the padding off the <ul> element and then remove the default styling option from each list element. Finally, we make sure each anchor is displayed correctly by setting the font size to 12px and add padding to the top and bottom of each anchor to allow for easy selection on the iPhone.

Finally, we'll add some styling to our footer.

footer p {
    text-align: center;
}

Very simply, we're aligning the paragraph within the footer to center. Since we've defined the default styles for our paragraph in our fonts section, the styling gets picked.

Responsive design principles

Responsive design is the key to our mobile applications. Given the fact that many mobile experiences now surpass those viewed on desktop, it is essential we create applications that fit our evolving technological landscape. Lucky for us, the HTML5 Mobile Boilerplate comes with preliminary styles that we can modify.

Media queries to the rescue

First, let's open up our main.css file in our css directory. Next, scroll down to the bottom of the file and you should see the following styling:

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 800px) {
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {}

Although this styling gets us off the ground, for iPhone development, we need some more customization. The first media query is specific for tablet devices, and the second media query helps us by targeting devices with higher resolution, such as the iPhone 4.

What we want to do is make this a bit simpler. Since we are only targeting iPhones, this is what we can replace the previous code with:

/* iPhone 4 and 5 Styles*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) { }

The previous code will target both the iPhone 4 and 5. We specifically target these two devices by checking the -webkit-min-device-pixel-ratio property on the device, and if it is true it means we can serve high definition graphics.

Another aspect we want to check is our viewport settings in the index.html pages we've set up. Luckily, we cleaned this up earlier and it should have the following:

<meta name="viewport" content="width=device-width">

The previous code snippet will basically resize our content based on the width of the device.

At this point, we should be set for implementing responsive styling later on in our applications. Now that our styling is set for our applications and is general enough to expand upon, let's start adding the framework behind the scripts.

Responsive images

Images are an extremely important part of any application. It helps showcase the features of a product and exemplifies information you want the user to understand. However, today's varying amount of devices require content to respond correctly. On top of that, we need to be able to deliver content that is appropriate for the experience, meaning we need to tailor to higher resolution devices so that the highest quality content reaches that audience.

There are multiple techniques for delivering the appropriate content. However, the one you choose depends on the requirements of your project. In this part, we'll review the traditional responsive web design principle of resizing an image according to its content and/or container.

Fluid images

In this technique, the developer sets all the images to a maximum width of 100 percent. We then define the container of the image to adjust accordingly.

Fluid width images

To achieve full width images, we can do the following:

<body>
<img src="img/batman.jpeg" alt="Its Batman!">
</body>

The markup is pretty simple, we essentially wrap an image into an element that extends the full width of what we need. In this case, the body will extend 100 percent in width.

Next, we'll define the style of the image as follows:

img {
    max-width: 100%;
}

With this simple CSS declaration, we are telling our images to have their maximum width set to 100 percent of the containing content. This will automatically resize the image as the device's width changes, which is essential if we want to make sites responsive to the user's device.

Full width images

In this case, we want the image to stay its full width, but we also need it to cut off accordingly.

To achieve this, we can start by simply creating a div with a class, in this case we add a class of overflow:

<div class="overflow"></div>

We can then create the styling that keeps the image at full width and cuts off based on the resizing of the content:

overflow {
    background: transparent url('img/somgimg.jpg') no-repeat 50% 0;
    height: 500px;
    width: 100%;
}

This is a bit complex, but essentially we attach the image with a background property. The key here is to make sure we center it using 50 percent. The height property is just to show the image, and the width tells the container to be 100 percent related to its content.

These are the two techniques we use when implementing a traditional responsive design. We'll be implementing these techniques much later when we create the video and image galleries.

[Previous] [Contents] [Next]