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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design

1,359
views

Published on

Published in: Design, Technology, Business

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,359
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
37
Comments
1
Likes
2
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. Responsive Web Design Pripremite mobitele.
  • 2. Print
  • 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. Web
  • 5. Above the fold?
  • 6. Responsive design max-width anyone?
  • 7. Progressive enhancement Adaptivno je pristupačno.
  • 8. 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/
  • 9. Sadržaj ...u kontekstu uređaja i rezolucija,prikazan na pristupačan i jednostavan način.
  • 10. TimelineEksplozijapametnih telefonai tableta 05 2010 Responsive Web Design
  • 11. TimelineEksplozijapametnih telefonai tableta Manje stranice 05 2010 Responsive Web Design
  • 12. TimelineEksplozijapametnih telefonai tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com
  • 13. bostonglobe.com
  • 14. TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com
  • 15. TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 03 2010 2011 2012 Responsive Web Design BostonGlobe.com Vaš sljedeći site?
  • 16. Razmišljati responzivno ...i dizajnirati!
  • 17. Grid i rezolucijaKoju rezoluciju odabrati kao početnu? Koji grid koristiti?
  • 18. 1024px ili 320px Jednostavno.
  • 19. 320px (mobile) Mobile first* * Luke Wroblewski
  • 20. FokusSamo najbitnije, bez nepotrebnih elemenata (kvalitetno korisničko iskustvo). KISS* *Keep it simple, stupid!
  • 21. Mobile UI vs. Desktop UI Facebook, Twitter...
  • 22. 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/
  • 23. 1024px (desktop) Nepotrebni elementi* display:none;
  • 24. Fixed ili fluid?Jednostavnost ili prilagodljivost
  • 25. % px Prilagodljivost. Jednostavnost. Sve se definira u Brži i jednostavniji postotcima. izračun. Target ÷ Context width:220px; /* 220 / 940 */23.404255319149% Međurezolucije?
  • 26. PixelPixeli više nisu u centru pažnje? Jesu.
  • 27. Tipografija Prilagoditi tipografiju rezoluciji.Font size, line height, margin, padding...
  • 28. TehnologijaHTML5, CSS3, JS...
  • 29. CSS3Media Query
  • 30. /* 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"/>
  • 31. JSCross browser support. Images & media.
  • 32. /* 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
  • 33. 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
  • 34. Mobile browseri Webkit?
  • 35. Proces izrade
  • 36. Gdje je granica?Photoshop vs. HTML&CSS
  • 37. Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predložaka Rezanje HTML & CSS Development PHP, ASP...Testiranje i isporuka Sadržaj
  • 38. Koncept i priprema Dizajn & UIRezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka
  • 39. Problemi i rješenja Što i kako
  • 40. NavigacijaOduzima prostor no bitna za dobar UX
  • 41. creativenights.com informationarchitects.jp blagonic.com (soon)
  • 42. SlideriTouch friendly
  • 43. woothemes.com/flexslider/
  • 44. FormeFunkcionalno i na malom ekranu. Koliko je to moguće.
  • 45. TabliceResponsive tables.
  • 46. filamentgroup.com/examples/rwd-table-patterns/
  • 47. Wifi, 3G, Edge...Korištenje tableta i mobilnih uređaja na putu, u kući, na poslu...
  • 48. DemoNapokon.
  • 49. Portali...bostonglobe.com
  • 50. bostoglobe.com
  • 51. Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com, trentwalton.com...
  • 52. jasonsantamaria.com
  • 53. trentwalton.com
  • 54. hicksdesign.co.uk
  • 55. Onepageri...
  • 56. tzzz.hr/vinskitweetup
  • 57. blagonic.com/posao
  • 58. IskustvoFleksibilni grid, navigacija, forme...
  • 59. Sham eless self p romo tion blagonic.com/beta
  • 60. BudućnostCross browser support. Media scaling. Tableti i mobiteli.
  • 61. aInspiracij mediaqueri.es
  • 62. Hvalawww.blagonic.com@lucijanblagoniclucijan@blagonic.com