Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design

on

  • 1,625 views

 

Statistics

Views

Total Views
1,625
Views on SlideShare
1,625
Embed Views
0

Actions

Likes
2
Downloads
35
Comments
1

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Web Design Responsive Web Design Presentation Transcript

    • Responsive Web Design Pripremite mobitele.
    • Print
    • “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/
    • Web
    • Above the fold?
    • Responsive design max-width anyone?
    • Progressive enhancement Adaptivno je pristupačno.
    • 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/
    • Sadržaj ...u kontekstu uređaja i rezolucija,prikazan na pristupačan i jednostavan način.
    • TimelineEksplozijapametnih telefonai tableta 05 2010 Responsive Web Design
    • TimelineEksplozijapametnih telefonai tableta Manje stranice 05 2010 Responsive Web Design
    • TimelineEksplozijapametnih telefonai tableta Manje stranice 05 11 2010 2011 Responsive Web Design BostonGlobe.com
    • bostonglobe.com
    • TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 2010 2011 Responsive Web Design BostonGlobe.com
    • TimelineEksplozijapametnih telefonai tableta Manje stranice Trend 05 11 03 2010 2011 2012 Responsive Web Design BostonGlobe.com Vaš sljedeći site?
    • Razmišljati responzivno ...i dizajnirati!
    • Grid i rezolucijaKoju rezoluciju odabrati kao početnu? Koji grid koristiti?
    • 1024px ili 320px Jednostavno.
    • 320px (mobile) Mobile first* * Luke Wroblewski
    • FokusSamo najbitnije, bez nepotrebnih elemenata (kvalitetno korisničko iskustvo). KISS* *Keep it simple, stupid!
    • Mobile UI vs. Desktop UI Facebook, 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
    • % px Prilagodljivost. Jednostavnost. Sve se definira u Brži i jednostavniji postotcima. izračun. Target ÷ Context width:220px; /* 220 / 940 */23.404255319149% Međurezolucije?
    • PixelPixeli više nisu u centru pažnje? Jesu.
    • Tipografija Prilagoditi 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.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
    • Mobile browseri Webkit?
    • Proces izrade
    • Gdje je granica?Photoshop vs. HTML&CSS
    • Koncept i priprema Brief, wireframes, mockups... Dizajn & UI Izrada predložaka Rezanje HTML & CSS Development PHP, ASP...Testiranje i isporuka Sadržaj
    • Koncept i priprema Dizajn & UIRezanje Development Testiranje Mobitel, Tablet, Desktop... Isporuka
    • 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
    • bostoglobe.com
    • Blogovi, osobni siteovi...hicksdesign.co.uk, jasonsantamaria.com, trentwalton.com...
    • jasonsantamaria.com
    • trentwalton.com
    • hicksdesign.co.uk
    • Onepageri...
    • tzzz.hr/vinskitweetup
    • blagonic.com/posao
    • IskustvoFleksibilni grid, navigacija, forme...
    • Sham eless self p romo tion blagonic.com/beta
    • BudućnostCross browser support. Media scaling. Tableti i mobiteli.
    • aInspiracij mediaqueri.es
    • Hvalawww.blagonic.com@lucijanblagoniclucijan@blagonic.com