Responsive Design with Media Queries

Exclusive offer: get 50% off this eBook here
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile — Save 50%

Harness the cutting-edge features of Dreamweaver for mobile and web development with this book and ebook.

$26.99    $13.50
by David Karlins | June 2013 | Web Development

It is a multimedia world. People experience and interact with web content with a variety of media, ranging from large-screen projections of websites to hand-held devices. This presents specific challenges for web designers.

One of those challenges revolves around designing pages that are accessible, inviting, and functional at highly varying sizes. A page with centered content, sidebars on the left and the right, and text flowing around images may be inviting on a laptop, but a jumbled mess on an iPhone.

With the advent of HTML5 and CSS3, it is possible to design pages that detect the size of a viewing device (the viewport), and to present unique page layouts customized for that device. So, for example, you can create three alternative views of a page—one for smart phones, one for tablets, and one for full-sized monitors. The approach is referred to as responsive design. The CSS3 technique for implementing it is a Media Query.

In this article by David Karlins the author of Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile, we'll learn to design pages in Dreamweaver that detect media viewports using Dreamweaver-generated Media Queries, and present appropriate page designs tailored to the visitor's viewing environment.

While doing that, we will:

  • Use Dreamweaver's Multiscreen Preview window to preview how sites will look in different viewports

  • Customize Multiscreen Preview for specific devices

  • Create multiple styles for differently sized viewing devices with Dreamweaver's Media Queries

(For more resources related to this topic, see here.)

Web design for a multimedia web world

As noted in the introduction to this article, recent times have seen an explosion in the variety of media through which people interact with websites, particularly the way smart phones and tablets are defining the browsing experience more and more. Moreover, as noted, a web page design that is appropriate may be necessary for a wide-screen experience but is often inappropriate, overly cluttered, or just plain dysfunctional on a tiny screen.

The solution is Media Queries—a new element of CSS stylesheets introduced with CSS3. But before we examine new media features in CSS3, it will be helpful to understand the basic evolutionary path that led to the development of CSS3 Media Queries. That background will be useful both in getting our heads around the concepts involved and because in the crazy Wild West state of browsing environments these days (with emerging and yet-unresolved standards conflicts), designing for the widest range of media requires combining new CSS3 Media Queries with older CSS Media detection tools. We'll see how this plays out in real life near the end of this article, when we examine particular challenges of creating Media Queries that can detect, for example, an Apple iPhone.

How Media Queries work

