responsive design - iscte
DESCRIPTION
TRANSCRIPT
João Belchior ( Jolidog )
ISCTE Junho 2012
João Belchior ( Jolidog )
FULL TIME Freelance
João Belchior ( Jolidog )
KID Wife dog
community
legos
reading
music
movies
sleeping
podcasts
friends
design
SO...
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
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
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
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
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
FLEXIBLE EXAMPLE
http://www.bostonglobe.com/
The good
The good
Core is slow... but contrib is fast!
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
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
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
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
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
Let’s look at some code...
But first some context!
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
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.
THE AcTUAL PROcESS
Not so ugly
Wireframes Design Prototype Move into drupal
Release
Test
Iterate
ok, ok, the code...
Not so ugly
www.demotix.com
João Belchior ( Jolidog )
d.o user/347132
http:// fidibiko.com
Thank you!Questions?
not the dog in jolidog