Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Responsive Web Design
Ähnlich wie Responsive Web Design (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Responsive Web Design
- 1. Responsive Web Design Pripremite mobitele.
- 2. Print
- 4. “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” www.alistapart.com/articles/dao/
- 5. Web
- 8. Responsive design max-width anyone?
- 9. Progressive enhancement Adaptivno je pristupačno.
- 10. Responsive Web Design “Fluid grids, flexible 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. Sadržaj ...u kontekstu uređaja i rezolucija, prikazan na pristupačan i jednostavan način.
- 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š sljedeći site?
- 18. Razmišljati responzivno ...i dizajnirati!
- 19. Grid i rezolucija Koju rezoluciju odabrati kao početnu? Koji grid koristiti?
- 20. 1024px ili 320px Jednostavno.
- 21. 320px (mobile) Mobile first* * Luke Wroblewski
- 22. Fokus Samo najbitnije, bez nepotrebnih elemenata (kvalitetno korisničko 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 screen’s stylesheet as its starting point. * stuffandnonsense.co.uk/projects/320andup/
- 25. 1024px (desktop) Nepotrebni elementi* display:none;
- 26. Fixed ili fluid? Jednostavnost ili prilagodljivost
- 27. % px Prilagodljivost. Jednostavnost. Sve se definira u Brži i jednostavniji postotcima. izračun. Target ÷ Context width:220px; /* 220 / 940 */ 23.404255319149% Međurezolucije?
- 28. Pixel Pixeli više nisu u centru pažnje? Jesu.
- 29. Tipografija Prilagoditi tipografiju 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="respond.js"></script> github.com/scottjehl/Respond
- 35. imgSize.js Image resizing unstoppablerobotninja.com/entry/fluid-images/ Responsive Images <img src="small.jpg?full=large.jpg" /> github.com/filamentgroup/Responsive-Images fitvids.js Fluid width video embeds fitvidsjs.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 Sadržaj
- 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 moguće.
- 49. Wifi, 3G, Edge... Korištenje tableta i mobilnih uređaja na putu, u kući, 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. Budućnost Cross browser support. Media scaling. Tableti i mobiteli.
- 63. a Inspiracij mediaqueri.es