Usability & Responsive Web Design – Meetup #3

This week we were fortunate enough to have two presentations on Usability and Responsive Web Design.

You can flick through the slide share content below, and if you have any questions post them below in the comments and Ian or Justin will be sure you answer them for you.

Usability

Responsive Web Design

“The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea.
—DAO DE JING, section 32, “Shapes”

Where did responsive design originate?

2. Blank canvas (http://www.flickr.com/photos/carabanderson/3033798968)

  • we’re conditioned to think the way of the graphic designer, or artist. When an artist starts a new piece of work he or she chooses very carefully. Will it be a canvas, paper, what are the dimensions. For graphic artists, they pick the same width and height, how big is the banner or show stand. More than often they will know exactly where their work is going to end up and use that as their starting point.
  • we always start our web design with a blank canvas, and no sooner have we got this page do we start looking at the header, footer, and the number volume that need to appear on the site. We set the minimum width of the smallest monitor that we want to design for, probably 960 pixels because that also fits nicely into a grid. This gives us boundaries to begin building the site, because after all boundaries are great because the give us limitations and provide focus. Can you imagine the highway with no lines painted on the road? Or a game of football without markings on the pitch? Or houses without your allotted land parchment?
  • I know that wer’re all good designers here, but often we will already be thinking about colors, images, but we skip the bit where we review the content that needs to appear on the site and how that fits into the design. We bypass the typography and natural hierarchy of the site and loose the natural flow that our h1 h2 h3 can provide us.
  • What is worse for us is that we have no idea about the canvas that our work will be shown on. We are at the mercy of the user and the medium they decide to use to view what we create
  • .

NEXT SLIDE

But what happens when that occurs and we get the dimensions wrong? We run the risk of the website being clipped and not showing the full extent of what ins supposed to be seen. (include a picture of a scene that has horizontal and vertical scroll bars).

The ingredients

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:

  • A flexible, grid-based layout,
  • Flexible images and media, and
  • Media queries, a module from the CSS3 specification

NEW SLIDE

  • target ÷ context = result
  • This this the key (it is the secret)
  • Setting a flexible typography will require a little bit of maths / queue falling asleep for half the room /
  • It’s simple though.
  • Set the body to 100% so that you’re using the browser settings (this is usually 16px anyway) and then look at the size you want your element to be.
  • If the ideal size is 24px then we do 24 /16 = 1.5em

BAM!!!

We then do the next element within the section, but this time it’s based on the parent context size, not the body.

If you’re next element is 11px then you do 11 / 24 = 0.458333333333333

now before you round, don’t. Browsers will round that themselves to a suitable size, so we want to give them as much information to make that computed change as possible.

WHEN SETTING MARGINS AND PADDINGS

When setting flexible margins on an element, your context is the width of the element’s container.
When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.

IMAGES

It’s one thing to work with a flexible layout based on coulombs and headings, but what about the images that we use to add some visual queues to our content.

Enter
max-width: 100%;

this rule allows our image to size to it’s maximum size, or the width of the containing element… Which ever comes first.
img,
embed,
object,
video {
max-width: 100%;
}

There are some issues with this though, and as usual they come about from the windows/ie6 variety, but I’m not going to go into the detail of those at this point.

You do need to watch out for ie7 rendering image sizes however, as they do it with more artefacts than Indiana Jone’s closet.

Simply download the script (available at http://bkaprt.com/rwd/16/) and include it on any page with flexible images; it will scour your document to create a series of flexible, high-quality AlphaImageLoader objects.

BACKGROUND IMAGES

Has anyone ever had to get two columns to appear as if they’re supposed to be the same height? I know I had to on a recent project with Julie. If you did you probably used Dan Cederholm fix by repeating the background graphic to create a “faux column” effect.

But that’s fine for a fixed layout, but what about our responsive design?

.blog {
background: #F8F5F2 url("blog-bg.png") repeat-y 50% 0;
}

There is a CSS3 property called background-size (http://bkaprt.com/rwd/20/), which would allow us to create truly flexible background images, but—you guessed it—browser support is still pretty immature

Scott Robbin’s jQuery Backstretch plugin (http://bkaprt.com/rwd/21/) simulates resizable background images on the body element.

NEW SLIDE – W3C had an idea

On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the “font-size” property is useful both for screen and print media. The two media types are different enough to require different values ues for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

MEDIA TYPES

all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv.

MEDIA TYPES EXAMPLE USAGE

ALONG CAME THE SMALLER MOBILE DEVICE

WHAT IS HAND HELD

(show picture of lots of mobile phones)

BE GONE MEDIA TYPES HELlo MEDIA QUERY

ANATOMY OF A MEDIA QUERY

(anatomy high school picture) then the next slide should have

@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}

Now, every media query—including the one above—has two components:

  1. Each query still begins with a media type (screen), drawn from the CSS 2.1 specification’s list of approved media types (http://bkaprt.com/rwd/26/).
  2. Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px).

WHAT DOES THIS MEAN?

(this should appear under the previous slide as a leading chance to explain the below information)

Think of a media query like a test for your browser. When a browser reads your stylesheet, the screen and (min-width: 1024px) query asks two questions: first, if it belongs to the screen media type; and if it does, if the browser’s viewport is at least 1024 pixels wide. If the browser meets both of those criteria, then the styles enclosed within the query are rendered; if not, the browser happily disregards the styles, and continues on its merry way.

WHERE DID I PUT THAT THING?

Or you can attach them to @import statements:

@import url("wide.css") screen and (min-width: 1024px);

I prefer @media because it keeps the CSS sheet numbers down, there for requests and there for load times.

DOES SIZE MATTER?

The age old question, and in this case (as I’m sure a few others) Yes it does.

The question is how does it matter
Here are two quick guidelines that helped me sort it out:

In the spec’s language, every device has a “display area” and “rendering surface.”
the browser’s viewport is the display area; the entire display is the rendering surface. So on your laptop, the display area would be your browser window; the rendering surface would be your screen.

So if your laptop is 1200px in width and your browser is open 50% of the screen, then;

RENDERING SURFACE = 1200px
DISPLAY AREA (viewport) = 600px

you can serve CSS conditionally to viewports above 1024 pixels by writing (min-width: 1024px), or below 1024 pixels with (max-width: 1024px).

Include this table
(http://bkaprt.com/rwd/28/)

WAIT – THERE’S MOAR

Chain conditions together so that you can even better target specifics such as width and orientation.

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

Be warned though, iPhone iPad example… Moral is test for specific devices, do not assume just because thou might be able.

BROWSER SUPPORT

what would anything in the web world be without the typical “it works in everything, well everything that was made in the past 5 years”

There are two types of fixes for these issues.

css3-mediaqueries.js (http://bkaprt.com/rwd/37/)

Now this does come with some performance issues as the script will look at every {} to determine where the media queries start and end.

Another script, respond.js, is a faster work around however it does mean that you need to put a little extra work into your CSS…. and by work I mean /* styles */

At the end of each of your media queries you simply add the following comments
@media screen and (max-width: 768px) {

}/*/mediaquery*/

@media screen and (max-width: 520px) {

}/*/mediaquery*/

Javascript : respond.js (http://bkaprt.com/rwd/38/)

CONTEXT OF THE MOBILE PHONE

getting away from the code for a whole I wanted to reflect on the application of responsive design. While responsive design is an amazing option for web developers to offer up different layouts and designs for different devices and sizes, it certainly is not the answer in every situation.

You could easily code up an entirely two different sites in the HTML markup and set display:none; for the mobile version when viewed on desktop size screens, and switch them in the media queries.
Possible, but not a great idea. You’re making both users download a whole bunch of extra markup that simply doesn’t matter, and that’s just not cool. Uncool. UNCOOL!!!

In these cases it’s better to offer two completely separate solutions and rely on some server side of JavaScript based redirection.

MOBILE FIRST

http://bkaprt.com/rwd/47/ (include an excerpt of this article)

There is a school of thought that rather than break a design down from the full size, we build it up from the base level. This is a great way of looking at things because it forces you to take stock of the content and decide what is most important on the site. In a linear environment there is no “this is as important as the that on” because there IS no equal. (insert a picture for the slide of a row of kids shortest to tallest).

SOME SIZES FOR YOU

320 pixels

For small screen devices, like phones, held in portrait mode.

480 pixels

For small screen devices, like phones, held in landscape mode.

600 pixels

Smaller tablets, like the Amazon Kindle (600×800) and Barnes & Noble Nook (600×1024), held in portrait mode.

768 pixels

Ten-inch tablets like the iPad (768×1024) held in portrait mode.

1024 pixels

Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.

1200 pixels

For widescreen displays, primarily laptop and desktop browsers.

TESTING

there is no substitute for testing on the actual devices, but if you don’t have them then you can check out web developer tools. In fact, set them up as presets for you to push them through.

If youre taking it seriously, i.e. All your business comes online, then check out this article

A List Apart: http://bkaprt.com/rwd/50/

One thought on “Usability & Responsive Web Design – Meetup #3”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>