Thursday, 30 June 2011

How To Use Media Queries For Device Targeting | Van SEO Design

How To Use Media Queries For Device Targeting | Van SEO Design


How To Use Media Queries For Device Targeting

Posted: 30 Jun 2011 05:30 AM PDT

Media queries are a way to serve different css rules to different devices and device characteristics. They’re the final piece in allowing us to create designs that are truly responsive to our audience and how our visitors choose to view our sites.

The last few weeks we’ve been building up toward responsive layouts, first by creating flexible girds and then by adding flexible images and media inside those grids. Today we’ll add media queries to the mix.

All of these posts rely heavily on the work of Ethan Marcotte and so before getting started I want to point you again to some of Ethan’s writing on the subject.

I highly recommend the last link above, which is Ethan’s new book on responsive design. If you buy the digital version (PDF, ePub, and mobi) it’ll only set you back $9, which will be money well spent.

Old mobile phones on a stack of advertisements

Media Types

As I mentioned above media queries are a way to serve different css based on device and device characteristics.

For example we can send certain css to a browser on a laptop open 1200px wide and send different css to a mobile browser open to 480px and a third set of css to a tv screen displaying at 1024px.

We’ve actually been using a part of media queries for years, namely media types so let’s been there.

The html below should look familiar to you. We use it all the time to include a css file in an html document.

 < link rel="stylesheet" type="text/css" href="core.css"  media="screen" / > 

Note the media=”screen” at the end. That’s a media type. You may have written a print specific stylesheet at some point for which you’d use media=”print”

There are a variety of other media types you could use beyond screen and print.

  • all — for all the media types below
  • braille — for braille tactile feedback devices
  • embossed — for paged braille printers
  • handheld — for handheld devices like mobile phones
  • print — for printed material
  • projection — for projected presentations
  • screen — for color computer screens
  • speech — for speech synthesizers
  • tty — for teletypes, terminals, and other devices with limited display capabilities
  • tv — for televisions and television like devices

Media types are useful, but they aren’t enough. Not every device lists itself properly and realistically what works on one handheld device or tv might not work on another.

Enter media queries.

Screen shot of Simon Collison's responsive design from MediaQueries.es

Media Queries

Building on top of media types the W3C added media queries. A simple media query looks like the following:

 @media screen and (max-width: 1200px) { 	css here&hellip } 

It begins with the media type (in this case screen) and is followed by the query as a feature: value pair. Here we’re targeting browsers with a max-width of 1200px

The type and the query are joined by the “and” operator. We’ll see in a bit that we can chain this operator to target very specific devices and characteristics

Above we started the media query with @media, but there are actually 3 ways to include media queries.

  • @media which is added in your css file — @media screen and (max-width: 1200px) {css here}
  • as part of html link element — < link rel="stylesheet" href="my-style.css" media="screen and (max-width: 1200px)" / >
  • @import in .css — @import url(“my-style.css”) screen and (max-width: 1200px)

The @media method is probably the most common and it has the advantage of keeping all your css in a single css file. It’s likely what you’ll use most often in practice.

There are a baker’s dozen media features you can use with media queries summarized in the table below.

Feature Definition Accepts min/max?
width width of display area/viewport yes
height height of display area/viewport yes
device-width width of device rendering surface yes
device-height height of device rendering surface yes
orientation portrait or landscape no
aspect-ratio ratio of display’s width to height (16:9, 4:3) yes
device-aspect-ratio ratio of device rendering surface width to height (16:9, 4:3) yes
color number of bits per color component of the output device yes
color-index number of entries in the color lookup table of the output device yes
monochrome number of bits per pixel in a monochrome frame buffer (0 for non-monochrome devices) yes
resolution resolution of the output device (pixel density; 72dpi, 300dpi) yes
scan progressive or scan for tv devices no
grid grid or bitmap (phone display with one fixed font; tty terminal) no

