Tweet
Tweet

Slide 1

Slide 1 text

Responsive Design The Difference Between Small Screen and Mobile Optimization by Jim Barraud @jbarraud

Slide 2

Slide 2 text

It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. - John Allsopp A Dao of Web Design : April 7, 2000 http://www.alistapart.com/articles/dao/ “ usable enjoyable JB ^

Slide 3

Slide 3 text

Mobile Mobile Design is designing for devices. Responsive Design is designing for context. vs. Responsive

Slide 4

Slide 4 text

Mobile Strategy takes into account actions you would do while being "mobile" • What's competitor prices of this thing I'm currently looking at? • What's the score of the Giants game? • Is mom's flight on time? (I wonder while security kicks me out of the pickup lane) Quickly looking up information in relation to a current situation Mobile vs. Responsive

Slide 5

Slide 5 text

Mobile Strategy takes into account actions you would do while being "mobile" • Finding a nearby restaurant • Finding the nearest XYZ store Location based actions Mobile vs. Responsive

Slide 6

Slide 6 text

Mobile Devices Mobile vs. Responsive Smart Phones Tablets eReaders

Slide 7

Slide 7 text

Mobile vs. Responsive Responsive design is not concerned with the mobile nature of the device, but the experience of using your site within the context of the device, mobile or not. • Devices don't have to be "mobile" • You're designing based on the context of the screen

Slide 8

Slide 8 text

Mobile vs. Responsive Responsive Devices Any device with web access and a browser (which of course includes mobile devices) Appliances Game Systems Computers

Slide 9

Slide 9 text

Mobile vs. Responsive Responsive Devices Any device with web access and a browser (which of course includes mobile devices) ? Unknown

Slide 10

Slide 10 text

• Your HTML should be clean and marked up semantically. • Consider the flow of your elements. Do not rely on absolutely positioning an element that resides in the bottom of your code to the top of your page. Your success of implementing a responsive site will rely on the following factors. (which make for good websites in general) Prerequisites Mobile vs. Responsive

Slide 11

Slide 11 text

Responsive Design • Mobile browsers tell websites to render at a different width then what the actual width of the device is. • Mobile Safari displays websites at a size of 980px wide, when it’s actual width, in portrait orientation, is 320px. This allows for the scaling that takes place. • Using the viewport tag allows us to change this and make 1px = 1px so the smaller screen alternatives of our sites render properly. The Viewport

Slide 12

Slide 12 text

Responsive Design Fluid Grid Code Example My Site

Slide 13

Slide 13 text

The 3 Pillars of Responsive Design Fluid Grids Flexible Images Media Queries Responsive Design

Slide 14

Slide 14 text

Responsive Design Fluid Grid • A fluid layout does not mean a table based layout. • Instead of based on pixels, your layouts are percentage based. • Allows for your site to adapt to screen sizes in between the ones you’re targeting The old fixed layout vs. liquid layout debate Flexible Images Media Queries

Slide 15

Slide 15 text

Responsive Design • Begin with a pixel based layout. These pixels will the basis for your percentage calculations. • Divide the target pixel value by the pixel value of the parent. • Don’t forget margins and padding. • Add a comment of your original calculation. (this will save you) How do I find the percentage value for my elements? Fluid Grid Flexible Images Media Queries

Slide 16

Slide 16 text

Responsive Design Fluid Grid Example MY SITE Main Content Nav

Slide 17

Slide 17 text

Responsive Design Fluid Grid Example MY SITE Main Content Nav

Slide 18

Slide 18 text

Responsive Design Fluid Grid Example MY SITE Main Content Nav

Slide 19

Slide 19 text

Responsive Design Fluid Grid Code Example .container{ width: 900px; } .sidebar{ float: left; width: 250px; }

Slide 20

Slide 20 text

Responsive Design Fluid Grid Code Example .container{ max-width: 900px; } .sidebar{ float: left; width: 250px; }

Slide 21

Slide 21 text

Responsive Design Fluid Grid Code Example .container{ max-width: 900px; } .sidebar{ float: left; width: 250px; } 250 / 900 = 0.27777777777778

