Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

+ Follow

Responsive Web Design

by Jason Bagley on Sep 15, 2011

793 views

More…

Less

3 Embeds 33

http://paper.li	18
http://us-w1.rockmelt.com	12
http://tweetedtimes.com	3

Statistics

Favorites: 1
Downloads: 16
Comments: 1
Embed Views: 33
Views on SlideShare: 760
Total Views: 793

1–1 of 1 previous next

nomadone Awesome presentation Jason, really well designed as well and your resources page takes it even further/ Great work. 8 months ago Reply
Are you sure you want to Yes No

Where did these “web” terms come from? Print!Each of those words are directly inherited from Print Design. Taken off the shelf, dusted off and reapplied to digital.Our debt to print goes much deeper than just language. One concept we have borrowed from print we might not even realise is the Canvas.
In all creative mediums, painting and sculpting for example, you select a canvas, paper, block of stone etc.Before you start, you have the exact dimensions, width and height. Establishes a boundary for work to come.
As Web Designers, we are step removed from our canvas.We create a canvas in Photoshop or Fireworks. Once its been coded, we have to view our design in a browser.
Browser windows with all of its inconsistencies and imperfections.Once site is published, our designs are at the mercy of users who view them. Their font settings, colour of display, shape and size of browser, PC / Mac.
Weset our type in pixels or create fixed width layouts that assume minimum screen resolutions.If a browser drops below our “minimum” width, horizontal scroll bars appear and the edges of your site are clipped.This can negatively affect our visitors.
We are facing our own transition period, devices are getting bigger AND smaller.
Fragmenting our content across different “device optimized” experiences is a losing proposition, or at least unsustainable one.We can’t compete with the pace of technology, so what is the alternative?
Architects are inventing ways to change / mold spaces based on occupants. Glass that changes from clear to opaque, flexible panels. Us Web guys? We are building disconnected designs.
Rather than creating disconnected designs, each tailored to a particular device or browser, we should treat them as facets of the same experience.In other words, craft sites that are not only more flexible, but adapt to media that renders them
Some maths involved!
90% page width is a bit of a guess / test. Gives 5% margin left and right.
Remember the box model. Margins context is width of elements container.Paddings context is width of element itself.Works for negative margins too!
This rule tells the image to not exceed the width of its container. Overflow: hidden also works.Modern browsers resize image proportionally and image’s aspect ratio remains intact.Works with embed, object, video. Older browsers and compatibility?Windows hates us. Doesn’t scale images well.IE7 and lower, Firefox 2 and lower on Windows.Windows 7 is fine!AlphaImageLoaderSo our design, text and fonts is now flexible and our images scale. Problem: No design, fixed or fluid, scales beyond the context it was originally designed. So how do we make our designs more responsive?
CSS2 Specification.Problems starting cropping up with more mobile phones and tablets. Could of targeted with “handheld”, but rather we built compelling print and screen stylesheets.When phones browsers caught up, there weren’t enough handheld stylesheets on the web, so defaulted to reading “screen” based stylesheets.
I prefer the @media approach.
We can chain multiple queries together with “and” keyword.
Before we start with mobile phones, we need to add this to the head section of our HTML.Initial-scale property sets zoom level to 1.0 or 100%, so browsers viewport aware will show a website equal to the width of the devices screen and not at its default layout.
For:Giving users the same web experience across all their devices. A users context is an assumption. On your couch at home browsing the web, or on the road.Mobile first: Focus on the truly critical aspects of our design.Makes you think a lot more about your visitors and devicesAgainst:Image resizingMobile devices downloading non viewable data

1 Favorite

TeamFALK . , Selbst at Home Tags html5 responsive 2 weeks ago

Responsive Web Design — Presentation Transcript

No transcript available.

Responsive Web Design

by Jason Bagley on Sep 15, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 33

Statistics

Responsive Web Design — Presentation Transcript