HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone, PDF, EPUB, 184969544X

HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

  • Print Length: 204 Pages
  • Publisher: Packt Publishing
  • Publication Date: May 23, 2013
  • Language: English
  • ASIN: B00CYHB3AS
  • ISBN-10: 184969544X
  • ISBN-13: 978-1849695442
  • File Format: PDF, EPUB

 

”Preview”

About the Author

Benjamin LaGrone is a web developer who lives and works in

Texas. He got his start in programming at the age of 6 when he

took his first computer class at The Houston Museum of Natural

Science. His first program was “choose your own adventure book”,

written in BASIC; he has fond memories of the days when software

needed you to write line numbers.

Fast forward to about thirty years later; after deciding that

computers are here to stay, Ben has made a career combining

some of his favorite things—art and coding; creating art from code.

One of his favorite projects was using the GMaps API to map

pathologies to chromosomes for cancer research.

Fascinated with mobile devices for a long time, Ben thinks that the

Responsive Web is one of the most exciting, yet long time coming,

new aspects of web development. He now works in a SAAS

development shop and is the mobile and Responsive Web

evangelist for the team.

When he’s not working on some Internet project, Ben spends his

time building robots, tinkering with machines, drinking coffee,

surfing, and teaching Kuk Sool martial arts.

This book could not have been written without the patience and

support of my loving wife, Hannah, and my two beautiful

daughters, Daphne and Darby. Thank you.

About the Reviewers

Dale Cruse is the author of HTML5 Multimedia Development and has worked as a technical editor on several other HTML5 books.

He started his career in 1995 as a U.S. Army photojournalist. Since

going purely digital on CBSNews.com, he’s created web and mobile experiences for some of the most well-known clients in the world,

including 20th Century Fox, Bloomingdale’s, and MINI Cooper.

Currently, he juggles between being a senior frontend developer at

Allen & Gerritsen and a New York Yankees fan in South Boston. An

in-demand speaker, you can’t get him to shut up on Twitter at

@dalecruse.

Ed Henderson was born and raised in Scotland, and is an

experienced human being, with a love for designing, building, and

making and breaking things online.

Not afraid to get his hands dirty and his feet wet, he is open to new

technologies as long as they are useful and/or fun.

Ed has a real degree in Computer Science, has run his own

business, worked freelance, been employed, and been a

consultant. He is now employed as Senior Software Engineer for

POPSUGAR in San Francisco, California, USA.

He has vast experience in all aspects of the industry, from web

pages and apps to social media. Ed has also reviewed and written

a number of books.

Ed thrives on coming up with fresh ideas. Making a difference and

turning one of those ideas into useful, working “things” is what

floats Ed’s boat.

Away from the crazy world of the Web, Ed has run the Edinburgh

Marathon and abseiled down a lighthouse, raising thousands of

pounds for charity. He captained his local Scottish rugby team for

three seasons, winning the championship as top scorer and

reaching the final of a national competition.

You may not know that Ed is the Dad from Jack Draws Anything

