Responsive Web Design for Mobile Phones, IPads and Tablets

Responsive Web Design uses a fluid grid design and CSS3 media queries (the @media rule) that adjusts to screen and monitor widths as needed for the best visual presentation of data.

Our company designs responsive websites, and mobile applications for clients. We host the sites on either our client’s choice of server provider or if our client wishes, we help them choose the hosting service that best fits their individual needs and budget. If you need assistance, please contact us by email or use the custom quote form.

Mobile websites and applications are the future of web design. IPads, tablets and phones are increasing in numbers and their use over the past 5 years has skyrocketed. It does not seem to be slowing down and in order to keep up, every website needs to be ready to handle the hundreds of different phone and tablet screen sizes.

Websites being designed today should include new technology that automatically responds to the user’s screen size. This gets rid of the need for an individual re-design for each new phone, tablet or monitor on the market. It would be nearly impossible to keep up with every individual screen size today, and the numbers are only increasing as time goes on.

How do you make a responsive website?

Honestly, creating a responsive web design is not that difficult. There are hundreds of free resources and tutorials on the internet that can help make it extremely easy. The primary thing to understand is the @media rules and also CSS width settings. Using a min-width, a % based width, and float settings, the gridded web design can stack and flow with the individual user’s screen size.

As an example.

Consider a div element with the following style:
“width: 50%; min-width: 240px; float: left; padding: 10px;”

The div element with the CSS setting above will automatically respond to a screen size if the overall site width is also set up with responsive settings. The div element not get smaller than 240px and will not be more than 50% of the container. The float setting and padding can be adjusted as needed

@media CSS3

CSS3 includes new media features, such as min and max-width, device-width, orientation, color and more. As new devices come to market they will definitely support media features. Using a media query to target devices is ignored if a device that does not support CSS3 is used.

An example of html5 head code to use CSS3 media query:

<head>

<meta id=”view” name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=9″ />

<link href=”includes/stylesheet.css” rel=”stylesheet” type=”text/css” /> <link href=”includes/screen_small.css” rel=”stylesheet” media=”only screen and (min-width:50px) and (max-width:550px)” type=”text/css” /> <link href=”includes/screen_medium.css” rel=”stylesheet” media=”only screen and (min-width:551px) and (max-width:800px)” type=”text/css” />

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<link rel=”stylesheet” type=”text/css” href=”includes/stylesheet_ie.css” />
<![endif]–>

<script type=”text/javascript” src=”includes/jquery-1.6.min.js”></script>
</head>

In this code are the two lines:

<link href=”includes/screen_small.css” rel=”stylesheet” media=”only screen and (min-width:50px) and (max-width:550px)” type=”text/css” /></code>

<link href=”includes/screen_medium.css” rel=”stylesheet” media=”only screen and (min-width:551px) and (max-width:800px)” type=”text/css” />

These two lines, with the line “<meta id=”view” name=”viewport” content=”width=device-width, initial-scale=1.0″ />” are used to make responsive designs possible for a very wide range of device types. The first of the 3 lines resets the browser’s default wide screen settings the next two lines then adjust the settings based on the media being used.

CSS3 media query

CSS3 media query is the backbone of responsive design. It is similar to using if conditions and the media query tells the browser about how it should render a page for device’s viewport width.

For this site, the CSS files include two seperate files, one for standard screens, and the other for mobile:

<link id=”weaverii-main-style-sheet-css” href=”http://anebula.com/wp-content/themes/weaver-ii-pro/style.min.css?ver=2.0.1″ rel=”stylesheet” media=”all” type=”text/css” /> <link id=”weaverii-mobile-style-sheet-css” href=”http://anebula.com/wp-content/themes/weaver-ii-pro/style-mobile.min.css?ver=2.0.1″ rel=”stylesheet” media=”all” type=”text/css” />

These two lines, along with some javascript is how Bruce Wampler created his amazing WordPress theme, Weaver II that is mobile responsive out of the box.  In the CSS files are numerous @media calls that make creating a responsive WordPress site relatively easy.

While there are thousands of responsive HTML5 templates and WordPress themes available, you may want to start with a simple HTML5 responsive site to learn from.

You can download a great starter set of files to play with by clicking below:

http://download.macromedia.com/pub/developer/html5/template_13.zip

Comments are closed.