Create once,
Publish Everywhere

Wes Bos
wesbos.com
@wesbos

June 5, 2013

I'm Wes Bos

I tweet: @wesbos

I blog: wesbos.com

Also on LinkedIn linkedin.com/in/wesbos

Designer & Developer

Independent, so you can hire me. I work with everyone from startups to large companies.

Strong focus on the front end working with HTML5, CSS3 and cutting edge JavaScript.

That means I spend a lot of time with mobile devices.

HackerYou

Hands-on, project-based learning from industry-leading professionals.

I lead the HTML, CSS and Responsive Design 72 hour course.

HackerYou.com

Ladies Learning Code

Women-run not-for-profit group working to empower everyone to feel comfortable learning beginner-friendly technical skills in a social, collaborative way.

I teach the single-day WordPress for beginners workshop.

LadiesLearningCode.com

This Talk will cover:

How we get today's web on all devices using...

HTML5
CSS3 + Media Queries
Responsive Design
Many buzzword compliant tools & resources
The goal of this talk is to inform everyone in this room about the though process, techniques and resources behind building a rock solid, work-anywhere website with a fantastic user experience.
I want this to be an interactive presentation, questions are encouraged! I will periodically stop for questions as well as leave lots of time at the end.

Networks were slow, we only had EDGE data connections.
Websites were text-only versions
A few large apps delivered email, news (remember viigo?) and sports scores
The web as we knew it was fairly separate from the information we wanted on our phones

The landscape started to change really fast

We had faster and faster connections to the internet
Cell phone browsers could now render real websites
Everyone wanted to start to access the desktop web on their phones

Fast forward a few years...

Mobile devices had exploded in popularity leaving content publishers scrambling to provide a good mobile experience.

Many websites were caught with their pants down when the iPhone came out.
The objective wasn't to build an entire mobile site, but merely make their current one just work
Popup windows were banished
Flash players were replaced with mobile friendly, low quality mobile streams

Problems

Fonts are too small to read
Drop down navigations rely on a mouse hover
Wide articles require panning left to right to read a single sentence.

Interfaces that are fantastic for desktop, light a lightbox popup, are almost impossible to use on mobile
Many sites still rely on Silverlight, flash or Java Applets
It kinda works, but the experience is crap

“The website does not fully support your browser, and you may encounter problems during your visit.”

Starting with not being able to read this dialog box or touch the tiny button.

wtfmobileweb.com

Wave #2: the m.dot.site

or Let's build two websites!

Once content producers caught up with Wave #1, the next logical step was to start building a mobile website

An mdot website, is a website that users are redirected to, usually hosted at m.websitename.com

This is an entirely separate website aimed to provide a better experience for users on small smartphone screens

Problems

Two websites is twice as much work to build and maintain

You must maintain a list of mobile phones and redirect users accordingly. New phones come out every day.

We have all experienced this pain:

Each article now has two URLS, bad for SEO

Mobile articles get shared to twitter,
desktop users read them.

People assume the iPhone is the onlyPhone™

Oh shit, tablets happened. Do we need t.yoursite.com?

A mobile device isn't an exuse to give a watered down, limited and crappy experience.

Your mobile users want a tailored experience with the exact same content as the desktop users.

As you can see, mobile websites were a good interim solution, but as the device landscape continues to grow, its not feasible to be maintaining multiple websites.

Wave #3: The responsive revolution

There are way too many mobile phones to try and target all of them individually

Grandmas and Developing countries
are still using feature phones

And now everyone has Internet on their TV

A responsive website is a site with a single codebase that adjusts its layout based on the current device's attributes. The most notable one being the device size.

This means that whatever size of device the user is on, it should still provide the same content with a tailored experience

HTML

For your content.

Images, headers, paragraphs, links, navigations.

CSS

For your design and layout.

Colours, fonts, widths, heights, grids, layouts + anything that relates to how it looks.

Seperation of content (HTML) and design (CSS) is something good developers/designers been doing for years. Nothing new here...

The secret sauce...

At different points in the browser size, we want to apply and unapply different bits of CSS that control how the page is laid out.

