Web Design Trends in 2011

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.

How will you stay relevant as a designer in 2011? The ultimate goal of a designer is not to dazzle but to entangle. Any designer can get ‘oohs’ and ‘ahhs’ that are easily forgotten. The supreme designer is able to create an environment which charms and captivates the user to the point where he does not want to find the ‘Back’ button. Several elements come together to forge such a wonderland: harmonious color scheme, intuitive design, easily accessible information and fast response. Additionally, one can never under-estimate the power of simplicity. Of course, this has always been the case, but in 2011, you are no longer at the forgiving discretion of the desktop, or even laptop, computer. Now, your design must contend with smart phones, netbooks, tablets and the like. Are you ready?
Take a gander at the top 11 trends for 2011.

1. More CSS3 + HTML5

What a gratifying sigh of relief! CSS3 and HTML5 have been on the distant horizon of web design for the past couple of years, but now, in 2011, we see an explosion of it. Designers are finally starting to let go of Flash. However you may feel about Flash, you do know that it does not play well with some of the hot, new technology available to your current and potential visitors. In 2011, you will slowly step away from Flash and embrace the magic known as HTML5. Look at the amazingly similar comparison:


Now that’s shown, please understand that Flash and HTML5 are not equal opponents. There is plenty of room for both in 2011. The problem is that designers in 2010 (and before) misused Flash. Case in point, very rarely should your entire site be made of Flash, especially these days. HTML5 alleviates some of the burden we have placed on Flash. However, HTML5 cannot (yet) replace the extraordinary design elements we can achieve through Flash.
Perhaps even more exciting is the fact that CSS3 is available to us in a real way this year. Move over Photoshop (wow, Adobe just cannot rest), because CSS3 is making short work of text shadow, border radius and image transparency. If you have not already begun, now is the time to really delve into understanding CSS3 and HTML5.

2. Simple Color Schemes

Simplicity. There’s nothing quite as impacting as an honest message on a quiet backdrop. Quiet can be interpreted several different ways. Forget black and white or shades of gray. Think of green, yellow or even red as your primary color. However, limit your palette to two or three colors. Work within the shades of each color for variety. It can be truly remarkable what a few colors can do for your message. Observe:

Shades of green create this Twitter visualization tool. Side note: this site was created with XHTML/CSS and Javascript.

Red can be jarring if done incorrectly. This site gets it right by subduing the color’s overwhelming personality with easy-to-read high contrast text.

3. Mobile Ready

Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.
Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.
With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.
It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.

4. Parallax Scrolling

Parallax scrolling: not just for old school video games. As aforementioned, the hot web design trend for 2011 is creating a sense of depth. What better way to create that than with parallax scrolling? The parallax effect uses layers to present the illusion of a 3 dimensional space. It can be accomplished with some simple CSS tricks or the help of jQuery plugins like Spritely. Parallax scrolling can be most effective as a secondary element on your design, for example, as a header, footer, or background. Making it an integral part of your navigation may prove frustrating for your site visitor.

The Old Pulteney Row to the Pole website uses a top down parallax scrolling effect for the background. This adds a nice subtle amount of depth and lots of interest.

5. Designing for Touch Screens, Not Mice

Technology has become much more tactile. Usability is shifting from abstract to tangible. This means that instead of navigating your mouse to remotely connect, your destination is literally at your fingertips. Tablets, most smartphones and some desktops use touchscreens. Does your design accommodate fingertip navigation?
How much of your design is mouse-oriented? As designers, we worship mice. Our links light up when the mouse hovers over. However, there’s no hovering in touchscreen. How will your design indicate links to your visitors? What about drop-down menus? That’s also a no-go in touchscreen design.
Similarly, how will visitors peruse your site? As controversial as it may be for standard web browsing, horizontal scrolling may be more appropriate for touchscreens. Fitting nicely into this niche is a magazine-like layout where visitors virtually flip through your site.
Lastly, consider using liquid layouts as part of your commitment toward responsive design. In 2011, you are no longer dealing with screen resolution size. Visitors can change their viewing orientation from vertical to horizontal. Your design must be flexible to meet any challenge, or you will be a relic of 2010.

Baby sees the iPad Magic, Copyright Steve Paine, Flickr

6. Depth Perception in Web Design

No, we are not dealing with the aerial ‘I can see your coffee cup and keyboard on your website’ design of two years ago. Depth perception is about creating dimension in your web design, so that parts of your site looks nearer than others. It conjures a faux 3D effect when done masterfully. Remember what it felt like watching the blockbuster 3D movie, Avatar? The elements jumped off of the screen, quite literally.
Although 3D technology has no yet made it to web design, you can still replicate depth in your design.

This playful website features a rotatable, 3D planet and makes use of depth with well-placed shadows and layering.

Eye-catching and smart, this celebration of Jordan (both the man and shoe) is thoroughly entertaining. The 3D elements are crisp and simple, which what makes them so stunning.