(http://jackdrawsanything.com/) and the winner of the prestigious

.net magazine Social Campaign of the Year (2011) award.

Ed lives in Corte Madera, California, USA (just 15 minutes from San

Francisco) with the rest of Team Hendo: his amazing wife Rose and

sidekicks Jack, Toby, and Noah.

Ed likes cake, bacon, cider, and talking about himself in the third

person.

Rokesh Jankie graduated with a Masters degree in Computer

Science from Leiden University, the Netherlands, in 1998. His field

of specialization was Algorithms and NP-complete problems.

Scheduling problems can be NP-complete, and that’s the area he

focused on. After that, he started working for the University of

Leiden. He then went on to work with ORTEC consultants, Ponte

Vecchio, and later, with Qualogy. At Qualogy, he used his

experience thus far to set up a product. Qualogy works in the fields

of Oracle and Java technologies. With the current set of

technologies, interesting products can be delivered; that is QAFE

(see www.qafe.com for more info).

The company that he works for now is specialized in Oracle and

Java technologies. As head of the product development department

and CTO of QAFE Inc., his focus is on the future of web application

development. At the company, modern technologies (such as

HTML5, Google APIs, AngularJS, NodeJS, and Java) are used,

and close contact is kept with some excellent people at Google to

make things work.

He has also reviewed the books HTML5 Canvas Cookbook by

Packt Publishing and Dart in Action by Manning Publications Co.

I’m very honored and grateful that I was contacted to review

this book. Savio Jose gave me the opportunity to review the

book. It always feels good to be part of the next big thing on the

Web (HTML5, CSS3, and JavaScript) in this way and for this

particular topic. The future of web applications looks very

promising.

www.PacktPub.com

Support files, eBooks, discount

offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book

published, with PDF and ePub files available? You can upgrade to

the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in

touch with us at < service@packtpub.com> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and

receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is

Packt’s online digital book library. Here, you can access, read and

search across Packt’s entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books.

Simply use your login credentials for immediate access.

Preface

HTML5 and CSS3 Responsive Web Design Cookbook gives

developers a new toolbox for staying connected with this new

skillset. Using the clear instructions given in the book, you can

apply and create responsive applications and give your web project

the latest design and development advantages for mobile devices.

Using real-world examples, this book presents practical how-to

recipes for site enhancements with a lighthearted, easy-to-

understand tone. Gain a real understanding of Responsive Web

Design and how to create an optimized display for an array of

devices. The topics in this book include responsive elements and

media, responsive typography, responsive layouts, using media

queries, utilizing modern responsive frameworks, developing

mobile-first web applications, optimizing responsive content, and

achieving unobtrusive interaction using JavaScript and jQuery.

Each recipe features actual lines of code that you can apply.

What this book covers

Chapter 1, Responsive Elements and Media, covers the creation of elements that optimize to mobile devices or desktop computers.

Chapter 2, Responsive Typography, teaches you about using fluid typography, creating cool text effects, and creating text that stands

out on your screen through the HTML5 canvas and CSS3.

Chapter 3, Responsive Layout, teaches you how to create responsive layouts that you can really use in your projects. You will

learn about using viewport and media queries to make your web

project respond to different viewport sizes and types.

Chapter 4, Using Responsive Frameworks, teaches you how to use new frameworks to deploy responsive sites with the latest

responsive methods and interactions quickly and reliably, and how

to turn old static frameworks into responsive ones.

Chapter 5, Making Mobile-first Web Applications, teaches you how to make mobile web versions of your web application, which are

optimized to be mobile-first, with jQuery Mobile, and how to

optimize for the desktop viewport.

Chapter 6, Optimizing Responsive Content, teaches you about getting and using all the tools you need to build and test your

responsive web project.

Chapter 7, Unobtrusive JavaScript, teaches you how to write JavaScript that lives out of your web page so that you can have

thoughtful, responsive interactions for different devices.

What you need for this book

You will need an IDE (integrated development environment);

NetBeans or Eclipse is recommended (there are instructions on

how to get one inside), image editing software such as Photoshop

or GIMP, a web host, and a local web server such as Apache or a

local hosting application such as XAMPP or MAMPP.

Who this book is for

This book, for all of today’s wireless Internet devices, is for web

developers seeking innovative techniques that deliver fast, intuitive

interfacing with the latest mobile Internet devices.

Conventions

In this book, you will find a number of styles of text that distinguish

between different kinds of information. Here are some examples of

these styles, and an explanation of their meaning.

Code words in text, database table names, folder names,

filenames, file extensions, pathnames, dummy URLs, user input,

and Twitter handles are shown as follows: “ The height: auto

property acts to preserve the aspect ratio of the image.”

A block of code is set as follows:

<p class=”text”>Loremipsum dolor sit amet…</p>

<div class=”img-wrap”>

<img alt=”robots image” class=”responsive”

src=”robots.jpg”>

<p>Loremipsum dolor sit amet</p>

</div>

When we wish to draw your attention to a particular part of a code

block, the relevant lines or items are set in bold:

<!DOCTYPE HTML>

<html>

<head>

<style>

.rotate {

/* Chrome, Safari 3.1+*/

-webkit-transform: rotate(-90deg);

/* Firefox 3.5-15 */

-moz-transform: rotate(-90deg);

/* IE9 */

-ms-transform: rotate(-90deg);

/* Opera 10.50-12*/

-o-transform: rotate(-90deg);

/* IE */

transform: rotate(-90deg);

}

</style>

</head>

<body >

<p class=”rotate”>I think, therefore

I am </p>

</body>

</html>

New terms and important words are shown in bold. Words that

you see on the screen, in menus or dialog boxes for example,

appear in the text like this: “However, what I really want is a large

image, so I click on Search tools, and then on Any Size, which I change to Large.”.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what

you think about this book—what you liked or may have disliked.

Reader feedback is important for us to develop titles that you really

get the most out of.

To send us general feedback, simply send an e-mail to

< feedback@packtpub.com> , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested

in either writing or contributing to a book, see our author guide on

www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a

number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you

have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit

http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our

content, mistakes do happen. If you find a mistake in one of our

books—maybe a mistake in the text or the code—we would be

grateful if you would report this to us. By doing so, you can save

other readers from frustration and help us improve subsequent

versions of this book. If you find any errata, please report them by

visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your

submission will be accepted and the errata will be uploaded on our

website, or added to any list of existing errata, under the Errata

section of that title. Any existing errata can be viewed by selecting

your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem

across all media. At Packt, we take the protection of our copyright

and licenses very seriously. If you come across any illegal copies of

our works, in any form, on the Internet, please provide us with the

location address or website name immediately so that we can

pursue a remedy.

Please contact us at < copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to

bring you valuable content.

Questions

You can contact us at < questions@packtpub.com> if you are having a problem with any aspect of the book, and we will do our best to

address it.

Chapter 1. Responsive

Elements and Media

In this chapter, you will learn about:

Resizing an image using percent width

Responsive images using the cookie and JavaScript

Making your video respond to your screen width

Resizing an image using media queries

Changing your navigation with media queries

Making a responsive padding based on size

Making a CSS3 button glow for a loading element

Introduction

The responsiveness website design and media is one of the most

exciting things to happen to web development since ASCII art

appeared on bulletin boards back when I was a school boy. The

new cool features of HTML5, CSS3, and jQuery have brought new

life to the old web in ways that have brought back the fun and really

gets the Web audiences excited for using your applications. This

chapter contains several recipes that will help you create

responsive HTML elements and different media.

Some recipes are easy and some are more challenging. All of the

code used for the responsive web design elements is provided

inside the book, therefore nothing inside will be impossible to

accomplish. Each and all of the responsive web design recipes will

help you optimize your website’s presentation to create an amazing

responsive web experience for your audience no matter what

device type or size you are using.

Resizing an image using

percent width

This method relies on client-side coding for resizing a large image.

It serves only one image to the client and asks it to render the

image according to the size of the browser’s window. This is usually

the preferable method when you are confident that the clients have

the bandwidth to download the image without causing the page to

load slowly.

Getting ready

First you will need an image. To find a high-quality image, use

Google Image Search. A search for robots, for example, the

search gives me 158,000,000 results, which is pretty good.

However, what I really want is a large image, so I click on Search

tools, and then click on Any Size, which I change to Large. I still have 4,960,000 images to choose from.

The image should be resized to match the largest scale viewable.

Open it in your image-editing software. If you don’t have an image-

editing software already, there are many free ones, go get one.

Gimp is a powerful image-editing software and it’s open source, or

free to download. Go to http://www.gimp.org to get this powerful open source image-editing software.

How to do it…

Once you have your image-editing software, open the image in it

and change the image’s width to 300px. Save your new image and

then move or upload the image to your web directory.

Your HTML should contain your image and some text to

demonstrate the responsive effect. If you do not have time to write

your life story, you can go back to the Internet and get some

sample text from an Ipsum generator. Go to http://www.lipsum.com

and generate a paragraph of Ipsum text.

<p class=”text”>Loremipsum dolor sit amet…</p>

<div class=”img-wrap” >

<img alt=”robots image” class=”responsive”

src=”robots.jpg” >

<p>Loremipsum dolor sit amet</p>

</div>

Your CSS should include a class for your paragraph and one for

your image and an image wrapper. Float the paragraph to the left

and give it a width of 60%, and the image wrapper with a width of

40%.

p.text {

float:left;

width:60%;

}

div.img-wrap{

float:right;

width:40%;

}

This creates a fluid layout, but does not yet do anything to create a

responsive image. The image will stay at a static width of 300px

until you add the following CSS. Then, add a new class to the CSS

for the image. Assign it a max-width value of 100%. This allows the

width to adjust to the browser width changes. Next, add a dynamic

height property to the class.

img.responsive {

max-width: 100%;

height: auto;

}

This creates an image that responds to the browser window’s width

with an optimized version of that image for the audience.

Tip

Downloading the example code

You can download the example code files for all Packt books

you have purchased from your account at

http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

How it works…

The responsive property of the image CSS forces it to take 100

percent of its parent element. When the parent element’s width

changes, the image changes to fill in that width. The height: auto

property acts to preserve the aspect ratio of the image.

See also

The Responsive images using the cookie and JavaScript

recipe

The Making a responsive padding based on size recipe

Responsive images using the

cookie and JavaScript

A responsive image’s width can be delivered through complicated

server logic. Sometimes because of the requirements you cannot

achieve the desired results through the easiest method. The

percent-width method relies on the client side for image resizing of

a large image file. This method provides a server-side delivery of

the properly sized image you request. It may reduce the server

load and bandwidth and help you with long loading, if you are

concerned with slow loading affecting the performance of your

website.

Getting ready

These methods require your server to perform some sort of logic

function on it. Firstly, it requires PHP on your server. It also

requires you to create three different sized versions of the image

and serve them to the client as requested.

How to do it…

The JavaScript is simple. It creates a cookie based on your device’s

screen dimensions. When the client makes a request to the server

for an image, it fires the PHP code to deliver the appropriate image.

<script >

document.cookie = “screen_dimensions=” +

screen.width + “x” + screen.height;

</script>

Now, on your server, create an images folder in the web directory

and create a PHP file (index.php) with the following code in it:

<?php

$screen_w = 0;

$screen_h = 0;

$img = $_SERVER[‘QUERY_STRING’];

if (file_exists($img)) {

// Get screen dimensions from the cookie

if (isset($_COOKIE[‘screen_dimensions’])) {

$screen = explode(‘x’,

$_COOKIE[‘screen_dimensions’]);

if (count($screen)==2) {

$screen_w = intval($screen[0]);

$screen_h = intval($screen[1]);

}

}

if ($screen_width> 0) {

$theExt = pathinfo($img,

PATHINFO_EXTENSION);

// for Low resolution screen

if ($screen_width>= 1024) {

$output = substr_replace($img, ‘-med’, –

strlen($theExt)-1,

}

// for Medium resolution screen

else if ($screen_width<= 800) {

$output = substr_replace($img, ‘-low’, –

strlen($theExt)-1, 0);

}

// check if file exists

if (isset($output) &&file_exists($output))

{

$img = $output;

}

}

// return the image file;

readfile($img);

}

?>

Now with your image-editing software, open your large image and

create two smaller versions of it. If the original version is 300px,

then make the next two copies 200px and 100px. Then, name them

robot.png, robot-med.png, and robot-low.png respectively. Upload

these three images into the images folder.

Last, but not least, put the following HTML file in your server’s

document root:

<!doctype html>

<html>

<head>

<title>Responsive Images</title>

<meta charset=”utf-8″>

<script>

document.cookie = “device_dimensions=” +

screen.width + “x” + screen.height;

</script>

</head>

<body>

<img alt=”robot image”

src=”images/index.php?robot.png”>

</body>

</html>

You can see the recipe in action in the following screenshot:

While this method is limited to delivering a specific image for each

screen size, and is not fluidly dynamic, it does provide the same

functionality on the server side as a CSS media query. You can

style the served image with CSS or animate it with JavaScript. It

can be used with a combination of methods to provide responsive

content.

The code for this recipe was originally created by the clever folks at

http://www.html.it/articoli/responsive-images-con-i-cookie/.

How it works…

The HTML file first creates a cookie describing your device’s screen

dimensions. When the image element calls the PHP file it works like

an include statement in PHP. The PHP file first checks for the file

to exist, then reads the cookie for the screen width, and delivers

the appropriate-sized version of the image.

Making your video respond to

your screen width

The streaming of video can also be responsive. You can easily

embed an HTML5 video in your page and make it responsive. The

video tag easily supports using a percent width. However, it

requires that you have the video source on your website’s host. If

you have this available, this is easy.

<style>

video {

max-width: 100%;

height: auto;

}

</style>

<video width=”320″ height=”240″

controls=”controls”>

<source src=”movie.mp4″ type=”video/mp4″>

<source src=”movie.ogg” type=”video/ogg”>

Your browser does not support the video

tag.

</video>

However, using a video-hosting site, such as YouTube or Vimeo,

has many advantages over hosting it yourself. First, there is the

bandwidth issue, you may have bandwidth or disk space limits on

your hosting server. Additionally, video-hosting sites make the

upload conversion to a usable web video surprisingly easy,

compared to using only your own resources.

Getting ready

The video-hosting sites allow you to embed an iFrame or object

code snippet in your page to stream the video on your site. This

won’t work inside the video tag. So, to make it responsive, there is

a more complex, but still easy method.

How to do it…

Wrap the video-source snippet in an HTML containing the div

element and give it a 50 to 60 percent padding on the bottom and

relative positions. Then give its child element, the video iFrame

object, a 100% width and 100% height, and an absolute position. This

makes the iFrame object completely fill in the parent element.

The following is the HTML code that uses an iframe tag to get a

video from Vimeo:

<div class=”video-wrap”>

<iframe

src=”http://player.vimeo.com/video/52948373?

badge=0″ width = “800” height= “450”

frameborder=”0″></iframe>

</div>

The following is the HTML code using the older YouTube object with

markup:

<div class=”video-wrap”>

<object width=”800″ height=”450″>

<param name=”movie”

value=”http://www.youtube.com/v/b803LeMGkCA?

version=3&amp;hl=en_US”>

</param>

<param name=”allowFullScreen”

value=”true”></param>

<param name=”allowscriptaccess”

value=”always”></param>

<embed

src=”http://www.youtube.com/v/b803LeMGkCA?

version=3&amp;hl=en_US” type=”application/x-

shockwave-flash” width=”560″ height=”315″

allowscriptaccess=”always”

allowfullscreen=”true”>

</embed>

</object>

</div>

Both video types use the same CSS:

.video-wrap {

position:relative;

padding-bottom: 55%;

padding-top: 30px;

height: 0;

overflow:hidden;

}

.video-wrap iframe,

.video-wrap object,

.video-wrap embed {

position:absolute;

top:0;

width:100%;

height:100%;

}

You might not want the video to take up the entire width of the

page. In this case, you can limit the width of the video using width

and max-width. Then, wrap the video-wrap element with the

another div element and assign a fixed width value and max-

width:100%.

<div class=”video-outer-wrap”>

<div class=”video-wrap”>

<iframe

src=”http://player.vimeo.com/video/6284199?

title=0&byline=0&portrait=0″ width=”800″

height=”450″ frameborder=”0″>

</iframe>

</div>

</div>

.video-outer-wrap {

width: 500px;

max-width:100%;

}

This recipe will work on all modern browsers.

How it works…

This method is called Intrinsic Ratios for Videos, created by Thierry

Koblentz on A List Apart. You wrap the video inside an element that

has an intrinsic aspect ratio, and then give the video an absolute

position. This locks the aspect ratio, while allowing the size to be

fluid.

Resizing an image using media

queries

The media query is another useful and highly customizable method

for responsive images. This is different than responsive fluid width

achieved by the percent-width method. Your design may require

some specific image widths for different screen size ranges and a

fluid width would break your design.

Getting ready

This method only requires one image, and makes the client’s

browser resize the image instead of the server.

How to do it…

The HTML code is simple, using the standard image tag, create an

image element, as follows:

<img alt=”robot image” src=”robot.png”>

To start with a simple version, create a media query that will detect

the browser window’s size and deliver a larger image for browser

screens larger than 1024px, and a smaller image for smaller

browser windows. First the media query, it looks for the media type

screen, and then the screen size. When the media query is

satisfied the browser will render the CSS inside the brackets.

@media screen and ( max-width: 1024px ) {…}

@media screen and ( min-width: 1025px ) {…}

Now, add a class to your image tag. The class will respond

differently in different media queries, as shown in the following code

line:

<img alt=”robot image” src=”robot.png”

class=”responsive”/>

Adding the CSS class to each media query with a different size will

make the browser render the desired image size to each differently

sized browser window. The media query can coexist with other CSS

classes. Then, outside of the media queries, add a CSS class for

the image with height:auto. This will work for both media queries

with only adding one line of CSS.

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

img.responsive { width: 200px; }

}

@media screen and ( min-width: 1025px) {

img.responsive { width: 300px;}

}

img.responsive { height: auto; }

To make the image respond to multiple ranges you can combine

the max-width and min-width media queries. To specify an image

size for browser windows, sized between 1024px and 1280px, add a

media query for screen, 1024px as min-width, and 1280px as max-

width.

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

img.responsive { width: 200px; }

}

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

