Slide 1
Slide 1 text
Responsive Design
Beyond Frameworks
Marko Mrdjenovič
@friedcell
CTO @ CubeSensors
Slide 2
Slide 2 text
Me...
• Marko Mrdjenovič aka. friedcell
• UX-conscious web developer
• Parsek, Zemanta, DeckReport
• ...now CTO @ CubeSensors
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Responsive Design
Slide 5
Slide 5 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 6
Slide 6 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 7
Slide 7 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 8
Slide 8 text
Device != Context
Slide 9
Slide 9 text
Devices
• Desktop computer
• Laptop
• Tablet (iPad & others)
• Phone (iPhone, Android & others)
Slide 10
Slide 10 text
Contexts
• 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 11
Slide 11 text
Assumptions
• Connection speed
• Location
• Focus
• Input
Slide 12
Slide 12 text
Doing Responsive
Slide 13
Slide 13 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 14
Slide 14 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 15
Slide 15 text
Goals
• Who are your users?
• What are their needs?
• How are you meeting the needs?
• SMART goals
Slide 16
Slide 16 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 17
Slide 17 text
Content
• What kinds of content do you need?
• What is the tone of the content?
• How will it be adapted to different sizes?
• How is the content structured?
Slide 18
Slide 18 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 19
Slide 19 text
Structure
• Importance of pieces of content / UI
• Relationships between them
Slide 20
Slide 20 text
Structure outputs
• Sketch
• Wireframe
• Prototype
• Comp
Slide 21
Slide 21 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 22
Slide 22 text
Responsive System
A system that defines the rules which
govern the change of the layout with
respect to the viewport.
Slide 23
Slide 23 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 24
Slide 24 text
Breakpoint Matrix
by James Melzer, eightshapes (http://jamesmelzer/responsive)
Slide 25
Slide 25 text
Breakpoints
Slide 26
Slide 26 text
Breakpoints
•iMac: 2560×1440, 1920×1080
•MacBook Pro/Air: 1920×1200,
1680×1050, 1440×900, 1280×800...
•iPad: 1024×768, 768×1024
•iPhone: 480x320, 320×480, 568x320...
Slide 27
Slide 27 text
WRONG!
Slide 28
Slide 28 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 29
Slide 29 text
radionula.com
Slide 30
Slide 30 text
online.vinskivodic.si
Slide 31
Slide 31 text
Process
• Goals
• Content
• Structure
• Design
• Development
Slide 32
Slide 32 text
Development
• frameworks
• @media rules
• feature detection
• fixed / fluid / elastic
Slide 33
Slide 33 text
Development
• frameworks
• @media rules
• feature detection
• fixed / fluid / elastic
Slide 34
Slide 34 text
Frameworks
• Bootstrap
• Foundation
• GridSet
• SUSY grid
Slide 35
Slide 35 text
Development
• frameworks
• @media rules
• feature detection
• fixed / fluid / elastic
Slide 36
Slide 36 text
@media rules
body {font-size:100%;}
@media screen and (max-width:600px) {
body {font-size:87.5%;}
}
Slide 37
Slide 37 text
@media rules
body {font-size:87.5%;}
@media screen and (min-width:600px) {
body {font-size:100%;}
}
Slide 38
Slide 38 text
@media rules
body {font-size:87.5%;}
@media screen and (min-width:600px) {
body {font-size:100%;}
}
@media screen and (min-width:900px) {
body {font-size:112.5%}
}
Slide 39
Slide 39 text
@media rules
body {font-size:87.5%;}
@media screen and (min-width:900px) {
body {font-size:112.5%}
}
@media screen and (min-width:600px) {
body {font-size:100%;}
}
NEVER APPLIED
Slide 40
Slide 40 text
@media rules
body {font-size:87.5%;}
@media screen and (min-width:900px) {
body {font-size:112.5%}
}
@media screen and (min-width:600px) and
(max-width:899px) {
body {font-size:100%;}
}
Slide 41
Slide 41 text
@media rules
body {font-size:87.5%;letter-spacing:1px;}
@media screen and (min-width:900px) {
body {font-size:112.5%;letter-spacing:0;}
}
@media screen and (min-width:600px) and
(max-width:899px) {
body {font-size:100%;letter-spacing:0;}
}
Slide 42
Slide 42 text
@media rules
@media screen and (min-device-pixel-ratio:1.5) {
#logo {
background-image:url(retina.png);
/* 700px × 260px */
background-size: 350px 130px;
}
}
Slide 43
Slide 43 text
@media rules
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min--moz-device-pixel-ratio: 1.5),
screen and (-o-min-device-pixel-ratio: 3/2),
screen and (min-device-pixel-ratio: 1.5),
screen and (min-resolution: 144dpi),
screen and (min-resolution: 1.5dppx) {
/* retina styles here */
}
Slide 44
Slide 44 text
Development
• frameworks
• @media rules
• feature detection
• fixed / fluid / elastic
Slide 45
Slide 45 text
Feature detection
• Modernizr
• DIY from Modernizr source
• Often not needed because of CSS/HTML
features
Slide 46
Slide 46 text
Development
• frameworks
• @media rules
• feature detection
• fixed / fluid / elastic
Slide 47
Slide 47 text
Fixed / fluid / elastic
• Fixed is obsolete
• Fluid is stuff you should use most
• Elastic used for text-based UI
Slide 48
Slide 48 text
But...
• Images have a fixed size?
• Videos have a fixed size?
Slide 49
Slide 49 text
Use tricks
.respond {
width:100%;
}
Slide 50
Slide 50 text
Use tricks
.respond {
width:100%;
max-width:200px;
}
Slide 51
Slide 51 text
Intrinsic ratios
.wrapper {
position: relative;
height:0;padding-bottom:75%;
}
.element {
position: absolute;
top:0;left:0;width:100%;height:100%;
}
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Slide 52
Slide 52 text
Other options
• Use background images with
background-size cover / contain
• Use fixed sized images inside
overflow:hidden responsive containers
• ...
Slide 53
Slide 53 text
More
• Responsive Web Design - Ethan Marcotte
• Responsive Patterns
• Responsive Web Design Weekly
Slide 54
Slide 54 text
RWD != 42
Slide 55
Slide 55 text
How to decide
• Write down things users do on the
desktop version & mobile version
• Order them by priority
• Compare
• If fuzzy do m., otherwise responsive
http://www.cennydd.co.uk/2013/the-gradient-chart
Slide 56
Slide 56 text
Even if you go m.
build it responsive,
not all phones have
the same resolution.
Slide 57
Slide 57 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 58
Slide 58 text
Thanks.
Ping me @friedcell