Slide 22

Slide 22 text

Responsive Design Fluid Grid Code Example .container{ max-width: 900px; } .sidebar{ float: left; width: 27.777777777778%; /* 250/900 */ } Save your sanity

Slide 23

Slide 23 text

Responsive Design Fluid Grid Code Example : Margins .container{ width: 900px; } .sidebar{ float: left; width: 210px; margin: 10px 20px; }

Slide 24

Slide 24 text

Responsive Design Fluid Grid Code Example : Margins .container{ max-width: 900px; } .sidebar{ float: left; width: 23.333333333333%; /* 210/900 */ margin: 10px 2.222222222222%; /* 20/900 */ }

Slide 25

Slide 25 text

Responsive Design • Images are not given a defined height and width in the HTML • Images are sized based on the width of it’s parent container • Images are defined with a width of 100% in the CSS • This also applies to video, embed and object tags Fluid Grid Flexible Images Media Queries

Slide 26

Slide 26 text

Responsive Design Flexible Image Example MY SITE Main Content Nav

Slide 27

Slide 27 text

Responsive Design Flexible Image Example MY SITE Main Content

Slide 28

Slide 28 text

Responsive Design Flexible Image Example MY SITE Main Content Nav

Slide 29

Slide 29 text

Responsive Design Flexible Image Code Example .sidebar{ float: left; width: 27.777777777778%; /* 250/900 */ } .sidebar img{ width: 100%; }

Slide 30

Slide 30 text

Responsive Design • Background images can be sized using the background-size property. (Yay!) • background-size is only supported by the Firefox 4.0+, Safari 4.1+, Opera 10.0+ and IE 9+ (Boo.) • JS workarounds exist for older browsers. • Consider creative cropping via the overflow property Fluid Grid Flexible Images Media Queries What about background images?

Slide 31

Slide 31 text

Responsive Design • Media queries allow you to create break points based on various browser criteria. • We’re able to test for content width, device width, device orientation, aspect ratios and MORE! • With responsive design, we’re mostly interested in width based properties (and a dash of orientation) Fluid Grid Flexible Images Media Queries

Slide 32

Slide 32 text

Responsive Design Media Queries Example MY SITE Main Content Nav MY SITE Nav Main Content

Slide 33

Slide 33 text

Responsive Design Media Queries Code Example .sidebar{ float: left; width: 27.777777777778%; /* 250/900 */ } @media screen and (max-width: 480px){ .sidebar{ float: none; width: 100%; } }

Slide 34

Slide 34 text

Responsive Design Bringing It All Together MY SITE Main Content Nav

Slide 35

Slide 35 text

Responsive Design Bringing It All Together MY SITE Main Content

Slide 36

Slide 36 text

Responsive Design Bringing It All Together MY SITE Main Content Nav

Slide 37

Slide 37 text

Responsive Design Real World Examples Asbury Agile

Slide 38

Slide 38 text

Responsive Design Real World Examples Meltmedia

Slide 39

Slide 39 text

Responsive Design Real World Examples The Boston Globe

Slide 40

Slide 40 text

Responsive Design Real World Examples Forge

Slide 41

Slide 41 text

Responsive Design Some Points To Note • Responsive isn’t just about small screens. Consider how to take advantage of widescreen real estate as well. • Pay attention to how font sizes and leading react to your alternate layouts and when viewed in various devices. Adjustments will probably need to be made. • Fingers are bigger than mouse pointers.

Slide 42

Slide 42 text

Responsive Design Selling Responsive Design • Showing examples of other awesome sites will only get you so far. • Looking for mobile? Responsive may be all they need. • HTML Wireframes & Prototypes. It’s hard to convey what responsive means to solving your clients problem via static images. Responsive design takes more time and planning, so how do you sell it to your clients?

Slide 43

Slide 43 text

Responsive Design Suggested Resources • Fluid Grids • Fluid Images • Responsive Design • Media Queries Responsive Web Design by Ethan Marcotte

Slide 44

Slide 44 text

THANKS! @jbarraud http://jimbarraud.com