max-width: 1280px ) {

img.responsive { width: 300px; }

}

@media screen and ( min-width: 1081px ) {

img.responsive { width: 400px; }

}

img.responsive { height: auto; }

You can specify many different image sizes for many different

browser window sizes with the media query method.

How it works…

The media query of CSS3 gives your CSS logical conditions based

on the browser’s viewport properties, and can render different

styles based on the browser’s window properties. This recipe takes

advantage of this by setting a different image width for many

different browser’s window sizes. Thus delivering a responsive

image size, you can control with a high degree of granularity.

Changing your navigation with

media queries

The media query can do more than just resizing images. You can

use the media query to deliver a much more dynamic web page to

your viewers. You can display a responsive menu based on

different screen sizes using media queries.

Getting ready

To make a responsive menu system, using two different menus we

will display a dynamic menu for three different browser window

sizes.

How to do it…

For the smaller browser windows, and especially for mobile devices

and tablets, create a simple select menu that only takes up a small

amount of vertical space. This menu uses an HTML form element

for the navigation options that fires a JavaScript code to load the

new page on selection.

<div class=”small-menu”>

<form>

<select name=”URL”

onchange=”window.location.href=this.form.URL.op

tions[this.form.URL.selectedIndex].value”>

<option value=”blog.html”>My