For example, on the desktop we may be able to fit 4 columns of content, while tablet in portrait mode only can handle 2 and a mobile phone looks best with a single column of content.

Let's take another look at http://www.bostonglobe.com/

Enter Media Queries

The way we do this is with part of CSS3 called media queries.

They allow us to restrict parts of our CSS to only specific ranges of screens

@media (max-width:940px) {
  /* All your CSS goes here */ 
}

This targets all devices with a screen width of 940px or lower

Example

So, a website with 4 columns of content may look like this:

.column { /* 4 Across */
  width:25%;
  float:left;
}


@media (max-width:768px) {
  .column { /* Go 2x2 when we reach tablet size  */
    width:50%;
  }
}


@media (max-width:480px) {
  .column { /* Go 1x4 when we reach phone size  */
    width:100%;
  }
}

As you can see, we can easily re-layout our columns based on the screen width. This is a basic example, but can be done with anything:
Change Font sizes
Logo / image sizes
Simplify the design on smaller screens
Change an experience such as making a popup lightbox mobile friendly

Let's take a look at what else we can do with Media Queries

Target ranges:

@media (max-width:768px) and (min-width:480px){
        ...
      }

Anything smaller than 769px and wider than 479px

Target Heights

@media (max-height:400px){
  .largeHeader {
    display:none; /* Hide large header on small devices */
  }
}

Target Portrait and Landscape

 @media (orientation : landscape) {/* Styles */ }

Target resolution and pixel ratio

Pixels are an odd thing that don't necessarily correspond to the size of the screen. Your 50 inch 1080p TV at home is 1080px high while my measily 9 inch ipad is 1536px wide.

Lately devices have come out that are what we call HiDPI or High Density Pixels. You have probably heard the marketing term 'Retina screen' when referring to apple devices.

What does this mean? The amount of pixels on these devices are doubled and crammed into the same physical size of screen.

This is why buttons, images and logos sometimes look fuzzy on your iphone/android phone with HiDPI screens.

Solution!

We can use a media query to target devices with a high device pixel ratio. This ensures crisp images.

.myButton {
    background:url(images/buttonBG.png) center no-repeat;
}

@media only screen and (-min-device-pixel-ratio: 2.0) {
    // feed HiDPI screens a bigger background image
    .myButton {
        background:url(images/buttonBG@2x.png) center no-repeat;
    }
}

Other types of Media Queries

color - if you could somehow get a web browser on an old gameboy color, you could target low or no bits of color.
@media all and (color:0) and (width:160px) and (height:144px) { /* Target original gameboy */ }
aspect ratio - very similar to pixel ratio, used in opera
monochrome - screens such as a kindle
progressive scan - if you are working doing TV web apps
There are tons more available at https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Let's try it out!

I know most of you aren't developers, but CSS media queries are so simple that non-developers can easily read them and understand them.

Just a few minutes to make the MagNet site responsive.

The MagNet site is extremely simple, more content heavy sites will take more planning.

However, if planned properly, making a website responsive doesn't increase the workload by too too much.

The old/current design process:

IA Wireframes on Paper / prototyping application
Pass off to designer
Designer work in photoshop/illustrator to create a design
Pass off to developer
Developer replicates the photoshop design with HTML and CSS

Now, with media queries, we could have 4-5 slightly different layouts! Who designs them? That is 4-5 times the work for everyone!

Web Design
as we know it
is DEAD

RIP ??? - 2013

Design Process

Design process is changing, HTML and CSS are now tools that designers should be using. If your designer doesn't know how to code HTML and CSS, they should start learning today.

Prototyping designs in the browser allows you to quickly mock up potential designs at all screen sizes.

Animation and interaction is crucial in today's interfaces, these things cannot be easily conveyed to a developer with photoshop or illustrator.

New design process

Start initial desktop layout in photoshop to solidify overall look and feel
Migrate to HTML and CSS to flesh out spacing, colours, navigations and of course the responsive design part
Pass off to developers to integrate into Content Management System

Move into the browser sooner. Designers working in the browser have a much better idea of what is possible, this translates to a much better experience.

Design Trends: Simple

Since designs need to respond to many different screen sizes, many designers are opting for a simple design with heavy focus on large images and clean lines.