7. Large Photographic Backgrounds

Large scale backdrops will surge in 2011. These images will be high resolution, and covering the entire site. Large photos are an instant way to grab your audience– they cannot help but to see it and have an opinion about it. The background photo must be content-appropriate. Simply having a pretty image in the background without any context will disrupt your user’s experience. Trends point to soft and slightly transparent imagery that does not over shadow your content, but harmonizes with it.

This site makes use of high-resolution photos and the predominant color is yellow throughout.

This site adds playful animation with its grand scale imagery. Warning: auto-play music.

8. Adventurous Domain Names & Integration

Although not in the strictest sense a web design issue, look forward to seeing more creative domain names. The once-coveted .com domain has lost a lot of its appeal– primarily because you have to think up words in Na’Vi in order to find a domain that has not been thought up yet. 2011 will see a more wide-spread venture away from .com and into more whimsical domains like .me or .us. Think of the possibilities and scoop it up before it’s gone.

.me is a great domain to use for personal portfolios, or blogs, especially if you want a seperate identity from your corporate brand.

Another example of .me integration.

9. QR: Quick Response

If you have noticed those square barcodes popping on business cards, magazines or else where, you may already know that they are a hot trend for 2011. How exactly does it translate into web design? Amazingly well, in fact.
The barcodes are called QR, short for Quick Response. Simply take a photo of the unique barcode with your camera phone. Like magic, your phone will call up the website associated with said barcode. The beautiful thing about QR is that you can use it in a myriad of ways. Feature your QR on your website, in order for site visitors to have a shortcut to your mobile site. You can also track your visitors through QR, by placing a special referral code on your URL. When you are leaving comments on sites such as this, use the QR as your avatar.
2011 is all about mobility and it will be smart to take advantage of this new medium.

This is the QR for the author’s personal website. Create your own code here.

10. Thumbnail Design

The ever-enterprising folks at Google have introduced the average user to thumbnail browsing. Gone are the days of clicking through to see the content of a website. These days, you just click on the magnifying glass and hover (assuming you’re not on a touchscreen). Magically before you is a glimpse of what waits on the other side of your click.
If your design is Flash-based, that is definitely going to be a problem. The preview will not display those elements of your design.
As the average internet user becomes more surfing-savvy in 2011, expect to see more people navigating by these means. It is just too great of a temptation not to judge a site by its thumbnail.

11. Constant Connection/ Life Stream

Last, but certainly not least, is the focus on constant connection in web design. The internet is, by nature, a sterile environment, and we make it human by sharing our lives in an open forum. Expect to see more intimacy through the form of lifestreaming. Personal blogs and portfolios in 2011 will prominently feature live Twitter feeds (not just a link to the Twitter page). People will let you know where they are at any moment of the day via Foursquare. In fact, expect to see a dedicated lifestream for all of one’s online activity. 2011 will definitely bring out our inner, creepy stalker, no doubt about it.

A personal site that utilizes lifestreaming.

This is a business site that synthesizes a lot of information on one page.

Responsive Web Design book review

After having read 'HTML5 For Web Designers' by Jeremy Keith, and A Book Apart's N°. 3, 'CSS3 For Web Designers' by Dan Cederholm, I finally found time to read N°. 4 of the list 'Responsive Web Design' by Ethan Marcotte. I know I'm seriously behind in my reading, as this book was launched months ago, and there are already 2 new ones waiting to be read. Still, the topic of the book is pretty hot and we're just starting to see this web design approach in action. I'm pretty sure there still are many people who haven't heard of this technique… high time for a review of this book.

Table of contents

This book is about designing for the web using a flexible grid-based layout, flexible images and media, in combination with media queries. In other words the book explains an approach that makes your design responsive. The book has 150 pages and consists of five chapters:

• Chapter 1: Our Responsive Web
• Chapter 2: The Flexible Grid
• Chapter 3: Flexible Images
• Chapter 4: Media Queries
• Chapter 5: Becoming Responsive

“Responsive Web Design” by Ethan Marcotte - published by A Book Apart

Chapter 1: Our Responsive Web

Ethan starts his book talking about how web design inherited its vocabulary from print, and how it has borrowed the concept of “the canvas”. We, web designers, try to mimic the process of starting with a blank canvas, a blank document with a predefined width and height. But there is a problem with this approach, namely the web’s flexibility: the browser window and all its inconsistencies and imperfections. The solution to this problem is trying to create a design that is imposed on the web’s innate flexibility. In other words, a web design that is responsive, that adapts itself to the media that renders them.

Chapter 2: The Flexible Grid

Via an example web site, Ethan explains how you can turn a pixel-based design created in Photoshop into a flexible layout using a simple math formula. It’s the same fluid grid technique explained in one of the chapters in “Handcrafted CSS” which is only the foundation of responsive web design.

Chapter 3: Flexible Images