In the values above viewport is defined as the part of the screen/paper where the document is rendered and includes any scrollbar. The rendering surface defines the width of the screen.

Yeah, it’s confusing to me too. Typically though you’ll target the display area or viewport.

Chaining Media Queries

As I said above we can use the “and” operator to chain queries like so:

 @media screen and (max-width: 1200px) and (orientation: landscape) 

We can also use the “not” operator as in:

 @media not projection and (max-width: 1200px) 

to target devices other than projection with a max-with of 1200px. The “not” operator is evaluated last so the above is evaluated as:

 @media not ( projection and (max-width: 1200px) ) 

There’s no specific “or” operator, but can imply “or” by using a comma.

 @media screen and (min-width: 800px) and (orientation: landscape),   @media screen and (max-width: 1200px) 

The above would target both screens with a min-width of 800px in that are in landscape mode and screens with a max-width of 1200px.

The above queries aren’t necessarily those you would use in practice, but you can imagine how powerful and targeted this chaining can be.

A New Meta Tag

When Apple created mobile safari they also created a new meta tag attribute for it.

To display web pages mobile safari actually displays pages as they appear at 980px wide. It then shrinks down the page so it fits within the 320 x 480 display. The 980px is the viewport.

Other mobile browsers followed suit with the larger viewport and shrinking. We’d like things to be a little more consistent with the actual size of the device and fortunately we have the new meta tag.

 <meta name="viewport" content="width=320" /> 

Instead of setting an absolute viewport size we can be more flexible and set

 <meta name="viewport" content="initial-scale=1.0, width=device-width" /> 

The above basically sets the zoom level to 100%

Collage of browser logos

Browser Support

Browser support for media queries is generally good, though as is often the case IE took awhile to catch up. Media queries are available in IE9, but for anything below we need to do a little extra to get them work.

There are some javascript libraries Ethan recommends we use.

Both will add support for media queries to older browsers.

Why Use Media Queries

Even flexible layouts can bend or worse break. Flexible layouts can resize and accommodate a variety of width ranges, but they can still fail or simply look and work less than ideal above and below certain widths.

A different design might also be more effective on different devices. For example:

  • Using 3 columns on a widescreen browser, 2 columns on a tablet, and a single column on a mobile phone.
  • Displaying different content to different devices. Not all would agree with this idea.
  • Changing the proportions within a design as the size of the viewport changes.
  • Reining in line lengths as the browser is opened wider.
  • Adding or removing whitespace at different screen sizes.
  • Creating different visual hierarchies dependent on device and screen size.

A variety of conditions beyond the above could lead us to modify our designs based on any of the devices or features we can target.

In the simple case of screen width a good choice is to allow our designs to be flexible throughout a range or widths and then modify the design for different sets of widths.

Of course this begs the question what ranges of widths should we use? What breaking points should we set? I’ll leave the question hanging until next week when we talk more about developing a responsive design workflow.

iPad

Summary

Media Queries are a great way to target different devices and even better different characteristics of different devices. And the best part is they’re intuitive and relatively easy to use.

They take the form of media type and media query (as a feature: value pair) and through the ability to chain operators allow us to build powerful and highly targeted queries.

Through media queries we can set a variety of points over which our flexible layout might bend and serve different css to prevent those bends from breaking and causing problems for our visitors.

By combining flexible layouts and flexible images and other media with media queries we have the ability to create designs that respond to the many different ways our audience might access and view our sites.

Next week we’ll take a look at responsive design and talk generally about how we should think about building a responsive workflow.


Tuesday, 28 June 2011

iCan't Internet

iCan't Internet


iPhone vs BlackBerry

Posted: 27 Jun 2011 10:59 PM PDT

There are numerous companies trying to overtake Apple as the king of the Smartphone. One of the companies, BlackBerry, has been in the Smartphone scene for quite some time now but has been looked at...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]


Monday, 27 June 2011

23 Books About Design You Ought To Read | Van SEO Design

