Embed Size (px)
DESCRIPTION
Citation preview
Responsive Web Design
Web IndustrijaLucijan Blagoni!
“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 Web DesignNovi naziv za staru tehnologiju
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
052012
Eksplozija pametnih telefona i tableta
Responsive Web Design BostonGlobe.com
Manje stranice Trend
Vaš sljedeći site?
Razmišljati responzivno...i dizajnirati!
Fluid Grid Fixed Grid
Jednostavnost.
Brži i jednostavniji izračun.
width:220px;
Međurezolucije?
Prilagodljivost.
Sve se definira u postotcima.
Target ÷ Context/* 220 / 940 */
23.404255319149%
% px
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
Proces izrade1-2-3-4-5
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
Korisni savjetiŠto trebate pripaziti...
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/
Primjeri+ demo na vašem mobitelu, tabletu...
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
BudućnostCross browser support.
Media scaling.Tableti i mobiteli.
mediaqueri.es
Inspiracija
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.pdfslide.us/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