Since modern browsers resize images proportionally, the image ratio remains intact when using Ethan’s flexible technique of setting a maximum width of 100% for each “img” element via CSS. The image will then resize itself when the flexible container shrinks or enlarges. This same technique can be applied to other rich media or video.

Image source A Book Apart

Chapter 4: Media Queries

As a staunch proponent of non-fixed layouts, Ethan explains how we can build some measure of fluidity into our designs by using media queries. This chapter covers the essence of this book, and so this is the most important one, but also the most extended, where I learned the most from. He explains how media queries work, and how you can implement them. He shows us ways on how you can make a layout responsive, a layout that “responds” to the context it’s viewed in. He also explains why responsive web design isn't just about making your design accessible for smaller screens, and shows us ways on how we can adjust our design for wide screens. He concludes this chapter with explaining the reason why this approach is a flexible foundation which allows us to deal with the emerging range of different mobile devices, followed by a few beautiful example websites where the responsive approach has been used.

Chapter 5: Becoming Responsive

In this chapter Ethan explains us different ways of how we can incorporate the responsive approach to our work. One of the approaches is to design for mobile first, a design philosophy introduced by Luke Wroblewski in 2009. Based on this approach, Ethan demonstrates us a responsive workflow where the process of the design and development phase kind of blend with each other. Followed is a hands-on practical demonstration on how you can use the progressive enhancement technique to ensure quality access for all. He shows that you can use jQuery to the advantage for mobile users with a fall-back for when JavaScript isn't available. Ethan concludes that web design is all about asking the right questions, and that responsive web design is just a possible solution for the web's inherent flexibility.

On another note…

A perfect companion when reading this book, is "Adaptive Web Design" by Aaron Gustafson. A review of this book can be found here, but for those who wonder, this book is all about "progressive enhancement". So the term "adaptive" doesn't stand for another technique as some people like to believe. Aaron explains the difference between "adaptive web design" and "responsive web design" well in this post. You could say that "responsive" is a subset of "adaptive". More about this subject in a future post where I'll review the book.
I'm also kinda wondering about the implications towards creativity with these techniques as they all require that you think in boxes that can move below each other when there is a smaller screen. Maybe it is my typical designer brain that feels the urge for boundless creativity, I don't know, but I haven't seen a site like this one being made responsive. I'm sure it's possible, but I'm pretty convinced it would be a gigantic task. Most sites that I've seen all share the same approach towards lay-out, because the basis of this technique requires it. Of course it is still early days, and this approach is new and will grow up when more solutions become available. Anyway that's me thinking out loud, and subject for another post sometime in the future.

Working with media queries

The use of media queries simply allows us to apply different CSS styles based on resolution and/or device orientation. It uses the same old media declaration that we’ve used for serving up print stylesheets but now it just has a few more features under its belt.
Everyone’s doing it… ok, so maybe not everyone but it’s definitely starting to gain some traction amongst the designers who are prepared to push the boundaries – or at the very least experiment with them from time to time.

Hicks Design

How do we use them?

First we need to set the viewport to device-width

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

Then we can either link to external stylesheets

<!--[if !IE]>-->
    <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="ipad.css" />
<!--<![endif]-->

Or we can add them to an existing stylesheet

/* target the minimum width of the browser window */
@media screen and (min-width: 900px) {
    .class {
        background: #FFE11A;
    }
}
 
/* target the maximum width of the browser window */
@media screen and (max-width: 600px) { }
 
/* target both the minimum and maximum width of the browser window */
@media screen and (min-width: 600px) and (max-width: 900px) { }
 
/* target the maximum width of the device */
@media only screen and (max-device-width: 480px) { }
 
/* target the maximum width of the device and it's orientation */
@media only screen and (max-device-width: 480px) and (orientation:portrait) { }
@media only screen and (max-device-width: 480px) and (orientation:landscape) { }
 
/* target the iPhone4 retina display */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }

Is it supported?

