Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
Henrik Ekelöf
@henrikekelof
Robert Piirainen
@robertpiira
Responsive Design
— ett nytt häftigt sätt att bygga mobilwebb
Vad det inte är:
Faktum är:
Det finns ingen mobilwebb.
Det finns inte en specifik webb för
mobila enheter.
Allt är samma webb.
640 x 480
800 x 600
1024 x 768
1024 x 768
320 x 480
1024 x 768
320 x 480
768 x 1024
The long and short of it is that we’re
designing for more devices, more input
types, more resolutions than ever
before. Th...
En sammanhängande upplevelse för alla,
oavsett enhet eller skärmstorlek.
Responsive Design
Flexibla grids Flexibel media Media queries
Grid Layout
+
FLEXIBLE GRIDS, THE MOVIE
Flexibel
Media
img {
max-width: 100%
}
Media Queries
CSS3
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
...
Queries
FLEXIBLE GRIDS, THE MOVIE PT.2
FEAT. MEDIA QUERIES
320px
480px
768px
1024px
1200px
Små skärmar - portrait läge
Små skärmar - landscape läge
iPad - portrait läge
iPad / Lapto...
320px
480px
640px
768px
800px
1024px
1200px
1344px
1600px
Små skärmar - portrait läge
Små skärmar - landscape läge
????
iP...
Flexibla grids Flexibel media Media queries
Problem & lösningar
Bakgrundsbilder
Optimering av
bakgrundsbilder i CSS
‣ Använd endast Data URIs för bilder som ska
visas i alla storlekar
li {
background:
url("data:image/
gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WO
yDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy...
Optimering av
bakgrundsbilder i CSS
‣ Använd endast Data URIs för bilder som ska
visas i alla storlekar
‣ Använd sprites
Sprites
Optimering av
bakgrundsbilder i CSS
‣ Använd endast Data URIs för bilder som ska
visas i alla storlekar
‣ Använd sprites
‣...
Innehållsbilder
Optimering av
innehållsbilder
‣ Använd Lazy load för bilder och hämta bara
de som ska visas
<img src="pixel.gif" data-original="example.jpg">
<img src="example.jpg">
Optimering av
innehållsbilder
‣ Använd Lazy load för bilder och hämta bara
de som ska visas
‣ Skala om bilder på servern
<!DOCTYPE html>
<html>
<head>
<script>
document.cookie = 'resolution=' +
Math.max(screen.width, screen.height) +
'; path=/...
Bilder
‣ De bakgrundsbilder som ska visas hämtas
‣ Alla innehållsbilder hämtas oavsett om de
ska visas eller ej
Legacy-versioner av
Internet Explorer
(IE8 och äldre)
/* Style för små skärmar och grundstyle för alla */
.example { ... }
@media all and (min-width: 321px) {
/* Style för lite...
1
2
3
4
5
6
7
8
/* Style för små skärmar och grundstyle för alla */
.example { ... }
@media all and (min-width: 321px) {
/...
/* Style för små skärmar och grundstyle för alla */
.example { ... }
/* Style för lite bredare (t.ex. iPhone landscape) */...
/* Style för små skärmar och grundstyle för alla */
.example { ... }
/* Style för lite bredare (t.ex. iPhone landscape) */...
<!DOCTYPE html>
<html>
<head>
<!--[if (gte IE 9)|!(IE)]><!-->
<link rel="stylesheet" href="rwd.css">
<!--<![endif]-->
<!--...
Responsive by design
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
960?
The control which designers know in the
print medium, and often desire in the
web medium, is simply a function of the
limi...
The journey begins by letting go of control,
and becoming flexible.
— John Allsopp
A dao of web design
En flexibel webb!
En flexibel webb
‣ Stora variationer på skärmupplösningar
Topp 10 skärmupplösningar
i Sverige under det senaste året
‣ Stora variationer på skärmupplösningar
‣ Olika enheter med olika egenskaper
‣ Konsumtion...
En flexibel webb
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
Prioritet: 1
Eftersom en allt större variation i skärm- och
fönsterstorlekar finns bland användare är den
allra bästa lösni...
Mobile First
Strategi?
Losing 80% of your screen space forces you
to focus. You need to make sure that what
stays on the screen is the most impor...
1. Semantisk, meningsfull markup
2. Separera design och layout
3. Introducera layout-stilar med media queries
4. “Mobila” ...
http://www.flickr.com/photos/merlin/sets/72157622077100537/
Responsiva
Verktyg
‣ Rendering av typsnitt skiljer sig från
webbläsare och andra operativsystem
‣ Olikheter i webbläsare
‣ Omöjligt att visua...
http://24ways.org/2009/make-your-mockup-in-markup
CSS
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
En responsiv
process
Presentera design i
webbläsaren
Summering
‣ Introduktion till Responsive Design
‣ Besvara vanliga frågeställningar
‣ Vägen framåt är flexibilitet,
inte an...
Henrik Ekelöf
@henrikekelof
Robert Piirainen
@robertpiira
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in …5
×

Responsive Design

2,538 views

Published on

Responsive design är inte en enda teknik, utan snarare en uppsättning tekniker och idéer som bildar en helhet. Vi berättar om varför det här är rätt sätt att bygga webb på och hur man gör.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,538
On SlideShare
0
From Embeds
0
Number of Embeds
97
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
  2. 2. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira
  3. 3. Responsive Design
  4. 4. — ett nytt häftigt sätt att bygga mobilwebb Vad det inte är:
  5. 5. Faktum är:
  6. 6. Det finns ingen mobilwebb.
  7. 7. Det finns inte en specifik webb för mobila enheter. Allt är samma webb.
  8. 8. 640 x 480 800 x 600 1024 x 768
  9. 9. 1024 x 768 320 x 480
  10. 10. 1024 x 768 320 x 480 768 x 1024
  11. 11. The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back. — Ethan Marcotte Responsive web design
  12. 12. En sammanhängande upplevelse för alla, oavsett enhet eller skärmstorlek.
  13. 13. Responsive Design Flexibla grids Flexibel media Media queries
  14. 14. Grid Layout
  15. 15. +
  16. 16. FLEXIBLE GRIDS, THE MOVIE
  17. 17. Flexibel Media
  18. 18. img { max-width: 100% }
  19. 19. Media Queries CSS3
  20. 20. width height device-width device-height orientation aspect-ratio device-aspect-ratio color ... Queries
  21. 21. FLEXIBLE GRIDS, THE MOVIE PT.2 FEAT. MEDIA QUERIES
  22. 22. 320px 480px 768px 1024px 1200px Små skärmar - portrait läge Små skärmar - landscape läge iPad - portrait läge iPad / Laptop - landscape läge Widescreen Brytpunkter
  23. 23. 320px 480px 640px 768px 800px 1024px 1200px 1344px 1600px Små skärmar - portrait läge Små skärmar - landscape läge ???? iPad - portrait läge ???? iPad / Laptop - landscape läge Widescreen ???? ???? Brytpunkter
  24. 24. Flexibla grids Flexibel media Media queries
  25. 25. Problem & lösningar
  26. 26. Bakgrundsbilder
  27. 27. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar
  28. 28. li { background: url("data:image/ gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WO yDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGl CQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQK GIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCB MQiB0UjIQA7") no-repeat left center; }
  29. 29. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites
  30. 30. Sprites
  31. 31. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites ‣ Blanda inte bilder avsedda för olika skärmbredder i samma sprite
  32. 32. Innehållsbilder
  33. 33. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas
  34. 34. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">
  35. 35. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas ‣ Skala om bilder på servern
  36. 36. <!DOCTYPE html> <html> <head> <script> document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/'; </script> </head> <body> <img src="example.jpg" alt="">
  37. 37. Bilder ‣ De bakgrundsbilder som ska visas hämtas ‣ Alla innehållsbilder hämtas oavsett om de ska visas eller ej
  38. 38. Legacy-versioner av Internet Explorer (IE8 och äldre)
  39. 39. /* Style för små skärmar och grundstyle för alla */ .example { ... } @media all and (min-width: 321px) { /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } } @media all and (min-width: 481px) { /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } } @media all and (min-width: 769px) { /* Style för breda skärmar */ .example { ... } }
  40. 40. 1 2 3 4 5 6 7 8 /* Style för små skärmar och grundstyle för alla */ .example { ... } @media all and (min-width: 321px) { /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } } @media all and (min-width: 481px) { /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } } @media all and (min-width: 769px) { /* Style för breda skärmar */ .example { ... } }
  41. 41. /* Style för små skärmar och grundstyle för alla */ .example { ... } /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } /* Style för breda skärmar */ .example { ... } 1 3 5 7
  42. 42. /* Style för små skärmar och grundstyle för alla */ .example { ... } /* Style för lite bredare (t.ex. iPhone landscape) */ .example { ... } /* Style för ytterligare lite bredare skärmar (t.ex. iPad portrait) */ .example { ... } /* Style för breda skärmar */ .example { ... }
  43. 43. <!DOCTYPE html> <html> <head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="rwd.css"> <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="rwd-ie.css"> <![endif]--> ...
  44. 44. Responsive by design
  45. 45. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  46. 46. 960?
  47. 47. 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
  48. 48. The journey begins by letting go of control, and becoming flexible. — John Allsopp A dao of web design
  49. 49. En flexibel webb!
  50. 50. En flexibel webb ‣ Stora variationer på skärmupplösningar
  51. 51. Topp 10 skärmupplösningar i Sverige under det senaste året
  52. 52. ‣ Stora variationer på skärmupplösningar ‣ Olika enheter med olika egenskaper ‣ Konsumtion... En flexibel webb
  53. 53. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  54. 54. Prioritet: 1 Eftersom en allt större variation i skärm- och fönsterstorlekar finns bland användare är den allra bästa lösningen att skapa en layout som är flexibel och kan anpassa sig efter användarens förutsättningar och önskemål. Undvik att göra en webbplats med låst layout. — 24-timmarswebben Skapa en design som fungerar oavsett fönster- och skärmstorlek
  55. 55. Mobile First Strategi?
  56. 56. Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. — Luke W Mobile first helps with big issues
  57. 57. 1. Semantisk, meningsfull markup 2. Separera design och layout 3. Introducera layout-stilar med media queries 4. “Mobila” CSS:er + media queries = Desktop site Mobile first: Responsive design
  58. 58. http://www.flickr.com/photos/merlin/sets/72157622077100537/
  59. 59. Responsiva Verktyg
  60. 60. ‣ Rendering av typsnitt skiljer sig från webbläsare och andra operativsystem ‣ Olikheter i webbläsare ‣ Omöjligt att visualisera en responsiv layout
  61. 61. http://24ways.org/2009/make-your-mockup-in-markup
  62. 62. CSS
  63. 63. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  64. 64. En responsiv process
  65. 65. Presentera design i webbläsaren
  66. 66. Summering ‣ Introduktion till Responsive Design ‣ Besvara vanliga frågeställningar ‣ Vägen framåt är flexibilitet, inte anpassning till populära enheter
  67. 67. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira

×