Responsive Web Design
1 like1,022 views
The document discusses responsive web design, which involves designing websites to provide an optimal viewing and interaction experience across a wide range of devices like desktop computer monitors, tablets, and mobile phones. It covers key techniques like fluid grids, flexible images, and media queries to adapt the layout based on screen size. The timeline shows how responsive design emerged with the explosion of smartphones and tablets in the 2010s. It provides examples of responsive sites and discusses challenges like navigation, forms, tables and videos on small screens. The document emphasizes designing for the mobile experience first using a mobile-first approach.
Responsive Web Design
- 1. Responsive Web Design Pripremite mobitele.
- 2. Print
- 4. We should embrace the fact that the web doesnt have the same constraints, and design for this 鍖exibility. John Allsopp, A Dao of Web Design www.alistapart.com/articles/dao/
- 5. Web
- 8. Responsive design max-width anyone?
- 9. Progressive enhancement Adaptivno je pristupano.
- 10. Responsive Web Design Fluid grids, 鍖exible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Ethan Marcotte, Responsive Web Design www.alistapart.com/articles/responsive-web-design/
- 11. 皆温糸姻転温逮 ...u kontekstu ureaja i rezolucija, prikazan na pristupaan i jednostavan nain.
- 12. Timeline Eksplozija pametnih telefona i tableta 05 2010 Responsive Web Design
- 13. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 2010 Responsive Web Design
- 14. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com
- 15. bostonglobe.com
- 16. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com
- 17. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 03 2010 2011 2012 Responsive Web Design BostonGlobe.com Va邸 sljedei site?
- 18. Razmi邸ljati responzivno ...i dizajnirati!
- 19. Grid i rezolucija Koju rezoluciju odabrati kao poetnu? Koji grid koristiti?
- 20. 1024px ili 320px Jednostavno.
- 21. 320px (mobile) Mobile 鍖rst* * Luke Wroblewski
- 22. Fokus Samo najbitnije, bez nepotrebnih elemenata (kvalitetno korisniko iskustvo). KISS* *Keep it simple, stupid!
- 23. Mobile UI vs. Desktop UI Facebook, Twitter...
- 24. 320 and up* 320 and Up prevents mobile devices from downloading desktop assets by using a tiny screens stylesheet as its starting point. * stuffandnonsense.co.uk/projects/320andup/
- 25. 1024px (desktop) Nepotrebni elementi* display:none;
- 26. Fixed ili 鍖uid? Jednostavnost ili prilagodljivost
- 27. % px Prilagodljivost. Jednostavnost. Sve se de鍖nira u Br転i i jednostavniji postotcima. izraun. Target 歎 Context width:220px; /* 220 / 940 */ 23.404255319149% Meurezolucije?
- 28. Pixel Pixeli vi邸e nisu u centru pa転nje? Jesu.
- 29. 意庄沿看乙姻温鍖j温 Prilagoditi tipogra鍖ju rezoluciji. Font size, line height, margin, padding...
- 31. CSS3 Media Query
- 32. /* CSS */ @media screen and (max-width:1024px) { #header { color:red; } } @media screen and (max-width:800px) { ... } @media screen and (max-width:480px) { ... } <!-- Inside <head> --> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="desktop.css" /> <link rel="stylesheet" media="screen and (max-width: 800px) href="medium.css"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css"/>
- 33. JS Cross browser support. Images & media.
- 34. /* CSS Media Queries Works in IE6-8, yay! */ @media screen and (max-width:1024px) { #header { color:red; } } @media screen and (max-width:800px) { ... } @media screen and (max-width:480px) { ... } <!-- Inside <head> --> <script type="text/javascript" src=/slideshow/responsive-web-design-12037598/12037598/"respond.js"></script> github.com/scottjehl/Respond
- 35. imgSize.js Image resizing unstoppablerobotninja.com/entry/鍖uid-images/ Responsive Images <img src=/slideshow/responsive-web-design-12037598/12037598/"small.jpg?full=large.jpg" /> github.com/鍖lamentgroup/Responsive-Images 鍖tvids.js Fluid width videoembeds 鍖tvidsjs.com
- 36. Mobile browseri Webkit?
- 37. Proces izrade
- 38. Gdje je granica? Photoshop vs. HTML&CSS
- 39. Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predlo転aka Rezanje HTML & CSS Development PHP, ASP... Testiranje i isporuka 皆温糸姻転温逮
- 40. Koncept i priprema Dizajn & UI Rezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka
- 41. Problemi i rje邸enja to i kako
- 42. Navigacija Oduzima prostor no bitna za dobar UX
- 43. creativenights.com informationarchitects.jp blagonic.com (soon)
- 46. Forme Funkcionalno i na malom ekranu. Koliko je to mogue.
- 49. Wi鍖, 3G, Edge... Kori邸tenje tableta i mobilnih ureaja na putu, u kui, na poslu...
- 50. Demo Napokon.
- 52. bostoglobe.com
- 53. Blogovi, osobni siteovi... hicksdesign.co.uk, jasonsantamaria.com, trentwalton.com...
- 55. trentwalton.com
- 57. Onepageri...
- 60. Iskustvo Fleksibilni grid, navigacija, forme...
- 61. Sham eless self p romo tion blagonic.com/beta
- 62. Budunost Cross browser support. Media scaling. Tableti i mobiteli.
- 63. a Inspiracij mediaqueri.es