The browser support for media queries is actually pretty good. The latest versions of Firefox, Safari, Chrome, and Opera are all using it. Internet Explorer 9 will be, but IE8 and below do not :( however there is a jQuery media queries plugin – for those not-so-capable browsers.

Final thoughts

One thing to keep in mind – Although we can now tailor our designs to suit different devices we’ll still be dealing with the exact same content. (CSS3 flexbox can help rearrange some content if necessary) So even if we decide to use CSS to hide images on the iPhone, they’ll still be downloaded by the user.

Notable Mentions

• Mediaqueri.es – A collection of responsive web designs.
• Less Framework – A CSS grid system for designing adaptive web­sites.
• CSSgrid – A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.
• A Jason Grigsby article – On media queries for mobile being fools gold.

Ed Merritt

Simon Collison

How to Design a Web Site: A Beginners Guide

If you want to have your own web site on the Internet, but have no idea where to start, this article will provide you with the exact information you'll need to get started, including what you can expect to pay to get your site up and running. However, before I begin, I'd like to tell you a little bit about myself, and how I got started, so you'll know who you're dealing with.

When I started online back in 1997, I was completely overwhelmed with the Internet and had absolutely no idea where to start. I knew that I desperately wanted my own Internet business, which would require me to have my own web site, but I was very low on cash and there wasn't much information available to assist me at that time. For this reason, I knew I would have to do everything myself, which included learning how to create my own web site.

I spent countless hours online researching and learning everything I could about the Internet. I went to web sites that I admired and looked at the source code (HTML code that is used to create a web page) so that I could see exactly how that site was made. Keep in mind, I used their source code for learning purposes only, which is completely acceptable.

The first time I looked at all that code I was completely overwhelmed. I began to feel a bit discouraged thinking maybe I was trying to take on a bit more than I could handle. However, when I began really looking closely at the coding, I began to see how things worked. It really wasn't as difficult as I thought. And the more I looked at the code and began testing different things, the more confident I became. I realized that this really wasn't hard at all! At that time, I knew I could create my own web site.

When I first started online, I had to connect to the Internet through AOL (America Online), which was a slow dial up connection. At that time, AOL provided their members with space on their web server (a computer that holds web sites, graphics, etc., to be displayed on the Internet), to enable them to upload their own web pages and graphics. I remember, I was allotted 10 megs of space. Not much, but enough for me to create my new web site and upload it the Internet. I was thrilled!

AOL also provide me with a great free WYSIWYG (What you see is what you get) HTML editor called, AOLPress. Unfortunately, it's no longer available. However, this editor enabled me to create a web page by clicking on different options. But, the best part was, I could view the source code as I created it! This program was going to be my teacher and I couldn't have been happier.

I clicked on a button to add an image and then viewed the source code to see what code was used to display the image. I clicked on a button to add a link and then viewed the source code to see how the link was created. I clicked on a button to make my text bold and then viewed the source code. I did this for every available option I could find. AOLPress was such a blessing to me and literally taught me how to write my own HTML.

Within a matter of a couple of days, I had my very first web site displaying on the Internet. I remember it had a large spinning gold 'Welcome' graphic, a gray stone background and was actually very unprofessional. But, it was a start. It was my very first attempt at web design. And although it certainly wouldn't have made any sales, it served its purpose. It taught me a very valuable lesson - that I could do anything that I put my mind to. I just had to believe in myself, even when I had doubts, or my family and friends had doubts (I think we all have some negative people in our lives) and I had to take the necessary steps to make it happen.

To make a long story short, I continued to learn more and more about web design and kept records of everything I was learning. I used this information to refer to over and over again over the years. To be honest, sometimes I still do! And, after years of trial and error, I designed and launched Web-Source.net. This site has grown to nearly 2, 500 pages over the years and receives 2.5 million page views each month.

I'm not telling you this to brag - just the opposite. I'm sharing this information with you to show you that if I can do this you can do this. It's really not hard.

Although it took me a few years to learn everything I needed to learn about web design, Internet marketing, etc., especially because I had to learn the hard way - by trial and error, I feel that it made me a better person. I truly appreciate my success, and love to help others achieve the same thing.

Remember the records I told you I kept as I was learning over the years, well, I used those records to write a web design course for anyone who wants to learn how to create their own web site. There is no need for you to have to learn everything the hard way. And if you keep reading, I will tell you how you can get several chapters - free.

Getting Started

Now, as I'm sure you have a ton of questions about getting started designing your web site, the rest of this article will focus on providing you with some helpful information.

Although there are a lot of people who would love to have their own web site, many are concerned that it may be too expensive and don't even take the time to learn about it. You may be surprised to learn that it really isn't. As a matter of fact, I will show you how you can get your site on the Internet very inexpensively. Remember...I started out with very little money and learned how to do everything very inexpensively.

You may also be thinking that creating your own web site may be too hard. Well, I'm here to tell you, it's really not as difficult as you may think. Once you have a basic understanding of web design, you can immediately begin designing your first web page. You don't have to learn everything when you're just starting out, just a little bit - the very basics, which is simple. Then, little by little, you can learn new things when you're ready.

If you will allow me, I will teach you step by step how to create your own web site.  Not by using big fancy words that nobody can understand, but by talking with you in a simple everyday language that everyone can understand. Just like I'm talking with you now.

Can I use a web design software?

When you're just starting out, I highly recommend that you learn how to write your own HTML code and not use a web design software program. However, once you have a basic understanding of HTML and how it works, you will then want to use a WYSIWYG (What you see is what you get) HTML editor, as this will enable you to quickly and easily create your own web site.

Do I really need to learn how to write HTML?

You may be wondering why you really need to learn how to write your own HTML code when there are web design software programs that will write the HTML code for you. It is always best not to completely depend on a web design editor when designing your web site, as you really need to have the ability to edit your own HTML code when needed.

For example, your editor may not enable you to add special effects to your web page, such as highlighting your text when you place your mouse pointer over it. If this is the case, you would need to have the ability to edit your own HTML. If you don't know anything about HTML, this won't be possible.

There will most likely also be times when you will want to use scripts (software that resides on your web server or within your HTML code that performs specified tasks, such as processing forms, displaying image slide shows, etc.), such as JavaScript, CGI, or PHP to add special effects to your page. Some scripts, such as JavaScript, are placed directly within your HTML code. If you don't know anything about HTML and web page design, you won't be able to add the script to your page.

Will I need a special software program to create my web site?

You can begin writing your own HTML code using a plain text editor, which should already be installed on your computer. You will also need a web browser, such as Internet Explorer or FireFox to view your web page, which is also already on your computer. Your browser will read your HTML code and display your web page.

How will my web site be viewed on the Internet?

Once you are happy with the way your web page looks, you will need to place it on a web server (a computer that holds web sites, graphics, etc., to be displayed on the Internet), so that it can be viewed over the Internet. Prices vary, but you can host your web site very inexpensively. For example, I use a great web hosting company (a company that rents web servers) called, Host4Profit. They charge $24.95 a month and provide everything you will need to get your web site up and running on the Internet.

A web host, such as Host4Profit, will provide you with server space in which you can place your web pages, graphics, etc. However, you will need to design your own web pages and then place the pages on their server. Not to worry, I will explain how to get your web pages on the server in my web design course. It's really very simple.
There are also all-in-one web site solutions, such as SiteBuildIt, that will provide you with an online editor that will assist you in building your web site right online and even host it for you. They will take you by the hand and take you step by step through building an online business from start to finish. If you'd rather join a site like this, give SiteBuildIt a try. Ken Evoy, the owner, is a great person and has developed this system to help you have the greatest chance of succeeding. If you do, send me your receipt and I will give you a copy of my web design course.

What will I need to create my web site?

When you're ready to begin designing your own web pages, there's really not that much you will need. Let's go over what you're going to need and how much it's going to cost to get your web site designed and displaying online:

1. A web design course to teach you how to design your web site. If you take an online course, this may cost between $200 - $300! Don't panic. I've got you covered. You can get my professional web design course for under $70.00 or free if you sign up with SiteBuildIt, so please don't waste your money on expensive online courses or offline classes that will cost much more. You won't need them.
   
   
2. A WYSIWYG software program that you can use to create your web site. There are several programs for sale on the Internet that will cost you hundreds of dollars, but don't buy them! When you get my web design course, I'll recommend a great HTML editor that you can purchase for under $50.00. That's very reasonable.
   
   
3. Graphics for your web page. There are free graphics available on the Internet. I'll tell you where to get them in Volume 5: Webmaster Resources of my course.
   
   
4. A web hosting company. You can host your web site with Host4Profit for just $24.95 a month.
   
   
5. A domain name. For example, www.yoursite.com. This will cost you around $9.00 - $15.00 a year.
   

That's it!

So, if you add it all up, you can get your web site up and running for under $155.00 USD. In other words, you can have your own Internet business for next to nothing! And, what's more, if you will be selling your own products, I will even tell you where you can find a company that will enable you to immediately begin accepting credit cards. There are no set up fees and no monthly fees. They simply take a small percentage of each sale you make for their services, and deposit the rest into an online account - very similar to a bank account. You will even receive a debit card!

Although there is an initial start up cost, once you're up and running, all you'll really need to spend is $24.95 a month for hosting and $9.00 - $15.00 a year to renew your domain name.

In my course, I will even show you how you can promote your new web site for free.

Optimizing Email For Mobile Device With Media Query

Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the "full web" experience, there are really not a lot of popular sites left that don't include a mobile stylesheet for small screens.
It seems that mobile stylesheets haven't proven to be quite as popular in email, despite the advantages they provide to devices that make use of the @media query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using @media in Campaign Monitor.

Why optimize HTML email for mobile?

To be honest, viewing HTML email on a mobile device can be plain fiddly. Even on the iPhone, it's common to have text automatically rescaled to a size that's near unreadable, or in a way that can break your design. Wide emails often require horizontal scrolling, especially when there's a large image involved.
By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. Devices that don't recognize @media will degrade gracefully by simply reverting to your default styles.

How does this work?

We've done it before, but lets walk through Panic software's example again. Here's the design (on the iPhone):

And here's the mobile stylesheet in the <head> section of the email:

@media only screen and (max-device-width: 480px) {
     .page {
          padding: 0px 10px 5px 10px !important;
     }
     body {
          padding: 10px !important;
     }
     #airmail-line {
          margin: 0 -10px !important;

     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot {
          width: 275px;
          height: 190px;
     }
}

Lets walk through this. First of all, there's the condition:

@media only screen and (max-device-width: 480px) { ... }

What this says is, "Only use these styles if the screen dimensions are 480px or less" (480px being the width of a "flipped" iPhone's display). Then, using the !important declaration to override any inline styles, change the padding of the body and the .page DIV, alongside the font-size of certain text when these styles are invoked. This maintains the pretty layout of the email and keeps the headings from being too large on the small screen.
What's really cool is how the #screenshot is resized to fit the display. Here's the screenshot at its original 550 x 380px in a desktop email client:

And here it is resized to 275 x 190px for a mobile display:

Resizing your images can prevent the sort of layout breakage, or unnecessary scrolling that can occur when an image is too large for the mobile devices' viewport.
A final tip is the addition of -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text. For example, the iPhone scales small fonts up to 12px, so it can be used to override this. That said, all your text should be above 12px and desirably, 17-22px. Anna Yeaman at Style Campaign has an excellent write-up on text sizing which wraps this up nicely.

This is great, but which devices can display mobile stylesheets?

The good news is that devices with fairly solid CSS3 support - the iPhone, Android and Palm, which all use Webkit - have no trouble with the @media query. Here's the same email in the Android and Palm Pre's default mail clients:

We also tested @media handheld { ... } on these devices (iPhone OS 3, Android, Palm) and more (Blackberry 8900 Curve, Nokia N96, Pocket PC, Samsung Intrepid), without luck.

And finally, a tip for use in Campaign Monitor...

We usually recommend that you move a copy of your campaign CSS inline. In this case, as we're using the @media query to override any inline styles, it's better to make your default styles inline from the start and add your @media styles to within the <head> section of your email. Upon import of your campaign, uncheck "Move a copy of my CSS inline" and you'll be done in time for dinner.
With growth in the iPhone's market share not letting up any time soon, we anticipate that we're to see this technique used more often. After all, it's an elegant, non-destructive snippet of code that can make your emails just as much of a pleasure to read on mobile devices as it is on the big screen.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices.
In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

[Editor's note: Have you already got your copy of our Printed Smashing Book #2? The book covers best practices and techniques for professional Web designers and developers.]

Media Queries

If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.
The Media Queries ⁶ in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:

• width and height (of the browser window)
• device width and height
• orientation – for example is a phone in landscape or portrait mode?
• resolution

If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout. To see an example of this in practice, the UK web conference dConstruct ⁷ has just launched their website for the 2010 conference and this uses media queries to great effect.

The dConstruct 2010 website in Safari on a desktop computer

The dConstruct 2010 website on an iPhone
You can see from the above example that the site hasn’t just been made smaller to fit, but that the content has actually been re-architected to be made more easy to access on the small screen of the device. In addition many people might think of this as being an iPhone layout – but it isn’t. It displays in the same way on Opera Mini on my Android based phone – so by using media queries and targeting the device capabilities the dConstruct site caters for all sorts of devices – even ones they might not have thought of!

Using Media Queries to create a stylesheet for phones

To get started we can take a look at a very simple example. The below layout is a very simple two column layout.

A very simple two column layout
To make it easier to read on a phone I have decided to linearize the entire design making it all one column, and also to make the header area much smaller so readers don’t need to scroll past the header before getting to any content.
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:

 @media only screen and (max-device-width: 480px) {

 }

We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:

 @media only screen and (max-device-width: 480px) {
  div#wrapper {
   width: 400px;
  }

  div#header {
   background-image: url(media-queries-phone.jpg);
   height: 93px;
   position: relative;
  }

  div#header h1 {
   font-size: 140%;
  }

  #content {
   float: none;
   width: 100%;
  }

  #navigation {
   float:none;
   width: auto;
  }
 }