23 Books About Design You Ought To Read | Van SEO Design


23 Books About Design You Ought To Read

Posted: 27 Jun 2011 05:30 AM PDT

I often mention how I read a lot of books and how much of what you read here came to me via one design book or another. Perhaps just as often someone asks me which books I’ve read and would recommend. It’s about time I mentioned some of them.

Books on a bookshelf

I’ve been wanting to create a full book review section of the site where I could offer more complete reviews and provide as much detail as I can to help you decide. Since I haven’t yet gotten around to creating that section hopefully this post will suffice for now.

Note: Below each book are links to Amazon and Barnes & Noble. The B&N links are affiliate links so if you buy I’ll make a couple of bucks. There are no affiliate links to the books on Amazon.

In most cases the prices are about the same at each store, though in a few cases the books at Amazon are significantly cheaper. While I’ve linked to the paperback copies some of these books also have digital versions.

Design Basics

The two books below are good as an introduction to design. They’re the first 2 books I read on the subject before I considered becoming a designer.

The Non-Designers Design Book

The Non-Designers Design Book
by Robin Williams

Just like the title says. If you’re a non-designer this is the book for you. My series of posts on design basics comes entirely from what I learned reading it.

The information here won’t make you the world’s greatest designer, but it will introduce you to some basic design principles that will take you from amateur designer and place you on the path to becoming a professional.

Design Basics Index

Design Basic Index
by Jim Krause

Jim Krause wrote a series of books to give practical information to designers. They’re meant to be able to look things up quickly. He has books on choosing a color scheme or finding a typeface in addition to this one.

Design Basic Index is filled with exercises and quick tips about different principles of design. It’s more in-depth in what it covers than the Non-Designers Design Book and will give you a good foundation for some the books mentioned below

Usability

Both of the books below have become classics and each has a follow-up book on my future reading list.

Don't Make Me Think

Don’t Make Me Think
by Steve Krug

Perhaps the bible of usability for non-usability experts. It focuses on web design and everything follows from a premise of not making your visitors think more than they have to in order to complete tasks.

It’s a quick read packed with information and lots of screenshot examples. Much of what’s in the book has now become common sense usability practice.

The Design of Everyday Things

The Design of Everyday Things
by Donald Norman

This book is a little more in-depth about designing things to be usable. My series of posts on minimizing errors comes mainly from what’s written here.

Don Norman fills the book with plenty of real life stories of unusable and usable design that make the book enjoyable to read while sharing solid principles. After reading it you won’t look at ordinary objects quite the same way again.

Design Principles and Design Elements

Each of the books below focus on different design principles and/or working with design elements like lines and shapes. I’ve taken so many post ideas from the first book I couldn’t possibly list them all.

Universal Principles of Design

Universal Principles of Design
by William Lidwell, Kristina Holden, Jim Butler

This book is an attempt to begin a conversation about 125 different principles of design. Each principle is covered in a single page alongside a page of examples from the real world.

One of my favorite design books with all the different aspects it covers. The book isn’t about where to place a line or what shape to use to communicate something. Rather it deals with things like the psychology behind the attractiveness bias and Hick’s Law.

Design Elements: A Graphic Style Manual

Design Elements: A Graphic Style Manual
by Timothy Samara

Design Elements walks through the different elements at a designer’s disposal, like form and space, point, line, surface, and volume, and then looks at both type and imagery.

My series of posts on the elements of design comes mainly from this book. It’s a great book for gaining a solid foundation of the different elements of design and how to go about using them.

The Elements of Graphic Design

The Elements of Graphic Design
by Alex White

This is a shorter book, but one packed with information. It covers many of the same topics as Design Elements above. Alex White has a unique take on things so you get a different perspective on a number of topics.

I learned quite a bit about working with space as well as working compositional balance into a design. My 7 components of design series was inspired by this book.

Visual Language