Blog</option>

<option value=”home.html”>My Home

Page</option>

<option value=”tutorials.html”>My

Tutorials</option>

</select>

<form>

</div>

For the larger browser window sizes, create a simple ul list element

that can be styled through CSS. This menu will receive a different

layout and look from the different media queries. This menu is

added to the same page following the select menu:

<div class=”large-menu”>

<ul>

<li>

<a href=”blog.html”>My Blog</a>

</li>

<li>

<a href=”home.html”>My Home

Page</a>

</li>

<li>

<a href=”tutorials.html”>My

Tutorials</a>

</li>

</ul>

</div>

To make the menu responsive, create a media query for the target

browser window sizes. For browser windows smaller than 800px,

the CSS will display only the select form inside the div element

with the small-menu class, for all larger browser windows, the CSS

will display the ul list inside the div element with the large-menu

class. This creates an effect where the page will shift between

menus when the browser window crosses width of 801px.

@media screen and ( max-width: 800px ) {

.small-menu { display:inline; }

.large-menu { display:none; }

}

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

max-width: 1024px ) {

.small-menu { display:none; }.

.large-menu { display:inline; }

}

@media screen and ( min-width: 1025px ) {

.small-menu { display:none; }

.large-menu { display:inline; }

}

For the larger screen sizes, you can use the same ul list and use