In the code above I am using an alternate background image and reducing the height of the header, then setting the content and navigation to float none and overwriting the width set earlier in the stylesheet. These rules only come into play on a small screen device.

My simple example as displayed on an iPhone

Linking a separate stylesheet using media queries

Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Testing media queries

If you are the owner of an iPhone, Android device or other device that has a browser which supports media queries you can test your CSS yourself. However you will need to upload the code somewhere in order to view it. What about testing devices you don’t own and testing locally?
An excellent site that can help you during the development process is ProtoFluid ¹². This application gives you a form to enter your URL – which can be a local URL – and view the design as if in the browser on an iPhone, iPad or a range of other devices. The screenshot below is the dConstruct site we looked at earlier as seen through the iPhone view on ProtoFluid.

The dConstruct 2010 website in ProtoFluid
You can also enter in your own window size if you have a specific device you want to test for and know the dimensions of it’s screen.
To use ProtoFluid you need to slightly modify the media query shown earlier to include max-width as well as max-device-width. This means that the media query also comes into play if the user has a normal desktop browser but using a very tiny window.

 @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

 }

After updating your code to the above, just refresh your page in the browser and then drag the window in and you should see the layout change as it hits 480 pixels. The media queries are now reacting when the viewport width hits the value you entered.
You are now all ready to test using ProtoFluid. The real beauty of ProtoFluid is that you can still use tools such as FireBug to tweak your design, something you won’t have once on the iPhone. Obviously you should still try and get a look at your layout in as many devices as possible, but ProtoFluid makes development and testing much simpler.
Note that if you don’t want your site to switch layout when someone drags their window narrow you can always remove the max-width part of the query before going live, so the effect only happens for people with a small device and not just a small browser window.