These books on visual language are about what different visual elements communicate. The latter 2 look deeply at the subject and consider how we physically and psychologically see and perceive the objects around us.

Visual Grammar

Visual Grammar
by Christian Leborg

This is a concise book that categorizes different visual objects and how they interact with each other. As the title implies it’s an attempt to create a visual grammar for the basic visual objects we use and their interactions with each other and with us.

My post on visual grammar comes from this book and I often referred to it while working on the elements of design series mentioned above.

Visual Thinking for Design

Visual Thinking for Design
by Colin Ware

This is definitely not a quick read. It’s not a long book, but it gets very deep into things like how the eye works and how information is perceived and stored in memory.

There’s a good mix of theory and practical application on the subject of visual cognition.

This post on verbal and visual communication comes mainly from this book, with a little help from the one below.

Visual Language for Designers

Visual Language for Designers
by Connie Malamed

This book is similar to the one above in terms of subject. I think it was a little easier to read as it placed a little more focus on the practical.

I read both back to back so they mix a little in mind as to what was in each. Both are good reads if you’re interested in learning about how we react to our visual surroundings.

Both aim to help you visually communicate abstract ideas and messages.

This post on visual perception and memory comes from this book, with a little help from the one above.

Typography

I’ve mentioned a few times over the last year that I’ve been reading a lot about typography. The more I learn about type the more I realize how much more there is to know and how little I know the subject.

The Elements of Typographic Style

The Elements of Typographic Style
by Robert Bringhurst

This is the modern bible of typography. I’d bet it’s on the shelf of every designer who’s ever been interested in the subject. It’s probably the first book most buy about typography.

Bringhurst is a poet and the writing within shows that. The book is filled with practical information such as when and how to use things like em dashes and en dashes. It closes with brief discussions of many different typefaces and type designers.

Thinking with Type

Thinking with Type
by Ellen Lupton

Ellen Lupton’s book is divided into 3 sections, letter, text, and grid. Each section begins with an historical essay and then gets into more practical definitions of the subject.

The book is filled with visual examples of most everything discussed in the text, which helps to illustrate many of the principles.

Thinking in Type

Thinking in Type
by Alex White

Another book by Alex White. I bought this after enjoying the one mentioned above.

I like how Professor White comes at things from a different perspective at times giving me a new perspective in the process. For example this post on readability and legibility.

This is another book filled with visual examples illustrating all of the concepts discussed.

Detail in Typography

Detail in Typography
by Jost Hochuli

A very short book and yet one filled with so much information it’s a must read. I’m still not sure how it managed to fit so much in to so few pages.

It starts by looking at individual letters and works its way out to words, lines, linespacing, and the quality of type. Lots of information about micro-typography. This book really gets into the details.

Stop Stealing Sheep and Find out How Type Works

Stop Stealing Sheep and Find out How Type Works
by Erik Spiekermann and E.M. Ginger

Every time I’ve seen Erik in a video online I’ve learned so much and reading this book was no different. A great introduction to typography and a very enjoyable read.

I recently read it after reading many of the other books in this section, but it’s probably a good first book on typography along with Bringhurst. There are fun and interesting stories in its pages as well as some great practical details about using type.

The Fundamentals of Typography

The Fundamentals of Typography
by Gavin Ambrose and Paul Harris

One of the things I liked about this book was it’s first chapter which contains a walk through of type through history. Some of the other books here also cover typographic history, but I think this was first time it was connected for me along a timeline.

The rest of the topics are similar to many of the other books listed here. It likely works better as an introduction to typography than as a detailed text.

Typographic Design: Form and Communication

Typographic Design: Form and Communication
by Rob Carter, Ben Day, and Phillip Meggs

Another recent read for me. It also has a good historical perspective before jumping in to things like typographic anatomy, syntax, legibility, grids, and beyond.

There are plenty of topics discussed in the book. I also enjoyed the design of the book itself as well as many of the examples it uses. I think this is also one of those classic texts used in classrooms.

