Embed Size (px)
DESCRIPTION
Citation preview
Responsive Web DesignPripremite mobitele.
“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/
Web
Above the fold?
Responsive designmax-width anyone?
Progressive enhancementAdaptivno je pristupačno.
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/
Sadržaj...u kontekstu uređaja i rezolucija,
prikazan na pristupačan i jednostavan način.
Timeline
052010
Eksplozija pametnih telefona i tableta
Responsive Web Design
Timeline
052010
Eksplozija pametnih telefona i tableta
Responsive Web Design
Manje stranice
Timeline
052010
112011
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice
Timeline
052010
112011
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice Trend
Timeline
052010
112011
032012
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice Trend
Vaš sljedeći site?
Razmišljati responzivno...i dizajnirati!
Grid i rezolucijaKoju rezoluciju odabrati kao početnu?
Koji grid koristiti?
1024px ili 320pxJednostavno.
320px (mobile)Mobile first*
* Luke Wroblewski
FokusSamo najbitnije, bez nepotrebnih elemenata
(kvalitetno korisničko iskustvo).KISS*
*Keep it simple, stupid!
Mobile UI vs. Desktop UIFacebook, Twitter...
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/
1024px (desktop)Nepotrebni elementi*
display:none;
Fixed ili fluid?Jednostavnost ili prilagodljivost
Jednostavnost.
Brži i jednostavniji izračun.
width:220px;
Međurezolucije?
Prilagodljivost.
Sve se definira u postotcima.
Target ÷ Context/* 220 / 940 */
23.404255319149%
% px
PixelPixeli više nisu u centru pažnje?
Jesu.
TipografijaPrilagoditi tipografiju rezoluciji.
Font size, line height, margin, padding...
TehnologijaHTML5, CSS3, JS...
CSS3Media Query
/* 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"/>
JSCross browser support.
Images & media.
/* 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
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
Mobile browseriWebkit?
Proces izrade
Gdje je granica?Photoshop vs. HTML&CSS
Sadržaj
PHP, ASP...
HTML & CSS
Izrada predložaka
Brief, wireframes, mockups...Koncept i priprema
Dizajn & UI
Rezanje
Development
Testiranje i isporuka
TestiranjeMobitel, Tablet, Desktop...
Koncept i priprema Dizajn & UI
Development
Isporuka
Rezanje
Problemi i rješenjaŠto i kako
NavigacijaOduzima prostor no bitna za dobar UX
creativenights.com informationarchitects.jp blagonic.com (soon)
SlideriTouch friendly
woothemes.com/flexslider/
FormeFunkcionalno i na malom ekranu.
Koliko je to moguće.
TabliceResponsive tables.
filamentgroup.com/examples/rwd-table-patterns/
Wifi, 3G, Edge...Korištenje tableta i mobilnih uređaja
na putu, u kući, na poslu...
DemoNapokon.
Portali...bostonglobe.com
Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com,
trentwalton.com...
Onepageri...
tzzz.hr/vinskitweetup
blagonic.com/posao
IskustvoFleksibilni grid, navigacija, forme...
blagonic.com/beta
Shameless self promotion
BudućnostCross browser support.
Media scaling.Tableti i mobiteli.
mediaqueri.es
Inspiracija