Retrofitting an existing site

I have kept the example above very simple in order to demonstrate the technique. However this technique could very easily be used to retrofit an existing site with a version for small screen devices. One of the big selling points of using CSS for layout was this ability to provide alternate versions of our design. As an experiment I decided to take my own business website and apply these techniques to the layout.

The desktop layout

The website for my business currently has a multi-column layout. The homepage is a little different but in general we have a fixed width 3 column layout. This design is a couple of years old so we didn’t consider media queries when building it.

My site in a desktop browser

Adding the new stylesheet

There will be a number of changes that I need to make to linearize this layout so I’m going to add a separate stylesheet using media queries to load this stylesheet after the current stylesheet and only if the max-width is less than 480 pixels.

 <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />

To create my new stylesheet I take the default stylesheet for the site and save it as small-device.css. So this starts life as a copy of my main stylesheet. What I am going to do is go through and overwrite certain rules and then delete anything I don’t need.

Shrinking the header

The first thing I want to do is make the logo fit nicely on screen for small devices. As the logo is a background image this is easy to do as I can load a different logo in this stylesheet. I also have a different background image with a shorter top area over which the logo sits.

 body {
  background-image: url(/img/small-bg.png);
 }

 #wrapper {
  width: auto;
  margin: auto;
  text-align: left;
  background-image: url(/img/small-logo.png);
  background-position: left 5px;
  background-repeat: no-repeat;
  min-height: 400px;
 }

