• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design
 

Responsive Web Design

on

  • 1,912 views

 

Statistics

Views

Total Views
1,912
Views on SlideShare
1,912
Embed Views
0

Actions

Likes
4
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • RESPONSIVE WEB DESIGNTuesday, 10 April, 12two stories: responsive web design, but also a much bigger story. A clear trend that has really only emerged in thelast two months, which is that we are on the cusp of the death of the PC.
    • “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.” John Allsopp, “A Dao of Web Design” http://www.alistapart.com/articles/dao/ (April 7, 2000)Tuesday, 10 April, 12This was written in 2000, almost 12 years ago and we have forgotten it.
    • WHAT IS RESPONSIVE DESIGN? Responsive design is about creating objects and experiences that respond or adapt to the people using them and to their changing environment.Tuesday, 10 April, 12The term stems from a discipline within architecture called Responsive Architecture and is spreading to all fields ofdesign.
    • Tuesday, 10 April, 12A building that adapts to the people inside of it as well as the environment around it.
    • Tuesday, 10 April, 12This car (FORD EVOS) knows its driver and adapts the seating position, temperature, music, GPS routes, gear shifttiming, suspension stiffness, etc. to the driver’s preferred settings, past habits and data from the cloud.
    • Tuesday, 10 April, 12Table leaving behind an imprint from a previous person
    • HOW DOES IT APPLY TO THE WEB? Responsive web design is about creating a singular experience that adapts and responds to the canvas or medium it is presented on.Tuesday, 10 April, 12
    • HOW CAN WE USE RESPONSIVE WEB DESIGN TO IMPROVE HOW WE BUILD SITES TODAY?Tuesday, 10 April, 12
    • 1920 pixels wide 960 pixels wide (1024 x 768)Tuesday, 10 April, 12Let’s look at how we build sites today
    • 1920 pixels wide 960 pixels wide (1024 x 768)Tuesday, 10 April, 12Let’s look at how we build sites today
    • 1920 pixels wide 960 pixels wide (1024 x 768)Tuesday, 10 April, 12Let’s look at how we build sites today
    • HOW WE USED TO SURF (1024 x 768)Tuesday, 10 April, 12We are building sites for how we used to surf
    • HOW WE SURF TODAYTuesday, 10 April, 12But this is how we surf today
    • We build for a screen size that represents less than 13% of desktop and laptop users today. Mobile devices (phones and tablets) now account for nearly 11% of all devices out there. In 2010, PCs outsold tablets 20 to 1. In 2011 it was 6 to 1. In all of 2011, 488 million smartphones were sold globally compared to only 415 million PCs.Tuesday, 10 April, 12
    • WHAT ABOUT TOMORROW?Tuesday, 10 April, 12
    • In 2012, 5% of tablets sold will be to households that already have one. By 2015 there will be 7.1 billion connected mobile devices worldwide. By 2016 half a billion connected consumer electronic devices (Blu-Ray players, TVs, game consoles, etc.) will be sold.Tuesday, 10 April, 12
    • WHAT SCREEN SIZE SHOULD WE BE BUILDING FOR?Tuesday, 10 April, 12Let’s look at the displays out there
    • 6 MOST COMMON COMPUTER DISPLAY SIZES (DESKTOPS AND LAPTOPS) 1680 x 1050 1280 x 1024 1440 x 900 1280 x 800 1366 x 768 1024 x 768Tuesday, 10 April, 12The good news is displays with resolutions higher than 1024x768 now cover 85% of desktop displays...1024x768 isat 13% and dropping...though the iPad and iPad 2 caused a slight rebound in that number
    • iOS DEVICES 768 x 1024 iPad 640 x 960 Phone 4 and higher 1024 x 768 iPad 960 x 640 iPhone 4 and higher 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lowerTuesday, 10 April, 12iPhone, landscape... and portrait. iPhone 4 has the same screen size, but double the resolution... iPad
    • 6 MOST COMMON ANDROID DEVICES 800 x 1280 600 x 1024 480 x 854 1280 x 800 480 x 800 480 x 640 1024 x 600 854800 x 480 640 x 480 x 480 320 x 480 480 x 320Tuesday, 10 April, 12yuk
    • HDTV 1920 x 1080Tuesday, 10 April, 12
    • 2048 x 1536 FUTURE DEVICES? (iPAD 3) 768 x 1024 iPad 640 x 960 Phone 4 and higher 1024 x 768 iPad 960 x 640 iPhone 4 and higher 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lowerTuesday, 10 April, 12This is the rumoured display size of an iPad 3
    • WE ARE ENTERING THE ERA OF...Tuesday, 10 April, 12
    • 2048 x 1536 CANVAS HELL 800 x 1280 Terms like ‘screen size’ and ‘page fold’ are 1920 x 1080 1680 x 1050 1280 x 1024 768 x 1024 600 x 1024 becoming meaningless. iPad 640 x 960 Phone 4 and higher 1440 x 900 480 x 854 1280 x 800 480 x 800 1366 x 768 1024 x 768 iPad 960 x 640 480 x 640 1024 x 600 4 and higher iPhone 854800 x 480640 x 480 x 480 320 x 480 iPhone 3GS and lower 480 x 320 iPhone 3GS and lowerTuesday, 10 April, 12I think Cam got a hold of the slide... How could you ever build a website that caters to and effectively displays yourcontent on each of these screens?
    • HOW DO WE SOLVE THIS PROBLEM WITH RESPONSIVE WEB DESIGN?Tuesday, 10 April, 12
    • HOW DO WE SOLVE THIS PROBLEM WITH RESPONSIVE WEB DESIGN? 4 STEPSTuesday, 10 April, 12
    • STEP 1 SIMPLIFY OUR CANVAS:Tuesday, 10 April, 12
    • 4 COMMON RANGES 1920 + HDTV/Large Display 1280 ish Laptop/Tablet 700 - 1024 ish Tablet 320 - 640 ish Low-res Phone HDTVs/large monitors/ 1920- ∞ ish Laptops/ 1200-1600 ish Tablets (portrait)/ 800-1024 ish iPhone 3 &ish 320-480 4 (portrait) unknown future devices tablets (landscape) iPhone 4 (landscape)Tuesday, 10 April, 12Not screen sizes, but ranges.
    • WHAT DOES THIS LOOK LIKE?Tuesday, 10 April, 12
    • http://www.breadandpepper.com/en/company/ http://upperdog.se/ http://designmodo.com/responsive-design-examples/ http://foodsense.is/ http://stephencaver.com/ https://jux.com/Tuesday, 10 April, 12This site will work from 1920px wide to 320px wide. And they don’t just stretch to fit each screen, they adapt andchange themselves.http://stunningcss3.com/code/bakery/index.html
    • STEP 2 ADOPT A FLUID GRID SYSTEM:Tuesday, 10 April, 12
    • WHAT IS A GRID SYSTEM?Tuesday, 10 April, 12The standard grid, not flexible. It is the structure that we build our designs around.
    • WHAT IS A FLUID GRID SYSTEM?Tuesday, 10 April, 12A fluid grid-system adapts and changes in real-time
    • WIRE-FRAMING FOR A FLEXIBLE GRID SYSTEMTuesday, 10 April, 12Process will still need to be worked out, it will change how we work
    • DESIGNING FOR A FLEXIBLE GRID SYSTEMTuesday, 10 April, 12
    • POPULAR FLEXIBLE GRID SYSTEMSTuesday, 10 April, 12These are all designed for a 1024 x 768 pixel display and smaller...
    • Tuesday, 10 April, 12This grid system will scale down, or up, to any width.http://framelessgrid.com/
    • Tuesday, 10 April, 12This one dynamically changes it’s columns and gutters in a very fluid way.http://goldengridsystem.com/
    • STEP 3 USE FLEXIBLE MEDIA:Tuesday, 10 April, 12
    • Tuesday, 10 April, 12This image scales to fit each design. If we source the highest resolution images we can, we can adapt them for anyscreen.
    • STEP 4 MEDIA TYPES AND MEDIA QUERIES:Tuesday, 10 April, 12
    • MEDIA TYPES AND MEDIA QUERIES ALLOW: • Screen-size specific layouts • Screen-orientation specific layouts • Select media optimized for a device or screen resolution • Colours optimized for a device or screen • Different input options based on device (finger vs. mouse)Tuesday, 10 April, 12
    • SO, WHAT ARE WE SELLING?Tuesday, 10 April, 12
    • RIGHT NOW, WE SELL THIS: THEN WE SELL THIS:Tuesday, 10 April, 12
    • WE NEED TO START SELLING THIS: Your Website ? Phone Tablet Laptop Desktop HDTV FutureTuesday, 10 April, 12
    • WHAT’S NEXT FOR RESPONSIVE DESIGN?Tuesday, 10 April, 12
    • IT’S NOT JUST SIZE THAT MATTERS...Tuesday, 10 April, 12
    • ...IT’S HOW YOU USE IT...Tuesday, 10 April, 12As the sensors in these devices get better we can do more. High contrast version of a site when sunlight is detected.Larger buttons when put into your biker jacket. Detecting a TV near by. Knowing that you’re taking a macro photo.Knowing that you’re an infant.
    • ...AND IT’S ABOUT THE LITTLE THINGS... iPHONE 3GS iPHONE 4S 3.5 INCH SCREEN 3.5 INCH SCREEN 480 x 320 960 x 640 163 PPI 326 PPITuesday, 10 April, 12This is a trend we can expect to see in more and more displays...not just in mobile devices, but laptops and desktopstoo.
    • ...AND IT’S ABOUT MORE THAN JUST ADAPTING. IT’S ABOUT RESPONDING.Tuesday, 10 April, 12Responsive is going to mean a whole lot more as more and more technology becomes more and more aware of itssurroundings. It’s not going to just be about adapting, it’s going to be about responding.