Usually when writing about typography (such as the 2 posts below) I draw from several of the above books as many discuss the same topics, each with its own details and perspective.

Grids

Building on typography is the typographic grid, something I’m still trying my best to learn.

The first 3 books below are similar, which makes sense as they’re from the same author. Each is really a walkthrough of some ideas on grids and geometry along with student solutions to exercise problems. Each contains vellum overlays to show how certain designs were constructed.

I’ve come across reviews where people thought all 3 were more style than substance. I have to admit that at times reading each part of me felt the same. However in the end I enjoyed and learned from all 3 books.

If it means anything I did buy all 3 and have read through each more than once.

Grid Systems

Grid Systems
by Kimberly Elam

This book introduces some exercises and then shows student solutions to those exercises. The idea of each is to place different shapes (rectangles and circles) on the page in interesting ways.

Some shapes are representative of lines of blocks of text. Solutions with actual text instead of their representative shapes are also shown.

Geometry of Design

Geometry of Design
by Kimberly Elam

This book discusses different geometric and mathematical systems like the golden ratio, for building grids.

It shows how to construct the different grid systems it discusses and shows them in practice in works of art and architecture. The idea is to help understand how different geometrical systems provide an aesthetic beauty to the works they’re used in.

Typographic Systems

Typographic Systems
by Kimberly Elam

This last once focuses on type, but I listed it here, because it deals with systems for organizing type on the page as opposed to typographic anatomy. Also it’s similar in form to the two other Kimberly Elam books above.

It works through 8 different systems for placing type on the page, including radial, grid, and modular systems.

One last word about this and the 2 books above. If you learn well through seeing abstract visuals you’ll probably like all 3. Each is less long text explanations and more quick intros with the visuals serving as the explanations.

Making and Breaking the Grid

Making and Breaking the Grid
by Timothy Samara

This book looks at designs that both use a grid and those that break out of it. I often pull it off the shelf just to look at the designs for inspiration. There are some absolutely beautiful examples inside.

Each of the two sections begins with a short intro followed by many examples of designs along with some explanation about how the design fits into a grid or breaks out of it. Each example also shows which grid is being used in the design.

The two post below were both taken directly from this book.

Basics Design: Grids

Basics Design: Grids
by Gavin Ambrose and Paul Harris

This book looks into different grid elements like baselines and columns as well as talking about different grid usage ideas. There are plenty of examples of grid based designs throughout.

I preferred Samara’s book to this one, but enjoyed both. The approach here is different than Making and Breaking the Grid. There are some different topics covered and it also has some great examples of grid based design.

rdering Disorder: Grid Principles for Web Design

Ordering Disorder: Grid Principles for Web Design
by Khoi Vinh

Khoi Vinh’s book is the only one int his section that’s entirely focused on web design. Khoi is one of the people responsible for bringing a focus on grids to the online world.

This is a must read if you want to work with grids online. It helped answer a number of questions about how to develop a grid I had after reading the books above.

Khoi takes you through a working example constructing a basic grid and then developing several of the typical pages you’d find on any website using that grid.

If you had to pick 2 books from this section I’d go with Making and Breaking the Grid and this one.

Summary

There are obviously a lot of books above (23 I hope) and you might be wondering which to read first. If I mentioned a book as a must read or a bible it’s probably one I would recommend first.

Otherwise visit Amazon or the Barnes & Noble site and read some reviews or walk into a store and begin reading.

The majority of the books above I discovered through recommendations by other web designers. A few I found searching Amazon and a few I found searching the shelves at Barnes & Noble.

I know some of these books are available as eBooks for iPad, Kindle, or Nook and they should offer free samples. I’d like to tell you that you’ll love all of them, but I know we all have different tastes in reading material.

I can tell you that these are all books on my many bookshelves and I’ve read each and every one, some several times, and I often grab them as references.

If you have any books to recommend about design please share. I’m always looking for new books to read.