Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a (WI2012) Lucijan Blagonic - Responsive web design
Similar a (WI2012) Lucijan Blagonic - Responsive web design (20)
Más de Web::INDUSTRIJA
Más de Web::INDUSTRIJA (11)
Último
Último (20)
(WI2012) Lucijan Blagonic - Responsive web design
- 1. Responsive Web Design Lucijan Blagoni! Web Industrija
- 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 Web Design Novi naziv za staru tehnologiju
- 9. 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/
- 10. Sadržaj ...u kontekstu uređaja i rezolucija, prikazan na pristupačan i jednostavan način.
- 11. Timeline Eksplozija pametnih telefona i tableta 05 2010 Responsive Web Design
- 12. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 2010 Responsive Web Design
- 13. Timeline Eksplozija pametnih telefona i tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com
- 14. bostonglobe.com
- 15. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com
- 16. Timeline Eksplozija pametnih telefona i tableta Manje stranice Trend 05 11 05 2010 2011 2012 Responsive Web Design BostonGlobe.com Vaš sljedeći site?
- 17. Razmišljati responzivno ...i dizajnirati!
- 18. Fluid Grid Fixed Grid % px Prilagodljivost. Jednostavnost. Sve se definira u Brži i jednostavniji postotcima. izračun. Target ÷ Context width:220px; /* 220 / 940 */ 23.404255319149% Međurezolucije?
- 19. Tipografija Prilagoditi tipografiju rezoluciji. Font size, line height, margin, padding...
- 21. CSS3 Media Query
- 22. /* 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"/>
- 23. JS Cross browser support. Images & media.
- 24. /* 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
- 25. 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
- 26. Proces izrade 1-2-3-4-5
- 27. Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predložaka Rezanje HTML & CSS Development PHP, ASP... Testiranje i isporuka Sadržaj
- 28. Koncept i priprema Dizajn & UI Rezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka
- 29. Korisni savjeti Što trebate pripaziti...
- 30. Navigacija Oduzima prostor no bitna za dobar UX
- 31. creativenights.com informationarchitects.jp blagonic.com (soon)
- 34. Forme Funkcionalno i na malom ekranu. Koliko je to moguće.
- 37. Primjeri + demo na vašem mobitelu, tabletu...
- 39. bostoglobe.com
- 40. Blogovi, osobni siteovi... hicksdesign.co.uk, jasonsantamaria.com, trentwalton.com...
- 42. trentwalton.com
- 44. Onepageri...
- 47. Iskustvo Fleksibilni grid, navigacija, forme...
- 49. Budućnost Cross browser support. Media scaling. Tableti i mobiteli.
- 50. a Inspiracij mediaqueri.es
- 51. Hvala Lucijan Blagonic Blagonic Brothers www.blagonic.com @lucijanblagonic lucijan@blagonic.com