Let's look at an example. If you open the Boston Globe (newspaper) site (http://www.bostonglobe.com/) in a browser window the width of a laptop, you'll see a three-column page layout (go ahead, I'll wait while you check; or just take a look at the following example).

The three-column layout works well in laptops. But in a smaller viewport, the design adjusts to present content in two columns, as shown in the following screenshot:

The two-column layout is the same HTML page as the three-column layout. And the content of both pages (text, images, media, and so on) is the same. The crew at the Globe do not have to build a separate home page for tablets or smartphones. But a media query has linked a different CSS file that displays in narrower viewports.

A short history of Media Queries

Stepping back in time a bit, the current (pre-CSS3) version of CSS could already detect media, and enable different stylesheets depending on the media. Moreover, Dreamweaver CS6 (also CS5.5, CS5, and previous versions) provided very nice, intuitive support for these features.

The way this works in Dreamweaver is that when you click the Attach Style Sheet icon at the bottom of the CSS Styles panel (with a web page open in Dreamweaver's Document window), the Attach External Style Sheet dialog appears.

The Media popup in the dialog allows you to attach a stylesheet specifically designed for print, aural (to be read out loud by the reader software), Braille, handheld devices, and other "traditional" output options, as well as newer CSS3-based options. The handheld option, shown in the following screenshot, was available before CSS3:

So, to summarize the evolutionary path, detecting media and providing a custom style for that media is not new to HTML5 and its companion CSS3, and there is support for those features in Dreamweaver CS6. Detecting and synchronizing styles with defined media has been available in Dreamweaver.

However, what is relatively new is the ability to detect and supply defined stylesheets for specific screen sizes. And that new feature opens the door to new levels of customized page design for specific media.

HTML5, CSS3, and Media Queries

With HTML5 and CSS3, Media Queries have been expanded. We can now define all kinds of criteria for selecting a stylesheet to apply to a viewing environment, including orientation (whether or not a mobile phone, tablet, and so on, is held in the portrait [up-down] or landscape [sideways] view), whether the device displays color, the shape of the viewing area, and—of most value—the width and height of the viewing area.

All these options present a multitude of possibilities for creating custom stylesheets for different viewing environments. In fact they open up a ridiculously large array of possibilities. But for most designers, simply creating three appropriate stylesheets, one for laptop/desktop viewing, one for mobile phones, and one for tablets, is sufficient.

In order to define criteria for which stylesheet will display in an environment, HTML5 and CSS3 allow us to use if-then statements. So, for example, if we are assigning a stylesheet to tablets, we might specify that if the width of the viewing area is greater than that of a cell phone, but smaller than that of a laptop screen, we want the tablet stylesheet to be applied.

Styling for mobile devices and tablets

While a full exploration of the aesthetic dimensions of creating styles for different media is beyond the scope of our mission in this book, it is worth noting a few basic "dos and don'ts" vis-à-vis styling for mobile devices.

I'll be back with more detailed advice on mobile styling later in this article, but in a word, the challenge is: simplify. In general, this means applying many or all of the following adjustments to your pages:

  • Smaller margins

  • Larger (more readable) type

  • Much less complex backgrounds; no image backgrounds

  • No sidebars or floated content (content around which other content wraps)

  • Often, no containers that define page width

Design advice online: If you search for "css for mobile devices" online, you'll find thousands of articles with different perspectives and advice on designing web pages that can be easily accessed with handheld devices.

Media Queries versus jQuery Mobile and apps

Before moving to the technical dimension of building pages with responsive design using Media Queries, let me briefly compare and contrast media queries to the two other options available for displaying content differently for fullscreen and mobile devices.

One option is an app. Apps (short for applications) are full-blown computer programs created in a high-level programming language. Dreamweaver CS6 includes new tools to connect with and generate apps through the online PhoneGap resources.

The second option is a jQuery Mobile site. jQuery Mobile sites are based on JavaScript. But, as we'll see later in this book, you don't need to know JavaScript to build jQuery Mobile sites. The main difference between jQuery Mobile sites and Media Query sites with mobile-friendly designs is that jQuery Mobile sites require different content while Media Query sites simply repackage the same content with different stylesheets.

Which approach should you use, Media Queries or JavaScript? That is a judgment call. What I can advise here is that Media Queries provides the easiest way to create and maintain a mobile version of your site.

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile Harness the cutting-edge features of Dreamweaver for mobile and web development with this book and ebook.
Published: May 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Previewing with Multiscreen Preview

Dreamweaver's Multiscreen Preview provides an instant (if not precise) preview of how a web page will look in the three different viewing environments.

To view an open web page in Multiscreen Preview, go to View | Toolbars | Document, or go to Window | Multiscreen Preview from the Document window menu. When you do, the Multiscreen Preview window opens, with three views, as shown in the following screenshot:

Multiscreen Preview is a form of Live view. You can't edit content there, you can only preview how a page will look in a browser. You can, however—as we shall see—edit the stylesheets associated with each view, and observe the effect in Multiscreen Preview.

The three preset viewport sizes in the Multiscreen Preview window provide a pretty widely applicable set of screen sizes for previewing how an open page will look in a smartphone, a tablet, and on a desktop (or a full-sized laptop with a screen width of 1024 pixels or more). The width settings are a good, general way to preview how your page will look in different media.

On the other hand, if you are designing for a specific viewing environment, you can customize these settings. To do that, click on the Viewport Sizes button in the upper- right corner of the Multiscreen Preview window. That opens the Viewport Sizes dialog. You can change the width (and, in the case of phones and tablets, the height) of any of the three available views by changing the values in the Width or Height box, and clicking on OK.

The most useful adjustment you make in Viewport Sizes dialog might actually be the height of the Phone preview. By making that value a bit larger, you can get more of a sense of how pages will look in smartphones with longer viewing screens. In the following screenshot, the height of the Phone preview window is being changed to 480 pixels:

When you first preview a page, you will most probably not like the way it looks in the phone and tablet preview windows. At that point, you can do one of two things, as follows:

  • Elect not to worry about how the page looks and works in mobile devices, under the assumption that this mobile device thing is a passing fad that will soon go away

  • You can use Dreamweaver to generate a Media Query to present more inviting, accessible content in mobile devices

Assuming you chose the latter, let's move on to explore how to create stylesheets for phone and tablet display, and to apply these stylesheets in the appropriate environments.

Generating a Media Query in Dreamweaver CS6

There are a number of valid approaches and possible protocols you can use to generate the sets of styles for a Media Query in Dreamweaver CS6. Before walking through one that works well, let's survey what it is we're trying to accomplish.

Dreamweaver's tools for creating Media Queries in CS6 are a bit enhanced compared to those in Dreamweaver CS5.5; therefore, readers using older versions of Dreamweaver will find a few of the options we explore below unavailable.

Essentially, we need three sets of stylesheets—one for phones, one for tablets, and one for full-sized monitors. Because full-sized monitors are still, at this point, a "standard" in terms of how web content is viewed, and because the phone and tablet styles will likely have less complex styles, it makes sense to start by creating a stylesheet for a full-sized page.

In other words, the first step is to create a basic CSS stylesheet that works well with the page when it is opened in a full-sized desktop or laptop monitor. Then, variations on that page can be generated with simplified layouts that work on phones and tablets.

Building alternative stylesheets

As noted, from a style and accessibility perspective, it makes sense to start with a "full-sized" web page style and then build permutations of that style that work with phones and tablets.

There is also a technical reason to use that workflow. Keep in mind that all three CSS stylesheet files will be providing styling rules for the same page. That means all three alternative CSS files have to provide rules for the same set of HTML elements and tags.

For example, if a <div> tag defines a main container on a page, the stylesheets for all three media (phone, tablet, and desktop) have to define how that <div> tag should appear. The rules for the phone CSS might include a narrower width, a simpler background color, and other attributes. But, the point is that all three stylesheets will have rules for this main container div tag. And that must be the case for all the layout elements, whether HTML5 layout elements, <div> tags, or some combination of the two.

Preparing to generate a Media Query

One effective protocol for preparing to generate a Media Query is to have three CSS files ready to assign to different media.

A simple protocol for doing that is as follows:

  1. Create a basic CSS file for your page that works for desktop- or laptop-sized monitors. If you are generating pages from Dreamweaver CS6's HTML5 layouts, you can use the CSS file that comes with the respective layout as this "main" layout.

  2. Save the "main" CSS file with a filename such as full-size.css and then resave it twice with two different filenames (such as tablet.css and smartphone.css), creating three identical stylesheets. Alternately, if you only want to provide two options (and let tablet users see the full-size styles), just save two versions of the CSS file—full-size.css and smartphone.css.

  3. With the alternative stylesheets saved, you can customize them right in the Multiscreen Preview menu.

With three alternative CSS files available for assignment and editing, you're ready to define Media Queries. We'll walk through that process next.

Assigning styles to different media

The best way to avail oneself of Dreamweaver's tools for building Media Queries is to work in the Multiscreen Preview mode. Remember, this means we will not be editing content as we adjust styles. But that constraint is something we can definitely live with, and in fact, as a general approach, adjusting content and style should be thought of and approached as distinct processes.

So, our scenario is that we've opened Multiscreen Preview for an open web page. And we have at the ready three different CSS files—the ones discussed in the "3-step" protocol identified just a bit earlier in this article.

With at least two CSS files saved as part of your Dreamweaver site, and with a web page open in Multiscreen Preview, follow these steps to define custom styles for each view:

  1. Click on the Media Queries button to open the Media Queries dialog.

  2. In the Write Media Queries To area, choose the This Document option. The Site-Wide Media Query File alternative is trickier; it involves Dreamweaver changing code in all your pages and is less reliable.

  3. Leave the Force Devices to Report Actual Width checkbox selected. This overcomes any confusion that can be caused when different devices define "pixels" in ways that distort their actual width. The initial selections in the Media Queries dialog should look like the following:

  4. Click on the + icon to add a stylesheet. The Properties area becomes active for that selected stylesheet:

    • In the Description field, enter text that describes the style (this is for your own benefit, not for public display).

    • In the Min Width field, enter a value that defines the narrowest viewport in which this style will display, wherever that is appropriate. If you are defining a CSS style for smartphones, you would not have any minimum width as that style would apply no matter how small the viewport.

    • In the Max Width field, enter a value that defines the narrowest viewport in which this style will display, wherever that is appropriate. If you are defining a CSS style for full-size browsers, you would not have any maximum width as that style would apply no matter how large the viewport.

    • Use the Select File icon in the CSS File area to navigate to and select a stylesheet file that will apply in viewports that meet the defined criteria, as shown in the following screenshot:

    •  

  5. Repeat step 4 to add additional stylesheets to the media query. All the associated styles will be listed as shown in the following screenshot:

  6. Click OK to close the Media Queries dialog, and see your media query applied in the Multiscreen Preview window as shown here:

  7. At any point, you can toggle in or out of Multiscreen Preview by choosing Multiscreen Preview from the Window menu.

Formatting CSS files for Media Queries

With a Media Query defined for a web page, we can interactively create and adjust the styles for each targeted browsing environment. To do that, re-open the Multiscreen Preview for the page.

"Wait!", you might exclaim, "how can I edit the page in Multiscreen Preview when that window functions like Live view in the Document window—locking out any content editing?". A thoughtful concern, but here we will be only editing the CSS styles, not the page content. And that we can do in Multiscreen Preview.

To edit styles in Multiscreen Preview, view the CSS Styles panel (Window | CSS Styles). The attached styles, along with the parenthetical notes that help us remember which style is which, appear in the top-half of the CSS Styles panel.

You can expand any of those styles by clicking the triangle next to the style's name in the top-half of the CSS Styles panel. In the following screenshot, the mobile.css style is expanded. And clicking on a style rule within the style (in this case, the font parameter of the body tag style) reveals the parameters for that style in the bottom- half of the CSS Styles panel.

Adjusting CSS for Mobile

As pointed out earlier, the art of designing styles for mobile devices is, well, an art. And, as suggested earlier, there are tons of online resources opining and advising on what to include in phone and tablet styles. But before highlighting a few widely agreed-on elements of mobile-device styling, it is important to issue a warning: don't delete style rules from any of your stylesheet files.

Our protocol for creating the three alternative stylesheets for a Media Query started with one stylesheet, from which we created two copies. Those stylesheets "came into the world" with identical sets of style rules.

It is fine and necessary to change the parameters of those style rules. You can have different formatting for containers, text, backgrounds, and so on, in your phone style than you have in your tablet style. No problem. But keep in mind that all three of your styles have to mesh with the same HTML file, with the same CSS style names used to define formatting and layout tags and elements.

As for styling mobile devices, the following techniques are widely applicable:

  • Keep the type large.

  • Keep links easy to find. Underlined links are passé in full-sized web pages, but helpful on cell phones.

  • Use nice large margins and/or padding in containers to make it easy for big stubby fingers to select tiny content on cell phone screens.

  • Avoid sidebars (don't use the float attribute).

  • Use visibility: hidden to hide non-essential elements in phone styles. In the following screenshot, visibility has been set to hidden for the header in the phone style, and the height of the header has been reduced to 1 pixel so as to create a thin line of spacing for aesthetic reasons and so it does not occupy precious space on a smart phone screen.

The following screenshot shows three stylesheets applied to the same page in Multiscreen Preview. The tablet view only required a few adjustments—basically reducing the widths of the layout elements (the main container, the sidebar, and the header). The phone stylesheet took more trial-and-error experimentation, including removing all float attributes and reducing the width of different elements. Different color schemes were applied to each stylesheet as well, with a very basic color scheme (black and white) applied to the cell phone style.

As they say in the commercials for weight-loss products, "your results may vary." Meaning, tweaking a stylesheet for a phone does require some trial and error. But again, the basic rule is: simpler. Eliminating floats (so no content appears in a second column) is usually the first step.

Defining a Media Query for smartphones

In this example, we'll walk through, step by step, how to use Dreamweaver's flexible and highly useful three-column HTML5 layout. We will create a Media Query to display this two-column content in a layout more appropriate for cell phones—without columns or sidebars.

As always, the starting assumption is that you are working in a Dreamweaver site . With a site defined, the following steps will produce a nice, appropriately minimalist layout for your page in a cell phone:

  1. Go to File | New. In the New Document dialog, select the Blank Page category. Choose HTML from the Page Type column, and choose the first HTML5 layout, 2 column fixed, centered, from the Layout column. In the New Document dialog, leave the Layout CSS pop-up selection at Create New File. Make sure there are no files selected in the Attach CSS File box (if there are, use the Trashcan icon to delete them). With these settings in place, click Create.

  2. The Save Style Sheet File As dialog opens. Change the saved stylesheet name to fullsize.css, and click Save to save the stylesheet to your site's folder.

  3. The web page opens in the Dreamweaver Document window. Let's make two edits to the content:

    • Delete the http://www.adobe.com/go/adc_css_layouts link. That link is inappropriately long, particularly for a cell phone. If (in real life) we wanted to link to a site with a long URL, we could assign the link to much shorter text by going to Insert | Hyperlink.

    • In the header area, type Full... or Mobile?.

  4. Go to File | Save to save the edited HTML page as 2_views.html.

  5. Next, we will create a CSS file to build from to display content in a mobile device. Go to File | New. In the New Document dialog, choose CSS from the Page Type list and click on the Create button. Go to File | Save, and save the new, blank CSS file as mobile.css. Copy and paste all the code in the original fullsize.css file into the new mobile.css file. We'll edit these styles next.

  6. Return to the 2_views.html page in the Document window. You can do that either by clicking on the file in the Files tab bar at the top of the Document window, or by using the Window menu.

  7. Go to Window | Multiscreen Preview; click on the Media Queries button in Multiscreen Preview to open the Media Queries dialog.

  8. For tablets and full-sized computers, for the sake of this example, we will simply display the already attached CSS file (fullsize.css). Click on the + icon to add a stylesheet. The Properties area becomes active for the new stylesheet:

    • In the Description field, enter Full Size.

    • In the Min Width field, enter 960. This style will only apply to viewports with a width of at least 960 pixels.

    • Leave the Max Width field blank. As we are defining a CSS style for full-sized browsers, we do not want to set a maximum width; this style will be applied no matter how wide the viewport.

    • Use the Select File icon in the CSS File area to navigate to and select the fullsize.css stylesheet file that will apply in viewports that meet the defined criteria.

  9. For smartphones, we will display the mobile.css file we created in the fifth step. Click on the + icon to add a stylesheet. The Properties area becomes active for the new stylesheet.

    • In the Description field, enter Mobile.

    • Leave the Min Width field blank. This style will apply to viewports with width less than 960 pixels.

    • In the Max Width field, enter 960. As we are defining a CSS style for mobile phones, we do not want this stylesheet to display in viewports wider than 960 pixels.

    • Use the Select File icon in the CSS File area to navigate to and select the mobile.css stylesheet file that will apply in viewports that meet the defined criteria.

  10. View the page layouts in Multiscreen Preview; the layout for the full screen viewport is not bad. But the page layout and colors won't work well in mobile devices. Let's make some adjustments in the mobile version of the page, as follows:

    • Change the font size for the body tag to 150%, providing larger text for mobile devices, as shown here:

    • We want to remove all width and float parameters in every style rule for our mobile style. Those width and float parameters create columns, and content that doesn't fill the entire width of the page, and make the display in a mobile phone inaccessible and uninviting. Go through each of the styles in the mobile.css stylesheet and click to left of every width or float parameter to convert that code to comments, as shown here:

    • Consider adjusting the color scheme to create a higher contrast between background and foreground colors, to make the page easier to read and navigate in different lighting conditions encountered by mobile phone users (including bright, outdoor, and sunlight). The following example shows higher contrast assigned to the navigation element:

  11. That's it! There's more tweaking we could do, but remember that when designing for mobile devices, less really is more. Exit Multiscreen Preview (go to Window | Multiscreen Preview to deselect this view). Save your page with changes to the CSS.

Surveying alternative approaches

In this article, we focused on creating media queries using Dreamweaver's Multiscreen Preview window and Media Queries dialog box.

Another approach to defining Media Queries is to create them within a single CSS file. The advantage of this approach is that styles for all viewports are in the same CSS file. The disadvantage is that this makes CSS files two, three, or even four (or more) times as long, bulky, and hard to edit. On the balance, I would argue that in most situations the approach we've taken so far is easier to manage, but since Dreamweaver includes a substantial template that uses the single-CSS file approach, let's survey how this works.

The syntax to define a Media Query within a CSS file is:

@media only screen and (value)

The value can include a max-width, a min-width, or both.

In this example, the background color for the body tag is yellow for viewports of 480 pixels or less, and green for viewports of 481 pixels or more:

@media only screen and (max-width: 480px) { body { background-color: yellow;} } @media only screen and (min-width: 481px) { body { background-color: green; } } }

As I pointed out, Dreamweaver CS6 includes a substantial and complex sample page that includes CSS files with Media Queries for multiple viewports within the same CSS files, and JavaScripting as well.

Again, Dreamweaver's Fluid Grid layout is one specific (and complex) sample, for example, of a Media Query using the technique of defining styles for multiple viewports within a single CSS file.

As with all Dreamweaver sample pages, you can use this page for education and inspiration; it is well documented (except for JavaScript). If you're interested in examining this sample, go to File | New Fluid Grid Layout and explore the options in the New Document dialog box for this page sample.

Summary

Older versions of HTML and CSS allowed for Media Queries to identify output devices including printers, Braille readers, and audio-reader devices. New additions in CSS3 allow Media Queries to detect screen size (in pixels) as well as other more esoteric properties of a browsing environment.

Dreamweaver CS6's Multiscreen preview and Media Queries dialog work together to preview and edit how the same HTML page content will display differently in a smart phone, a tablet, and a full-sized monitor.

Resources for Article :


Further resources on this subject:


Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile Harness the cutting-edge features of Dreamweaver for mobile and web development with this book and ebook.
Published: May 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


David Karlins

David Karlins is a web design consultant, teacher, and author of dozens of books on web design, including Building Websites All-in-One For Dummies, John Wiley & Sons Inc. (co-author with Doug Sahlin), Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, Peachpit, and Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery, Packt Publishing.

Books From Packt


Dreamweaver CS5.5 Mobile and Web Development   with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

RapidWeaver 5 Beginner's Guide
RapidWeaver 5 Beginner's Guide

ChronoForms 3.1 for Joomla! site Cookbook
ChronoForms 3.1 for Joomla! site Cookbook

jQuery Hotshot
jQuery Hotshot

Creating Mobile Apps with jQuery Mobile
Creating Mobile Apps with jQuery Mobile

jQuery Mobile Cookbook
jQuery Mobile Cookbook

jQuery Mobile First Look
jQuery Mobile First Look

jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software