Top Banner
Responsive Web Design Pripremite mobitele.
64

Responsive Web Design

Oct 28, 2014

Download

Design

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Responsive Web Design

Responsive Web DesignPripremite mobitele.

Page 2: Responsive Web Design

Print

Page 3: Responsive Web Design
Page 4: Responsive Web Design

“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

Web

Page 6: Responsive Web Design
Page 7: Responsive Web Design

Above the fold?

Page 8: Responsive Web Design

Responsive designmax-width anyone?

Page 9: Responsive Web Design

Progressive enhancementAdaptivno je pristupačno.

Page 10: Responsive Web Design

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

Sadržaj...u kontekstu uređaja i rezolucija,

prikazan na pristupačan i jednostavan način.

Page 12: Responsive Web Design

Timeline

052010

Eksplozija pametnih telefona i tableta

Responsive Web Design

Page 13: Responsive Web Design

Timeline

052010

Eksplozija pametnih telefona i tableta

Responsive Web Design

Manje stranice

Page 14: Responsive Web Design

Timeline

052010

112011

Eksplozija pametnih telefona i tableta

Responsive Web Design BostonGlobe.com

Manje stranice

Page 16: Responsive Web Design

Timeline

052010

112011

Eksplozija pametnih telefona i tableta

Responsive Web Design BostonGlobe.com

Manje stranice Trend

Page 17: Responsive Web Design

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

Razmišljati responzivno...i dizajnirati!

Page 19: Responsive Web Design

Grid i rezolucijaKoju rezoluciju odabrati kao početnu?

Koji grid koristiti?

Page 20: Responsive Web Design

1024px ili 320pxJednostavno.

Page 21: Responsive Web Design

320px (mobile)Mobile first*

* Luke Wroblewski

Page 22: Responsive Web Design

FokusSamo najbitnije, bez nepotrebnih elemenata

(kvalitetno korisničko iskustvo).KISS*

*Keep it simple, stupid!

Page 23: Responsive Web Design

Mobile UI vs. Desktop UIFacebook, Twitter...

Page 24: Responsive Web Design

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

1024px (desktop)Nepotrebni elementi*

display:none;

Page 26: Responsive Web Design

Fixed ili fluid?Jednostavnost ili prilagodljivost

Page 27: Responsive Web Design

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

PixelPixeli više nisu u centru pažnje?

Jesu.

Page 29: Responsive Web Design

TipografijaPrilagoditi tipografiju rezoluciji.

Font size, line height, margin, padding...

Page 30: Responsive Web Design

TehnologijaHTML5, CSS3, JS...

Page 31: Responsive Web Design

CSS3Media Query

Page 32: Responsive Web Design

/* 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

JSCross browser support.

Images & media.

Page 34: Responsive Web Design

/* 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

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

Mobile browseriWebkit?

Page 37: Responsive Web Design

Proces izrade

Page 38: Responsive Web Design

Gdje je granica?Photoshop vs. HTML&CSS

Page 39: Responsive Web Design

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

TestiranjeMobitel, Tablet, Desktop...

Koncept i priprema Dizajn & UI

Development

Isporuka

Rezanje

Page 41: Responsive Web Design

Problemi i rješenjaŠto i kako

Page 42: Responsive Web Design

NavigacijaOduzima prostor no bitna za dobar UX

Page 43: Responsive Web Design

creativenights.com informationarchitects.jp blagonic.com (soon)

Page 44: Responsive Web Design

SlideriTouch friendly

Page 46: Responsive Web Design

FormeFunkcionalno i na malom ekranu.

Koliko je to moguće.

Page 47: Responsive Web Design

TabliceResponsive tables.

Page 48: Responsive Web Design

filamentgroup.com/examples/rwd-table-patterns/

Page 49: Responsive Web Design

Wifi, 3G, Edge...Korištenje tableta i mobilnih uređaja

na putu, u kući, na poslu...

Page 50: Responsive Web Design

DemoNapokon.

Page 51: Responsive Web Design

Portali...bostonglobe.com

Page 53: Responsive Web Design

Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com,

trentwalton.com...

Page 57: Responsive Web Design

Onepageri...

Page 59: Responsive Web Design

blagonic.com/posao

Page 60: Responsive Web Design

IskustvoFleksibilni grid, navigacija, forme...

Page 61: Responsive Web Design

blagonic.com/beta

Shameless self promotion

Page 62: Responsive Web Design

BudućnostCross browser support.

Media scaling.Tableti i mobiteli.