the media query even further to deliver a different menu by simply

switching out the CSS and using the same HTML.

For the medium-sized menu, use CSS to display the list items as a

horizontal list, as shown in the following code snippet:

.large-menu ul{

list-style-type:none;

}

.large-menu ul li {

display:inline;

}

This turns the list into a horizontal list. We want this version of the

navigation to appear on the medium-sized browser windows. Place

it inside the media query ranging between 801px and 1024px, as

shown in the following code snippet:

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

(max-width: 1024px ) {

.small-menu {

display:none;

}

.large-menu {

display:inline;

}

.large-menu ul {

list-style-type:none;

}

.large-menu ul li {

display:inline;

}

}

@media screen and (min-width: 1025px ) {

.small-menu {

display:none;

}

.large-menu {

display:inline;

}

}

To further utilize the responsive navigation elements in the best

way possible, we want the menu list version to move to a different

layout location when the screen’s width changes. For the middle

width, 801px to 1024px, the menu stays on top of the page and has

a 100% width. When the screen is wider than 1025px, the menu will

float to the left-hand side of its parent element. Add to the 801px to

1024px media query a 100% width to the large-menu class, and to

the 1025px media query, add a 20% width and a float:left value to

the large-menu class.

To fill out the page we will also add a paragraph of text wrapped in

