Tweet
Tweet

Slide 1

Slide 1 text

Defining Breakpoints Marko Mrdjenovič (@friedcell), #mcrd

Slide 2

Slide 2 text

“Web design is responsive design, Responsive Web Design is web design, done right.” Andy Clarke, 2011 http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/

Slide 3

Slide 3 text

The idea Create one version of the site design, code & content that responds to the limitations of the environment it’s viewed in.

Slide 4

Slide 4 text

The idea Create one version of the site design, code & content that responds to the limitations of the environment it’s viewed in. NOT THE DEVICE!

Slide 5

Slide 5 text

Device != Context

Slide 6

Slide 6 text

Device • Desktop computer • Laptop • Tablet (iPad & others) • Phone (iPhone, Android & others)

Slide 7

Slide 7 text

Context • In a bar while waiting for others • On a bus on your way to work • In a queue at a post office • At home on a couch • During lunch

Slide 8

Slide 8 text

“How do they do it?”

Slide 9

Slide 9 text

Process • Goals • Content (Inventory) • Structure (Wireframe) • Design (Responsive System) • Development (@media, feature detection)

Slide 10

Slide 10 text

Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport.

Slide 11

Slide 11 text

Responsive System A system that defines the rules which govern the change of the layout with respect to the viewport. NOT THE DEVICE!

Slide 12

Slide 12 text

Breakpoints

Slide 13

Slide 13 text

Resolutions •iMac: 2560×1440, 1920×1080 •MacBook Pro/Air: 1920×1200, 1680×1050, 1440×900, 1280×800, 1366×768 •iPad: 1024×768, 768×1024 •iPhone: 480x320, 320×480

Slide 14

Slide 14 text

WRONG!

Slide 15

Slide 15 text

Content! Look at the content and add breakpoints where it makes sense for content to break. Then fine-tune the sizes that are important in terms of visitors.

Slide 16

Slide 16 text

radionula.com

Slide 17

Slide 17 text

online.vinskivodic.si

Slide 18

Slide 18 text

Techinques • @media screen and (min-width: 320px) • width in %, min-width, max-width • clear & float • font-size, line-height • column-count

Slide 19

Slide 19 text

Shady techinques • overflow • text-overflow • transform:scale

Slide 20

Slide 20 text

Shadiest techinque Device detection •not future proof •thus good ONLY for providing legacy version

Slide 21

Slide 21 text

RWD&D != 42

Slide 22

Slide 22 text

"You've got to start with the customer experience and work back toward the technology, not the other way around." Steve Jobs, 1997

Slide 23

Slide 23 text

Thanks. Ping me @friedcell