responsive web design
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/1.jpg)
Responsive Web DesignPripremite mobitele.
![Page 2: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/2.jpg)
![Page 3: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/3.jpg)
![Page 4: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/4.jpg)
“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/
![Page 5: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/5.jpg)
Web
![Page 6: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/7.jpg)
Above the fold?
![Page 8: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/8.jpg)
Responsive designmax-width anyone?
![Page 9: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/9.jpg)
Progressive enhancementAdaptivno je pristupačno.
![Page 10: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/10.jpg)
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/
![Page 11: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/11.jpg)
Sadržaj...u kontekstu uređaja i rezolucija,
prikazan na pristupačan i jednostavan način.
![Page 12: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/12.jpg)
Timeline
052010
Eksplozija pametnih telefona i tableta
Responsive Web Design
![Page 13: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/13.jpg)
Timeline
052010
Eksplozija pametnih telefona i tableta
Responsive Web Design
Manje stranice
![Page 14: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/14.jpg)
Timeline
052010
112011
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice
![Page 16: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/16.jpg)
Timeline
052010
112011
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice Trend
![Page 17: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/17.jpg)
Timeline
052010
112011
032012
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice Trend
Vaš sljedeći site?
![Page 18: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/18.jpg)
Razmišljati responzivno...i dizajnirati!
![Page 19: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/19.jpg)
Grid i rezolucijaKoju rezoluciju odabrati kao početnu?
Koji grid koristiti?
![Page 20: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/20.jpg)
1024px ili 320pxJednostavno.
![Page 21: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/21.jpg)
320px (mobile)Mobile first*
* Luke Wroblewski
![Page 22: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/22.jpg)
FokusSamo najbitnije, bez nepotrebnih elemenata
(kvalitetno korisničko iskustvo).KISS*
*Keep it simple, stupid!
![Page 23: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/23.jpg)
Mobile UI vs. Desktop UIFacebook, Twitter...
![Page 24: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/24.jpg)
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/
![Page 25: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/25.jpg)
1024px (desktop)Nepotrebni elementi*
display:none;
![Page 26: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/26.jpg)
Fixed ili fluid?Jednostavnost ili prilagodljivost
![Page 27: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/27.jpg)
Jednostavnost.
Brži i jednostavniji izračun.
width:220px;
Međurezolucije?
Prilagodljivost.
Sve se definira u postotcima.
Target ÷ Context/* 220 / 940 */
23.404255319149%
% px
![Page 28: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/28.jpg)
PixelPixeli više nisu u centru pažnje?
Jesu.
![Page 29: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/29.jpg)
TipografijaPrilagoditi tipografiju rezoluciji.
Font size, line height, margin, padding...
![Page 30: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/30.jpg)
TehnologijaHTML5, CSS3, JS...
![Page 31: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/31.jpg)
CSS3Media Query
![Page 32: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/32.jpg)
/* 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"/>
![Page 33: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/33.jpg)
JSCross browser support.
Images & media.
![Page 34: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/34.jpg)
/* 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
![Page 35: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/35.jpg)
imgSize.jsImage resizing
unstoppablerobotninja.com/entry/fluid-images/
Responsive Images<img src="small.jpg?full=large.jpg" />
github.com/filamentgroup/Responsive-Images
fitvids.jsFluid width video embeds
fitvidsjs.com
![Page 36: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/36.jpg)
Mobile browseriWebkit?
![Page 37: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/37.jpg)
Proces izrade
![Page 38: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/38.jpg)
Gdje je granica?Photoshop vs. HTML&CSS
![Page 39: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/39.jpg)
Sadržaj
PHP, ASP...
HTML & CSS
Izrada predložaka
Brief, wireframes, mockups...Koncept i priprema
Dizajn & UI
Rezanje
Development
Testiranje i isporuka
![Page 40: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/40.jpg)
TestiranjeMobitel, Tablet, Desktop...
Koncept i priprema Dizajn & UI
Development
Isporuka
Rezanje
![Page 41: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/41.jpg)
Problemi i rješenjaŠto i kako
![Page 42: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/42.jpg)
NavigacijaOduzima prostor no bitna za dobar UX
![Page 43: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/43.jpg)
creativenights.com informationarchitects.jp blagonic.com (soon)
![Page 44: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/44.jpg)
SlideriTouch friendly
![Page 45: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/45.jpg)
woothemes.com/flexslider/
![Page 46: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/46.jpg)
FormeFunkcionalno i na malom ekranu.
Koliko je to moguće.
![Page 47: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/47.jpg)
TabliceResponsive tables.
![Page 48: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/48.jpg)
filamentgroup.com/examples/rwd-table-patterns/
![Page 49: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/49.jpg)
Wifi, 3G, Edge...Korištenje tableta i mobilnih uređaja
na putu, u kući, na poslu...
![Page 50: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/50.jpg)
DemoNapokon.
![Page 51: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/51.jpg)
Portali...bostonglobe.com
![Page 53: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/53.jpg)
Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com,
trentwalton.com...
![Page 57: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/57.jpg)
Onepageri...
![Page 58: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/58.jpg)
tzzz.hr/vinskitweetup
![Page 59: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/59.jpg)
blagonic.com/posao
![Page 60: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/60.jpg)
IskustvoFleksibilni grid, navigacija, forme...
![Page 61: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/61.jpg)
blagonic.com/beta
Shameless self promotion
![Page 62: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/62.jpg)
BudućnostCross browser support.
Media scaling.Tableti i mobiteli.
![Page 63: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022061108/544f2122af79596a6a8b49b1/html5/thumbnails/63.jpg)
mediaqueri.es
Inspiracija