a div element. You can go back to the Lorem Ipsum text generator

to create filler text (http://lipsum.com/). In the medium-width media query give the element containing the paragraph a 100% width. In

the largest media query, give the element containing the paragraph

a width of 80% and float it to the right-hand side of its parent

element.

<div class=”small-menu”>

<form>

<select name=”URL”

onchange=”window.location.href=this.form.URL.op

tions[this.form.URL.selectedIndex].value”>

<option value=”blog.html”>My

Blog</option>

<option value=”home.html”>My Home

Page</option>

<option value=”tutorials.html”>My

Tutorials</option>

</select>

<form>

</div>

<div class=”large-menu”>

<ul>

<li>

<a href=”blog.html”>My Blog</a>

</li>

<li>

<a href=”home.html”>My Home

Page</a>

</li>

<li>

<a href=”tutorials.html”>My

Tutorials</a>

</li>

</ul>

</div>

<div class=”content”>

<p>Loremipsum dolor sitamet,

consecteturadipiscingelit…</p>

</div>

And your style should look as shown in following code snippet:

<style>

@media screen and ( max-width: 800px ) {

@media screen and ( max-width: 800px ) {

.small-menu {

display: inline;

}

.large-menu {

display: none;

}

}

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

max-width: 1024px ) {

.small-menu {

display: none;

}

.large-menu {

display:inline;

width: 100%;

}

.large-menu ul {

list-style-type: none;

}

.large-menu ul li {

display: inline;

}

.content: {

width: 100%;

}

}

@media screen and ( min-width: 1025px ) {

.small-menu {

display: none;

}

.large-menu {

display: inline;

float: left;

width: 20%;

}

.content{

float: right;

width: 80%;

}

}

</style>

The final result is a page with three different versions of the

navigation. Your audience will be amazed when given an optimized

version of the menu for each particular browser window size. You

can see the navigation elements in all their glory in the following

screenshot:

How it works…

Each version of the navigation utilizes the media query CSS3

property to maximize the space available for the menu and the

content. In the smallest window, below 1024px, the navigation is

packed neatly inside a select form element. The medium window,

ranging from 1025px to 1280px, the navigation is inline and spans

across the top of the page, and is followed by the content. Finally,

in the widest browser widths, the menu floats on the left-hand side

and takes only 20 percent of the horizontal screen space, while the

content is maximized on the remaining 80 percent (right-hand side)

of the wide-browser window. This technique requires more planning

and effort, but is well worth it to deliver the best possible viewing to

your audience.

Making a responsive padding

based on size

To complement a responsive width image element, relative padding

can be added. With a static width padding, the image padding may

appear too thick in smaller browser windows and overcrowd any

other elements nearby, or may push the image off the screen.

Getting ready

A good place to start is with some understanding of the calculation

of the box model properties. The total width an object takes is its

actual width plus its padding, border, and margin on both sides, or

2 x (margin + border + padding) + content = total width.

How to do it…

For an image that is 200px wide in its normal non-responsive state,

your typical padding may be 8px, therefore using the previous box

model, the formula can be framed as follows:

2 x ( 0 + 0 + 8px ) + 200px = 216px

To find the percentage of padding, divide the padding by the total

width, 8 / 216 = 0.037% rounded to 4%.

We created this CSS and HTML earlier when we created the

responsive percent-width image. Add to the image class a padding

of 4%.

<style>

p.text {

float: left;

width: 60%;

}

div.img-wrap{

float: right;

margin: 0px;

width: 38%;

}

img.responsive {

max-width: 100%;

height: auto;

padding: 4%;

}

</style>

<p class=”text”>ipsum dolor sit amet,

consecteturadi…</p>

<div class=”img-wrap”>

<img alt=”robot image” class=”responsive”

src=”robot.png”>

<p>ipsum dolor sit amet,

consecteturadipiscingelit…</p>

</div>

To help you see the actual padding width change as you change

the browser window’s size, add a background color (background-

color: #cccccc;) to your image CSS.

How it works…

The image padding set at 100 percent will stick to the edge of its

parent element. As the parent element size changes, the image

padding adjusts accordingly. If you have done your box model math

properly, your layout will successfully respond to your browser

window’s changing width.

Making a CSS3 button glow for

a loading element

Your website, like many others, may cater to impatient people. If

your site has a submitable form, your users may find themselves

clicking the “submit” button a number of times impatiently if your page does not load the new content quick enough. This can be a

problem when it causes multiple form submissions with the same

data.

Getting ready

You can stop this behavior by adding some simple visual cues that

tell the user something is happening behind the scenes and to be a

little patient. If it’s a little bit flashy, it might even bring a little

sunshine into their otherwise hurried lives. This recipe does not

require any images, we are going to create a handsome gradient

submit button using CSS only. You may want to pause and go get a

cup of coffee, as this is the longest recipe in this chapter.

How to do it…

You can start by creating a form with some text boxes and a submit

button. Then, make the form really cool, use the HTML5

placeholder property for the label. Even with the placeholders, the

form is pretty boring.

Note that this is not yet supported in Internet Explorer 9.

<h1>My Form<h1>

<form>

<ul>

<li>

<input type=”text” placeholder=”Enter

your first name”/>

</li>

<li>

<input type=”text” placeholder=”Enter

your last name”/>

</li>

</ul>

<input type=”submit” name=”Submit”

value=”Submit”>

</form>

By adding CSS properties we can start giving the button some life:

input[type=”submit”] {

color: white;

padding: 5px;

width: 68px;

height: 28px;

border-radius: 5px;

border: 1px;

font-weight: bold;

border: 1px groove #7A7A7A;

}

This is illustrated in the following screenshot:

The button can become even more shiny when we add a CSS3

gradient effect. To accomplish this, there must be a different line of

CSS for each browser rendering engine: Opera, Internet Explorer,

WebKit (Chrome and Safari), and Firefox. You can add as many

gradient shifts as you like, simply by adding a color phase and the

% location from the top, each shift separated by a comma, as

shown in the following code snippet:

<style>

input[type=”submit”] {

background: -moz-linear-gradient(top,

#0F97FF 0%, #97D2FF 8%,#0076D1 62%, #0076D1

63%, #005494 100%);

background: -webkit-gradient(linear, left

top, left bottom, color-stop(0%,#0F97FF),

color-stop(8%,#97D2FF)color-stop(50%,#0076D1),

color-stop(51%,#0076D1), color-

stop(100%,#005494));

background: -webkit-linear-gradient(top,

#0F97FF 0%,#97D2FF 8%,#0076D1 62%,#0076D1

63%,#005494 100%);

background: -o-linear-gradient(top,

#0F97FF 0%,#97D2FF 8%,#0076D1 62%,#0076D1

63%,#005494 100%);

background: -ms-linear-gradient(top,

#0F97FF 0%,#97D2FF 8%,#0076D1 62%,#0076D1

63%,#005494 100%);

background: linear-gradient(to bottom,

#0F97FF 0%,#97D2FF 8%,#0076D1 62%,#0076D1

63%,#005494 100%);filter:

progid:DXImageTransform.Microsoft.gradient(

startColorstr=’#0f97ff’,

endColorstr=’#005494′,GradientType=0 );

}

</style>

 

As a Cookbook, we are targeting existing developers who need to pick and choose specific recipes in order to help their websites become accessible (and usable) regardless of screen size, device, or browser. HTML5 and CSS3 Responsive Web Design Cookbook, for all of today’s wireless Internet devices, is for web developers seeking innovative techniques that deliver fast, intuitive interfacing for the latest mobile Internet devices.


Related posts

New Horizons for Second-Order Cybernetics: 60 (Series on Knots and Everything) by Stuart A Umpleby, PDF
Swift Cookbook: Everything you always wanted to know about Swift, but were afraid to ask (for) by Yanis Zafiropulos, PDF 1520869088
Geomatic Approaches for Modeling Land Change Scenarios (Lecture Notes in Geoinformation and Cartography) by Francisco Escobar, PDF
Cult of Analytics: Data analytics for marketing by Steve Jackson, PDF 1138837997
Joshua Tree: The Complete Guide: Joshua Tree National Park (Color Travel Guide) by James Kaiser, PDF 1940754208
PhoneGap 4 Mobile Application Development by David Phillips, PDF 1979605556

Leave a Reply

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