Linearizing the layout

The next main job is to linearize the layout and make it all one column. The desktop layout is created using floats so all I need to do is find the rules that float the columns, set them to float: none and width:auto. This drops all the columns one under another.

 .article #aside {
  float: none;
  width: auto;
 }

Tidying up

Everything after this point is really just a case of looking at the layout in ProtoFluid and tweaking it to give sensible amounts of margin and padding to areas that now are stacked rather than in columns. Being able to use Firebug ¹⁵ in ProtoFluid makes this job much easier as my workflow mainly involves playing around using Firebug until I am happy with the effect and then copying that CSS into the stylesheet.

Testing the site using ProtoFluid

Testing in an iPhone

Having created my stylesheet and uploading it I wanted to check how it worked in a real target device. In the iPhone I discovered that the site still loaded zoomed out rather than zooming in on my nice readable single column. A quick search on the Safari developer website ¹⁷ gave me my answer – to add a meta tag to the head of the website setting the width of the viewport to the device width.

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

After adding the meta tag the site now displays zoomed in one the single column.

The site as it now displays on an iPhone
This was a very simple retrofit to show that it is possible to add a mobile version of your site simply. If I was building a site from scratch that I would be using media queries on, there are definitely certain choices I would make to make the process simpler. For example considering the linearized column orders, using background images where possible as these can be switched using CSS – or perhaps using fluid images ¹⁹.
Our desktop layout features a case studies carousel on the homepage, this wasn’t easy to interact with on a touch screen device and so I checked using JavaScript if the browser window was very narrow and didn’t launch the carousel. The way this was already written meant that the effect of stopping the carousel loading was that one case study would appear on the screen, which seems a reasonable solution for people on a small device. With a bit more time I could rewrite that carousel with an alternate version for users of mobile devices, perhaps with interactions more suitable to a touch screen.

More resources

This is a relatively new technique but already there are some excellent tutorials on the subject of media queries. If you know of others then please post them in the comments.

• A List Apart – Responsive Web Design ²⁰
• Apple – Safari Web Content Guide ²¹
• Sitepoint CSS Reference – Media Queries ²²
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries ²³
• Aral Balkan: How to make your web content look stunning on the iPhone 4′s new Retina Display ²⁴
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries ²⁵
• Matthew James Taylor: iPad layout with landscape and portrait modes

Responsive Web Design

The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries.
Working on the web, however, is a wholly different matter. Our work is defined by its transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.
But the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.
In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

A flexible foundation

Let’s consider an example design. I’ve built a simple page for a hypothetical magazine; it’s a straightforward two-column layout built on a fluid grid, with not a few flexible images peppered throughout. As a long-time proponent of non-fixed layouts, I’ve long felt they were more “future proof” simply because they were layout agnostic. And to a certain extent, that’s true: flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.

Huge images are huge. Our layout, flexible though it is, doesn’t respond well to changes in resolution or viewport size.

But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. The example design scales perfectly well as the browser window resizes, but stress points quickly appear at lower resolutions. When viewed at viewport smaller than 800×600, the illustration behind the logo quickly becomes cropped, navigation text can wrap in an unseemly manner, and the images along the bottom become too compact to appear legible. And it’s not just the lower end of the resolution spectrum that’s affected: when viewing the design on a widescreen display, the images quickly grow to unwieldy sizes, crowding out the surrounding context.
In short, our flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that.

