point sizes. All fonts are OpenType from the Adobe Font Folio 11. ..... Workshops and training. Books and articles. Blog
2
FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN
My special thanks to: John Allsopp, Mark Boulton, Brad Frost, Jeremy Keith, Ethan Marcotte, Brian and Stephanie Rieger, Luke Wroblewski and all the designers and developers whose work I’ve featured.
#stno
Twitter, Instagram, Flickr
1
Becoming responsive
2
Responsive design process
3
Responsive design patterns
4
Technically speaking
ONE
John Allsopp 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%>lexibility.
http://www.alistapart.com/articles/dao
SMARTPHONES
• 102 million people accessed Facebook solely through their mobile device in June 2012 (up 23% from 83m in March.)
• 24% of Black Friday retail traffic in
2012 came from mobile devices, 14.3% in 2011 and 5.5% in 2010.
• In August 2012, 77% of TV viewers
used another device at the same time in a typical day. 81% used a smartphone and TV at the same time.
Source: http://lukew.com/ff/entry.asp?1450 http://lukew.com/ff/entry.asp?1624 http://lukew.com/ff/entry.asp?1665
Mobile gross volume $600M $2B $5B
2009 2010 2011
http://www.lukew.com/ff/entry.asp?1506
IPHONES
• iOS accounts for 54.65% of mobile browsing. Android has 16.26% and RIM 3.29%
• 75% of Google’s mobile search comes from iOS devices
• 70% of eBay’s mobile e-commerce business in the United States came from iPhone
• More iPhones are sold every day worldwide than there are babies born, 378,00 vs 371,00 Source: http://lukew.com/ff/entry.asp?1415 http://www.lukew.com/ff/entry.asp?1506
E-READERS
• Amazon now sells more Kindle books than all print books (hardcover and paperback) combined
• Adult e-books sales grew from 66.6
million in January 2011 to 99.5 million in January 2012
Source: http://lukew.com/ff/entry.asp?1391 http://lukew.com/ff/entry.asp?1536
KINDLE SALES • The share e-book reader owners in the
USA jumped from 10% to 19% between mid-December 2011 and early January 2012.
• Kindle Fire has become the best-selling,
most-gifted and most-wished-for product on Amazon.
• Gifting of Kindle books up 175% between Black Friday and Christmas Day 2011 compared to the same period in 2010.
• The #1 and #4 best-selling Kindle books released in 2011 were published using Kindle Direct Publishing.
Source: http://www.lukew.com/ff/entry.asp?1488
TABLETS IPADS • Over 100m iPads sold to date (October 2012)
• 52% of worldwide tablet marketshare is iPad (October 2012)
• 95.5% of all the web traffic from tablets comes from iPad (October 2012)
• Nearly 7 percent of all online purchases were made using iPads
• iPad and iPhone shoppers account for
90% of all mobile purchases and spend 19% more per order than Android users
Ethan Marcotte Rather%than%tailoring%disconnected%designs%to%each%of%an% everAincreasing%number%of%web%devices,%we%can%treat%them% as%facets%of%the%same%experience.%We%can%design%for%an% optimal%viewing%experience,%but%embed%standardsAbased% technologies%into%our%designs%to%make%them%not%only%more% >lexible,%but%more%adaptive%to%the%media%that%renders%them.
http://alistapart.com/articles/responsive-web-design
Three responsive ingredients A flexible grid Flexible images and media CSS3 media queries
Andy Clarke Anything%that’s%>ixed%and%unresponsive%isn’t%web%design% anymore,%it’s%something%else.%If%you%don’t%embrace%the% inherent%>luidity%of%the%web,%you’re%not%a%web%designer,% you’re%something%else.%Web%design%is%responsive%design.% Responsive%Web%Design%is%web%design,%done%right.
http://the-pastry-box-project.net/andy-clarke/2012-january-3/
Deciding when responsive is appropriate Different skills and workflow may be required More time spent at beginning of the process Additional resources may be required
Ben Callahan We%do%responsive%web%design,%but%we%don’t%do%it%for%the% sake%of%being%trendy.%We%do%it%because%we%believe%it’s%the% way%websites%should%be%made.%This%is%an%opportunity%for%us% to%>inally%embrace%the%dynamic%medium%we%build%for.%The% web%is%not%>ixed%width.%
http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
640x480
‘Letterbox’ framesets. (Can you believe we did that stuff?)
800x600
1024x768
Jason Santa Maria We%don’t%support%800%x%600%anymore,%nor%do%we%640%x%480. Do%you?
http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
320x420 320x420
420x320
Jeremy Keith Arguing%about%640,%800%or%1024%pixels%is%like%arguing%about% whether%Pepsi%tastes%better%than%Coke%when%really,%a%nice%glass% of%water%would%be%much%more%refreshing.%The%numbers%game%is% a%red%herring.%A%big%>ixedAwidth%red%herring.
http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
⌘N
Jason Santa Maria The%framework%for%what%a%page%is%has%changed%considerably%even%in% the%past%few%years,%though%our%applications%for%designing%those% frameworks%are%still%stuck%in%the%web%of%yore,%and%largely%dictated%by% their%use%for%print%design.%
http://v4.jasonsantamaria.com/articles/a-real-web-design-application
Design isn’t just about layout Typography Typefaces, type treatments and white space
Colour Emotion and interaction vocabulary
Texture Decorative elements, line-work, patterns and shapes
Layout Elements placed on a grid, horizontally and vertically
Trent Walton Web%designers%will%have%to%look%beyond%the%layout%in%front% of%them%to%envision%how%its%elements%will%re>low%&%lockup%at% various%widths%while%maintaining%form%&%hierarchy.%
http://trentwalton.com/2011/07/14/content-choreography
Design atmosphere Typography Typefaces, type treatments and white space
Colour Emotion and interaction vocabulary
Texture Decorative elements, line-work, patterns and shapes
FRV BRAND GUIDELINES ES
MASS: TYPOGRAPHY The Product Name should appear in Futura Std Bold Uppercase. This sans serif font has been chosen for its clarity, legibility and classic appeal.
ABCDEFGHIJKLMNOPQRSTUVWXYZ The Front Product Descriptor copy should appear in ITC Century Std Lowercase. This serif font has been chosen for its simple style and clarity even in smaller point sizes.
abcdefghijklmnopqrstuvwxyz The back of pack copy should appear in Futura Std. This sans serif font has been chosen for its simple style and clarity even in smaller point sizes.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz All fonts are OpenType from the Adobe Font Folio 11. (www.adobe.com/uk/products/fontfolio) 25
MASS: COLOUR PALETTE Mass products are made up of a warm colourful palette that is both complementary and contrasting. Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK. Pantone colours will provide the maximum amount of consistency across the Product Range. In instances where this is not possible we have created optimised CMYK values that are shown on page 18. In the instance that a suitable colour does not exist for a Mass Food product, please contact your Licensing Manager. MASS
PANTONE 7489 C
PANTONE 7495 C
PANTONE 366 C
PANTONE 383 C
PANTONE 7406 C
PANTONE 121 C
PANTONE 1235 C
PANTONE 7502 C
PANTONE 157 C
PANTONE 138 C
PANTONE 166 C
PANTONE Warm Red C
PANTONE 485 C
PANTONE 184 C
PANTONE 5005 C
PANTONE 7431 C
PANTONE 673 C
PANTONE 701 C
PANTONE 529 C
PANTONE 7446 C
PANTONE 659 C
PANTONE 7459 C
PANTONE 278 C
PANTONE 551 C
OUTDOOR
PANTONE 629 C
PANTONE 3105 C
PANTONE 3248 C
PANTONE 7466 C
PANTONE 7536 C
PANTONE 7530 C
PANTONE 583 C
PANTONE 291 C
17
MASS: PHOTOGRAPHY do’s and dont’s
Always use image in monochrome with a background colour wash
Never use in colour
Never use simply as black and white image
Never position anywhere other than bottom right
ITALIAN FUSILLI enjoy traditional texture with Durum Wheat Semolina
Never cover with copy
Never force the image into the given space – leave an area of blank space round the image
Never position the image around a corner 22
What we learned Mobile usage is out-pacing PC usage Our thinking about design needs to adapt Separate atmosphere from layout Create design guides first, not style guides last
TWO
What we’ll cover The ‘post-PC’ design workflow Making content design decisions Designing with web-font tools Typography and texture A new take on grid design
! " # $ %
Plan
%
Design
%
Develop
Hat tip to Ethan Marcotte
Deploy
! " # $ &
Plan
&
Design
&
Develop
Deploy
"
! Plan
&
' #
&
$ Deploy
Design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
Design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
Logo
Nav
Nav
Nav
Introduction
Call to action
Work introduction
Logo
Logo
Nav
Image
Logo
Logo
Logo
Mat “Wilto” Marquis @wilto
Mobile%users%want%to%see%our%menu,%hours,%and%delivery% number.%Desktop%users%de>initely%want%this%1mb%png%of% someone%smiling%at%a%salad.
https://twitter.com/wilto/status/63284673723375616
Stephen Hay’s responsive workflow Content inventory Content reference wireframes Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://www.slideshare.net/stephenhay/responsive-design-workflow
Stephen Hay’s responsive workflow Content inventory Content reference wireframes Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://www.slideshare.net/stephenhay/responsive-design-workflow
Content inventory Branding Navigation Introduction (with initial call to action) Work Conference speaking Workshops and training Books and articles Blog entries Call to action
Branding Navigation
Introduction
Work
Conference speaking Workshops and training Books and articles
Blog entries
Call to action
Branding
Navigation
Introduction
1. 2. 3. 4. 5. 6. 7. 8. 9.
Branding Navigation Introduction Work Conference speaking Workshops and training Books and articles Blog entries Call to action
Work
Conference speaking Workshops and training Books and articles
Blog entries
Call to action
Post-PC responsive workflow Stage one Content inventory Structured content Design atmosphere Design a flexible grid Sketch content and functionality HTML design prototype (first iteration)
Stage two Test layouts early on real devices Iterate through sketches and prototype revisions Test regularly Correct only what looks broken HTML design prototype (second iteration)
Stage three Create detailed visuals based on prototypes Develop final responsive templates
Back to design atmosphere Typography Typefaces, type treatments and white space
Colour Emotion and interaction vocabulary
Texture Decorative elements, line-work, patterns and shapes
Branding
Navigation
Introduction
1. 2. 3. 4. 5. 6. 7. 8. 9.
Branding Navigation Introduction Work Conference speaking Workshops and training Books and articles Blog entries Call to action
Work
Conference speaking Workshops and training Books and articles
Blog entries
Call to action
Sean Tubridy Responsive%design.%Mobile%>irst.%Progressive%enhancement.% These,%and%any%other%technical%approaches%where%your% content%can%take%different%forms%across%channels%and% platforms,%present%a%challenge%to%content%strategists.%The% content%you%create%needs%to%be%>lexible.
http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design
Responsive content Flows Content blocks change width and height
Collapses Accordions, carousels and scrollers
Deleted
Content strategy questions How should this content flow? What’s the order of importance? Should ‘this’ go above or below ‘that’?
When should this content collapse? How should it collapse? Accordion, carousel or scroller?
Should this content be deleted?
Fonts installed iOS6: 260 iOS5: 58 Android uses Roboto Windows Phone 8 uses Segoe
a
a
a
a
a
a
a
a
10
11
12
14
16
18
21
24
a
a
36
48
a
a
a
a
a
a
a
a
10
11
12
14
16
18
21
24
a
a
36
48
a
a
a
a
a
a
a
a
10
11
12
14
16
18
21
24
a
a
36
48
Tip: Create a file to test heading sizes on actual devices, not narrow browser windows
Tip: Test body text sizes with users during the design phase
http://goo.gl/o23Vc
http://www.flickr.com/photos/brad_frost/7387764524
Mat “Wilto” Marquis @wilto
%No,%you% guys.%No.
http://twitter.com/wilto/status/116589243777814528
Stephanie Rieger’s ‘Strategies for choosing test devices’ iPhone 3GS, iOS 4.3.n, 320 x 480 (no retina display) iPhone 4, iOS 5, 320 x 480 (retina display) iPad, iOS 5, 1024 x 768 (no retina display) Android 2.1 – Motorola, 480 x 600 Android 2.3 – HTC, 480 x 320 (QWERTY) Android 2.3 – Huawei, 320 x 480 (low CPU) Android 3.0 – Samsung, 320 x 480 (low CPU, low dpi) Android 2.3.4 – Kindle Fire, 1024 x 600 (7″ tablet)
http://stephanierieger.com/strategies-for-choosing-test-devices/
Design test devices Small screen smartphone (eg: iPhone 3GS, 4 or 4S) Large screen smartphone (eg: Google Nexus) Medium screen tablet (eg: Google Nexus 7 or Kindle Fire 7 HD) Large screen table (eg: iPad, iPad 2 or the New iPad) Opera Mobile Emulator (Mac App Store)
http://html.adobe.com/edge/inspect/
http://itunes.apple.com/us/app/aptus/id510487565
Major breakpoint
Major breakpoint
Major breakpoint
320
720
1024
iPhone, many Android and Blackberry devices
Some tablets, most netbooks, many desktops
Minor breakpoint
Minor breakpoint
Minor breakpoint
Minor breakpoint
Minor breakpoint
Minor breakpoint
240
360
480
600
640
768
Some Android and many Blackberry devices (p)
Symbian Touch (p)
iPhone < 5, Android and some Symbian devices (l)
Some tablets and e-readers
Some Symbian Touch (l)
Minor breakpoint
Minor breakpoint
800 1280 1366
iPad and some Some tablets tablets (p)
Hat tip to Stephanie Rieger
Minor breakpoint
Some tablets
Many laptops
480 x 320
568 x 320
Jeremy Keith Breakpoints%should%not%be%dictated%by%devices,%but%by% content.%Let%the%content%decide%when%to%expand%and%when% adjust%your%designs.
http://www.lukew.com/ff/entry.asp?1393
http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
A fluid grid
target ÷ context = result 896px
target ÷ 896 = result 252px
620px
Mark Boulton’s pro-tip Use odd numbered pixels for gutters (21, 23, 25) to allow for a 1px column rule between columns 25px
25px
What we learned We need ‘post-PC’ design workflows Flowing, collapsing and removing content Web-font design tools are essential Make typography feel native to the device Combine content and device breakpoints Design your own bespoke grid
THREE
What we’ll cover Learning by example Navigation design patterns Content module patterns Responsive advertising
Navigation design patterns Reflow Transform Collapse
Reflowing navigation
Reflowing navigation
Reflowing navigation
(
)
(
(
+
*
*
http://currys.co.uk/gbuk/index.html
monocle.com
Navigation essentials Include only essential navigation Use top navigation for common tasks Use bottom navigation for exploring Don’t duplicate navigation
Content module patterns Stack Float Transform
Item
Item
Item
Item
Item
Item
Start with ‘item’ divisions. Give them widths, float them or use display:table properties to form a modular grid (more on those later)
A
B
A
B
A
B
A
B
A
B
A
B
Add two elements inside each ‘item.’ These could be any appropriate block-level elements. We’ll call them A and B. Float them when space allows
Item
Item
Item
For small screens, stack items vertically
A
B
A
B
A
B
Float A and B when space allows
Item
Item
Item
Start with ‘item’ divisions. Give them widths, float them or use display:table
A
B
A
B
A
B
Add two elements inside each ‘item.’ These could be any appropriate block-level elements. We’ll call them A and B. Float them when space allows
A
B For small screens, stack items and A and B elements vertically
Item
Item
Item
Start with ‘item’ divisions. Give them widths, float them or use display:table
A
B
A
B
A
B
Add two elements inside each ‘item.’ These could be any appropriate block-level elements. We’ll call them A and B. Float them when space allows
C
D
B
C
D
B
C
D
B
Sub-divide the A element into two. We’ll call them C and D. Float them when space allows
C
D
B
C
D
B For medium screens, stack A and B elements vertically
C
D
B
For small screens, stack all elements (items, A, B, C and D) vertically
Item
Item For small screens, stack items vertically
Item
Item
Item
For medium and larger screens, arrange items horizontally
.promo-item { background-size : contain; }
New Albums
See All
Album title
Album title
Album title
Artist name
Artist name
Artist name
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
.net magazine: Top 20 CSS sites of 2012 I’m not sure that fat fella at the top deserves to be there.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
.net magazine: Top 20 CSS sites of 2012 I’m not sure that fat fella at the top deserves to be there.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year.
+
Thanks also to Marc Thiele for his hard work to make these videos available.
+ +
Horizontal design patterns Don’t rely on ‘little circles’ Use arrows to indicate direction of travel Show hints of what’s outside the viewport
728 x 90 IMU (Leaderboard)
300 x 100 IMU (3:1 Rectangle)
180 x 150 IMU (Rectangle)
120 x 60 IMU (Button 2)
160 x 600 IMU (Wide Skycraper)
300 x 250 IMU (Medium Rectangle)
Mark Boulton’s ‘slot packages’ Leaderboard
Banner MMU
Small screens
Banner
Medium screens
Banner MMU
Large screens Leaderboard
Banner MMU
Navigation
[…]
Complementary
[…] […] […]
300x100
300x100
300x250
.a728x90 { display : none; }
Navigation
Main
Complementary
[role="main"] { float : left; width : 54.737%; /* 408px */ } [role="complementary"] { float : right; width : 40.983%; /* 300px */ min-width : 300px;}
728x90
Main
300x100
300x100
300x250
728x90
Main
300x100
Complementary
300x100
Main
300x100
Complementary
IMU-based grid 24px
24px
300 x 100 IMU (3:1 Rectangle)
84px
84px
84px
IMU-based grid
84px columns, 24px gutters 3 columns at 300px (320) 4 columns at 408px (480) 5 columns at 516px (600) 7 columns at 732px (768) 9 columns at 948px (992)
What we learned Responsive examples Navigation flows, collapses and transforms Content module transformations Dealing with fixed widths and responsive advertising
Slides http://goo.gl/eg3Ob
Resources http://goo.gl/py55q
What we’ll cover Structuring media queries from small screens up Inheriting not adaptive styles Sizing text with new flexible units Working with images for high ppi screens Alternatives to bitmaps CSS properties for flexible layouts
.speaker-carousel { background-image : url("body.png"); position : absolute; width : 2025px; z-index : 30; } @media all and (max-device-width: 480px), all and (max-width: 800px) { .speaker-carousel { display : none; } }
Adding media queries to desktop sites does not make a mobile experience Oh how we laughed when we realized our mistake
Progressive enhancement + content first + responsive design = Content first responsive design
Content first responsive layout Small screen designs are the default Media Queries scale up, not down More accessible, more responsible
@media print {…} @media screen and (min-width : 480px)
{…}
@media screen and (min-width : 600px)
{…}
@media screen and (min-width : 768px)
{…}
@media screen and (min-width : 992px)
{…}
@media screen and (min-width : 1382px) {…}
Developing a foundation Content Develop a foundation stylesheet Colour, texture and typography
Use rems for font-sizing Mobile first images Optimize images for performance
Minimal Javascript
Enhancing the foundation Build styles progressively Use inheritance and the cascade
Lazy-load large assets at appropriate sizes Add webfonts over 600px Use micro-queries for minor breakpoints Fixed-widths for Internet Explorer 6–8
HTML
CSS @-webkit-viewport { width : device-width; } @-moz-viewport { width : device-width; } @-ms-viewport { width : device-width; } @-o-viewport { width : device-width; } @viewport { width : device-width; }
http://dev.w3.org/csswg/css-device-adapt/
HTML Interpreted by mobile browsers as an indicator of mobile markup
Control layout width rendered in Internet Explorer Mobile
Runs full-screen on iOS devices
The problem with ems body { font-size : 62.5%; } h1 p ul ul
{ { { p
font-size : font-size : font-size : { font-size
2.4em; /* 24px */ } 1.6em; /* 16px */ } 1.6em; /* 16px */ } : 1.6em; /* ? */ }
Sizing type with rems body { font-size : 62.5%; } h1 p ul ul
{ { { p
font-size : font-size : font-size : { font-size
2.4rem; /* 24px */ } 1.6rem; /* 16px */ } 1.6rem; /* 16px */ } : 1.6rem; /* 16px */ }
CSS h1 { font-size : 32px; font-size : 3.2rem; }
LESS MIXIN .font-size(@font-size: 16){ @rem: (@font-size / 10); font-size : @font-size * 1px; font-size : ~"@{rem}rem"; } .font-size(32);
Sizing type with vws h1 { font-size : 32px; font-size : 3.2rem; font-size: 5.4vw; }
vw Equal to 1% of the width of the viewport
vh Equal to 1% of the height of the viewport
vmin Equal to either vw or vh, whichever is smaller
vmax New. The opposite behaviour to vmin
Current browser support Chrome 20+ Internet Explorer 10+
img { max-width : 100%; }
390px 195px 186px
372px
477px 455px
910px x 955px
http://macrabbit.com/slicy
http://itunes.apple.com/gb/app/duplex/id551984804
sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES; sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;
https://gist.github.com/3191869
http://www.jpegmini.com
http://www.pngmini.com
[role="banner"] div p { background-image : url(banner-m-lg.png); }
@media only screen only screen only screen only screen only screen only screen
and and and and and and
(-webkit-min-device-pixel-ratio : 2), ( min--moz-device-pixel-ratio : 2), ( -o-min-device-pixel-ratio : 2/1), ( min-device-pixel-ratio: 2), ( min-resolution : 192dpi), ( min-resolution : 2dppx) {
[role="banner"] div p { background-image : url(
[email protected]); background-size : 225px 380px; } }
sprite.png
[email protected]
.ss-target { background : url(sprite.png) no-repeat 0 0; } .ss-link { background : url(sprite.png) no-repeat -100px 0; } @media only screen only screen only screen only screen only screen only screen
and and and and and and
(-webkit-min-device-pixel-ratio : 2), ( min--moz-device-pixel-ratio : 2), ( -o-min-device-pixel-ratio : 2/1), ( min-device-pixel-ratio: 2), ( min-resolution : 192dpi), ( min-resolution : 2dppx) {
.ss-target, .ss-link { background-image { url(
[email protected]) } background-size : 200px 200px; } }
10px 10px 10px 10px
10px
10px
4 7
8
10px
10px
10px
3 6
10px
2
9
10px
1
10px
button { border-image-slice : 10 10 10 10; border-image-source : url(button.png); } button { border-image : url(button.png) 10 10 10 10; } button { border-image : url(button.png) 10 10 10 10; border-width : 10px 10px 10px 10px; }
10px
20px
30px
40px
1
2
4 7
3 6
8
9
button { border-image-slice : 10 10 10 10 fill; border-image-source : url(button.png); }
http://blog.assortedgarbage.com/2011/12/change-happens
Stretch Stretches slice areas to fill horizontally or vertically
Repeat Repeats slice areas to fill horizontally or vertically
Round Resizes a slice so that only whole pieces fit when repeating
Space Repeats whole slice pieces and adds space to fill a border evenly
Content [Content] Navigation
[Navigation]
Navigation
[Content] Content [Navigation]
Display table properties display : table Defines element as a block-level table
display : table-caption Treats element as a caption for the table (caption-side : top | bottom | inherit)
display : table-row An element represents a row of cells
display : table-cell An element represents a table cell
Display table properties display : table-header-group A row group always displayed before all other rows and row groups and after any top captions
display : table-footer-group A row group always displayed after all other rows and row groups and after any bottom captions
display : table-row-group One or more rows of cells
table-row An ‘anonymous box’ created by applying display:table-cell to an element
table An ‘anonymous box’ created by applying display:table-cell to an element
Content
Navigation [Content]
Navigation
[Navigation]
@media only screen and Navigation
(min-width: 600px) { a[href="#nav"] { display : none; }
Content
body { display : table; border-collapse : collapse; } [role="navigation"] { display : table-header-group; } }
Navigation
Content
.content { display : table; border-collapse : collapse; }
Navigation
Main
[role="main"] { display : table-cell; width : 64.6%; } [role="complementary"] { display : table-cell; width : 35.39%; }
Complementary
Navigation
Main
[role="main"] { width : 71.87%; } [role="complementary"] { width : 28.12%; }
Complementary
Navigation
[Navigation]
Banner
[Banner]
@media only screen and (min-width: 600px) {
Banner
.ihatetimvandamme { display : table; } [role="banner"] { display : table-header-group; }
Navigation
}
Col
Col
.content { overflow : hidden; } .col { display : table-cell; width : 33.33%; }
Col
Col
Col
.content { display : table-row; } .col { display : table-cell; width : 33.33%; }
Col
Col
.col:nth-of-type(2) { position : relative; } .col:nth-of-type(2) img { position : absolute; right : 0; }
Inner
.col:nth-of-type(2) .inner { position : relative; } .col:nth-of-type(2) .inner img { position : absolute; right : 0; }