Your SlideShare is downloading. ×
Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Design

2,177
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.

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,177
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bild: Kevin Cornell Lånad från: http://www.alistapart.com/articles/responsive-web-design/
  • 2. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira
  • 3. Responsive Design
  • 4. — ett nytt häftigt sätt att bygga mobilwebb Vad det inte är:
  • 5. Faktum är:
  • 6. Det finns ingen mobilwebb.
  • 7. Det finns inte en specifik webb för mobila enheter. Allt är samma webb.
  • 8. 640 x 480 800 x 600 1024 x 768
  • 9. 1024 x 768 320 x 480
  • 10. 1024 x 768 320 x 480 768 x 1024
  • 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. En sammanhängande upplevelse för alla, oavsett enhet eller skärmstorlek.
  • 13. Responsive Design Flexibla grids Flexibel media Media queries
  • 14. Grid Layout
  • 15. +
  • 16. FLEXIBLE GRIDS, THE MOVIE
  • 17. Flexibel Media
  • 18. img { max-width: 100% }
  • 19. Media Queries CSS3
  • 20. width height device-width device-height orientation aspect-ratio device-aspect-ratio color ... Queries
  • 21. FLEXIBLE GRIDS, THE MOVIE PT.2 FEAT. MEDIA QUERIES
  • 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. 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. Flexibla grids Flexibel media Media queries
  • 25. Problem & lösningar
  • 26. Bakgrundsbilder
  • 27. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar
  • 28. li { background: url("data:image/ gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WO yDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7//// wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGl CQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQK GIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCB MQiB0UjIQA7") no-repeat left center; }
  • 29. Optimering av bakgrundsbilder i CSS ‣ Använd endast Data URIs för bilder som ska visas i alla storlekar ‣ Använd sprites
  • 30. Sprites
  • 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. Innehållsbilder
  • 33. Optimering av innehållsbilder ‣ Använd Lazy load för bilder och hämta bara de som ska visas
  • 34. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">
  • 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. <!DOCTYPE html> <html> <head> <script> document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/'; </script> </head> <body> <img src="example.jpg" alt="">
  • 37. Bilder ‣ De bakgrundsbilder som ska visas hämtas ‣ Alla innehållsbilder hämtas oavsett om de ska visas eller ej
  • 38. Legacy-versioner av Internet Explorer (IE8 och äldre)
  • 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. 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. /* 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. /* 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. <!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. Responsive by design
  • 45. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 46. 960?
  • 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. The journey begins by letting go of control, and becoming flexible. — John Allsopp A dao of web design
  • 49. En flexibel webb!
  • 50. En flexibel webb ‣ Stora variationer på skärmupplösningar
  • 51. Topp 10 skärmupplösningar i Sverige under det senaste året
  • 52. ‣ Stora variationer på skärmupplösningar ‣ Olika enheter med olika egenskaper ‣ Konsumtion... En flexibel webb
  • 53. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  • 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. Mobile First Strategi?
  • 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. 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. http://www.flickr.com/photos/merlin/sets/72157622077100537/
  • 59. Responsiva Verktyg
  • 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. http://24ways.org/2009/make-your-mockup-in-markup
  • 62. CSS
  • 63. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  • 64. En responsiv process
  • 65. Presentera design i webbläsaren
  • 66. Summering ‣ Introduktion till Responsive Design ‣ Besvara vanliga frågeställningar ‣ Vägen framåt är flexibilitet, inte anpassning till populära enheter
  • 67. Henrik Ekelöf @henrikekelof Robert Piirainen @robertpiira