Becoming responsive

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.
In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as “a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.” Emphasis mine, as I think that’s a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.
This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?

Meet the media query

Since the days of CSS 2.1, our style sheets have enjoyed some measure of device awareness through media types. If you’ve ever written a print style sheet, you’re already familiar with the concept:

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

In the hopes that we’d be designing more than neatly formatted page printouts, the CSS specification supplied us with a bevy of acceptable media types, each designed to target a specific class of web-ready device. But most browsers and devices never really embraced the spirit of the specification, leaving many media types implemented imperfectly, or altogether ignored.
Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

The query contains two components:

1. a media type (screen), and
2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.
Designers have experimented with resolution-aware layouts in the past, mostly relying on JS-driven solutions like Cameron Adams’ excellent script. But the media query specification provides a host of media features that extends far beyond screen resolution, vastly widening the scope of what we can test for with our queries. What’s more, you can test multiple property values in a single query by chaining them together with the and keyword:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

Furthermore, we’re not limited to incorporating media queries in our links. We can include them in our CSS either as part of a @media rule:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Or as part of an @import directive:

@import url("shetland.css") screen and (max-device-width: 480px);

But in each case, the effect is the same: If the device passes the test put forth by our media query, the relevant CSS is applied to our markup. Media queries are, in short, conditional comments for the rest of us. Rather than targeting a specific version of a specific browser, we can surgically correct issues in our layout as it scales beyond its initial, ideal resolution.

Adapt, respond, and overcome

Let’s turn our attention to the images at the base of our page. In their default layout, the relevant CSS currently looks like this:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

I’ve omitted a number of typographic properties to focus on the layout: Each .figure element is sized at roughly one third of the containing column, with the right-hand margin zeroed out for the two pictures at the end of each row (li#f-mycroft, li#f-winter). And this works fairly well, until the viewport is either noticeably smaller or wider than our original design. With media queries, we can apply resolution-specific spotfixes, adapting our design to better respond to changes in the display.
First of all, let’s linearize our page once the viewport falls below a certain resolution threshold—say, 600px. So at the bottom of our style sheet, let’s create a new @media block, like so:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

If you view our updated page in a modern desktop browser and reduce the size of your window below 600px, the media query will disable the floats on the design’s major elements, stacking each block atop each other in the document flow. So our miniaturized design is shaping up nicely, but the images still don’t scale down that intelligently. If we introduce another media query, we can alter their layout accordingly:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

Our figures can responsively change their layout to better suit smaller displays.

Don’t mind the unsightly percentages; we’re simply recalculating the widths of the fluid grid to account for the newly linearized layout. In short, we’re moving from a three-column layout to a two-column layout when the viewport’s width falls below 400px, making the images more prominent.
We can actually take the same approach for widescreen displays, too. For larger resolutions, we could adopt a six-across treatment for our images, placing them all in the same row:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

Now our images are working beautifully at both ends of the resolution spectrum, optimizing their layout to changes in window widths and device resolution alike.

By specifying a wider min-width in a new media query, we can shift our images into a single row layout.

But this is only the beginning. Working from the media queries we’ve embedded in our CSS, we can alter much more than the placement of a few images: we can introduce new, alternate layouts tuned to each resolution range, perhaps making the navigation more prominent in a widescreen view, or repositioning it above the logo on smaller displays.

By designing responsively, we can not only linearize our content on smaller devices, but also optimize its presentation across a range of displays.

But a responsive design isn’t limited to layout changes. Media queries allow us to practice some incredibly precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller screens, better complying with Fitts’ Law on touch devices; selectively show or hide elements that might enhance a page’s navigation; we can even practice responsive typesetting to gradually alter the size and leading of our text, optimizing the reading experience for the display providing it.

A few technical notes

It should be noted that media queries enjoy incredibly robust support among modern browsers. Desktop browsers such as Safari 3+, Chrome, Firefox 3.5+, and Opera 7+ all natively parse media queries, as do more recent mobile browsers such as Opera Mobile and mobile WebKit. Of course, older versions of those desktop browsers don’t support media queries. And while Microsoft has committed to media query support in IE9, Internet Explorer currently doesn’t offer a native implementation.
However, if you’re interested in implementing legacy browser support for media queries, there’s a JavaScript-tinted silver lining:

• A jQuery plugin from 2007 offers somewhat limited media query support, implementing only the min-width and max-width media properties when attached to separate link elements.
• More recently, css3-mediaqueries.js was released, a library that promises “to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test, and apply CSS3 Media Queries” when included via @media blocks. While very much a 1.0 release, I’ve personally found it to be quite robust, and I plan to watch its development.

But if using JavaScript doesn’t appeal, that’s perfectly understandable. However, that strengthens the case for building your layout atop a flexible grid, ensuring your design enjoys some measure of flexibility in media query-blind browsers and devices.

The way forward

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”