responsive design - iscte

23
João Belchior ( Jolidog ) ISCTE Junho 2012

Upload: fidibiko

Post on 30-Oct-2014

767 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Responsive Design - ISCTE

João Belchior ( Jolidog )

ISCTE Junho 2012

Page 2: Responsive Design - ISCTE

João Belchior ( Jolidog )

FULL TIME Freelance

Page 3: Responsive Design - ISCTE

João Belchior ( Jolidog )

KID Wife dog

community

legos

reading

music

movies

sleeping

podcasts

friends

design

Page 4: Responsive Design - ISCTE

SO...

Page 5: Responsive Design - ISCTE

The control which designers know in the print medium, and often desire

in the web medium, is simply a function of the limitation of the printed page.

We should embrace the fact that the web doesn’t have the same constraints,

and design for this flexibility.But first, we must “accept the ebb and

flow of things.”

http://www.alistapart.com/articles/dao/

- John Allsopp, “A Dao of Web Design”

Ethan Marcotte

Responsive Webdesign

http://www.alistapart.com/articles/responsive-web-design/

An event apart2000 2010...

The good

SEEdS

Page 6: Responsive Design - ISCTE

Design and development that responds to the behavior of the user and the context (screen size, platform and orientation).

Join layout, flexible grids, fluid images and CSS3 media queries.

RESPONSIVE

The good

Page 7: Responsive Design - ISCTE

Mobiles and tablets will outnumber desktops very quickly.

More people are connecting to the web ex-clusively on these devices.

Avoid a new development phase every time a new device is launched.

Mobile users are not on the go.

Mobile devices don’t have limited connec-tions.

WHY

The good

Page 8: Responsive Design - ISCTE

RETHINK YOUR CONTENTSAdopt a mobile first approach, clean up the cluter.

GRIDS

FIXEDhttp://lessframework.com/ FLUIDShttp://www.alistapart.com/articles/responsive-web-design/

IMAGES AND VIDEOSmax-width: 100%;http://www.alistapart.com/articles/fluid-images/

MEDIA QUERIESCSS3 Module

JAVASCRIPThttp://code.google.com/p/css3-mediaqueries-js/https://github.com/scottjehl/Respond

HOW

The good

Page 9: Responsive Design - ISCTE

http://hicksdesign.co.uk/

http://www.informationarchitects.jp/

http://thinkvitamin.com/

http://css-tricks.com/

http://fidibiko.com/

FIXEd GRIdS EXAMPLES

The good

shameless plug

Page 10: Responsive Design - ISCTE

FLEXIBLE EXAMPLE

http://www.bostonglobe.com/

The good

Page 11: Responsive Design - ISCTE

The good

Core is slow... but contrib is fast!

Page 12: Responsive Design - ISCTE

dRUPAL MOdULES

Not so ugly

ANd THEMES

http://drupal.org/project/responsive_imagesIntegrates the Responsive Images librarycreated by Filament Group.

http://drupal.org/project/resp_img

http://drupal.org/project/media_responsive

http://drupal.org/project/cs_adaptive_image

http://drupal.org/project/adaptive_image

http://drupal.org/project/borealis

http://drupal.org/project/fit_text

http://drupal.org/project/omega

http://drupal.org/project/arctica

http://drupal.org/project/adaptivetheme

http://drupal.org/project/zen

http://drupal.org/project/mothership

Page 13: Responsive Design - ISCTE

RESPONSIVE WEB DESIGN BY ETHAN MAR-COTTEhttp://www.abookapart.com/products/responsive-web-design

HARDBOILED WEB DESIGN BY ANDY CLARKEhttp://hardboiledwebdesign.com

OTHER RESOURcES

The goodThe good

Page 14: Responsive Design - ISCTE

We still have to support IE7 and IE8 respond.js not always the answer

SOLUTION?every browser receives the base styles, every browser receives the rest using media queries and IE7 - 8 get the large screens styles with conditional style sheets.

cONS:repeat some code, fractured css styles.

SUPPORT THE OLd

IE9 is actually a good browser...

The bad

Page 15: Responsive Design - ISCTE

Finding out when to loadbigger images

There is a race condition for the first page load, you want to query the de-vice size but the dom is loading and images downloading.

Browsers are preloading pages before cookies are set.

What to do when there is no js

WHEN TO dELIVER

SOLUTION?https://github.com/tubalmartin/riloadr

cONS:Browsers without js get a <noscript> tag with the smallest image size.Mobile first approach

The bad

Page 16: Responsive Design - ISCTE

Testing is hard, expensiveand impossible to complete.

The tools are not a good fit.Designers and all involved are still

learning the process.

TOOLS ANd TESTING

All the mockups, wireframes tools are still working on a fixed pixel mindset.

SOLUTION?Work with what you can, find what fits your workflow, go back, interate, re-peat.

Too many devices and many more are comming.

SOLUTION?Keep with the standards, don’t code for specific devices, unless there is a very good reason for it.

The bad

Page 17: Responsive Design - ISCTE

Let’s look at some code...

Page 18: Responsive Design - ISCTE

But first some context!

Page 19: Responsive Design - ISCTE

Like an AP or Reuters, but with community of locals on the ground instead of staffers.

Based on the principles of freedom of speech and freedom of information.

Clients all over the world.

We don’t keep the copyright and devide our sales 50/50 with our contributors.

www.demotix.com

Page 20: Responsive Design - ISCTE

1.5 million page views

30.000+ Registered users

6.000+ Active contributors

1200 images a day from every country recognized by the UN and a few more

Almost 1.200.000 nodes

Tech team as 4 backend developers.

One frontend developer.

Very tight deadlines.

Working on Drupal 6.

Page 21: Responsive Design - ISCTE

THE AcTUAL PROcESS

Not so ugly

Wireframes Design Prototype Move into drupal

Release

Test

Iterate

Page 22: Responsive Design - ISCTE

ok, ok, the code...

Not so ugly

Page 23: Responsive Design - ISCTE

www.demotix.com

João Belchior ( Jolidog )

d.o user/347132

[email protected]

http:// fidibiko.com

Thank you!Questions?

not the dog in jolidog