(WI2012) Lucijan Blagonic - Responsive web design

1,067 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,067
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(WI2012) Lucijan Blagonic - Responsive web design

  1. 1. Responsive Web DesignLucijan Blagoni! Web Industrija
  2. 2. Print
  3. 3. “We should embrace the fact that theweb doesn’t have the same constraints, and design for this flexibility.” John Allsopp, “A Dao of Web Design” www.alistapart.com/articles/dao/
  4. 4. Web
  5. 5. Above the fold?
  6. 6. Responsive Web Design Novi naziv za staru tehnologiju
  7. 7. Responsive Web Design“Fluid grids, flexible images, and media queries are the three technicalingredients 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/
  8. 8. Sadržaj ...u kontekstu uređaja i rezolucija,prikazan na pristupačan i jednostavan način.
  9. 9. TimelineEksplozijapametnih telefonai tableta 05 2010 Responsive Web Design
  10. 10. TimelineEksplozijapametnih telefonai tableta Manje stranice 05 2010 Responsive Web Design
  11. 11. TimelineEksplozijapametnih telefonai tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com
  12. 12. bostonglobe.com
  13. 13. TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com
  14. 14. TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 05 2010 2011 2012 Responsive Web Design BostonGlobe.com Vaš sljedeći site?
  15. 15. Razmišljati responzivno ...i dizajnirati!
  16. 16. 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?
  17. 17. Tipografija Prilagoditi tipografiju rezoluciji.Font size, line height, margin, padding...
  18. 18. TehnologijaHTML5, CSS3, JS...
  19. 19. CSS3Media Query
  20. 20. /* 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"/>
  21. 21. JSCross browser support. Images & media.
  22. 22. /* 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
  23. 23. 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
  24. 24. Proces izrade 1-2-3-4-5
  25. 25. Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predložaka Rezanje HTML & CSS Development PHP, ASP...Testiranje i isporuka Sadržaj
  26. 26. Koncept i priprema Dizajn & UIRezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka
  27. 27. Korisni savjeti Što trebate pripaziti...
  28. 28. NavigacijaOduzima prostor no bitna za dobar UX
  29. 29. creativenights.com informationarchitects.jp blagonic.com (soon)
  30. 30. SlideriTouch friendly
  31. 31. woothemes.com/flexslider/
  32. 32. FormeFunkcionalno i na malom ekranu. Koliko je to moguće.
  33. 33. TabliceResponsive tables.
  34. 34. filamentgroup.com/examples/rwd-table-patterns/
  35. 35. Primjeri+ demo na vašem mobitelu, tabletu...
  36. 36. Portali...bostonglobe.com
  37. 37. bostoglobe.com
  38. 38. Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com, trentwalton.com...
  39. 39. jasonsantamaria.com
  40. 40. trentwalton.com
  41. 41. hicksdesign.co.uk
  42. 42. Onepageri...
  43. 43. tzzz.hr/vinskitweetup
  44. 44. blagonic.com/posao
  45. 45. IskustvoFleksibilni grid, navigacija, forme...
  46. 46. blagonic.com/beta
  47. 47. BudućnostCross browser support. Media scaling. Tableti i mobiteli.
  48. 48. aInspiracij mediaqueri.es
  49. 49. Hvala Lucijan Blagonic Blagonic Brotherswww.blagonic.com@lucijanblagoniclucijan@blagonic.com

×