The goodSeeds 2000 ... 2010 The control which designers know in the print medium, and often desire An event apart in the web medium, is simply a function of the limitation of the printed page. Ethan Marcotte We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. Responsive Webdesign But first, we must “accept the ebb and flow of things.” - John Allsopp, “A Dao of Web Design” http://www.alistapart.com/articles/dao/ http://www.alistapart.com/articles/responsive-web-design/
The goodRESPONSIVE 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.
The goodWHY 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.
Not so uglyDrupal Modules And themeshttp://drupal.org/project/responsive_images http://drupal.org/project/omegaIntegrates the Responsive Images librarycreated by Filament Group. http://drupal.org/project/arcticahttp://drupal.org/project/resp_img http://drupal.org/project/adaptivethemehttp://drupal.org/project/media_responsive http://drupal.org/project/zenhttp://drupal.org/project/cs_adaptive_image http://drupal.org/project/mothershiphttp://drupal.org/project/adaptive_imagehttp://drupal.org/project/borealishttp://drupal.org/project/fit_text
The goodOther ResourcesRESPONSIVE WEB DESIGN BY ETHAN MAR-COTTEhttp://www.abookapart.com/products/responsive-web-designHARDBOILED WEB DESIGN BY ANDY CLARKEhttp://hardboiledwebdesign.com
The badSupport the old 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. IE9 is actually a good browser...
The badWhen to DELIVER Finding out when to load There is a race condition for the first bigger images 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 SOLUTION? https://github.com/tubalmartin/riloadr CONS: Browsers without js get a <noscript> tag with the smallest image size. Mobile first approach
The badTOOLS and TESTING The tools are not a good fit. All the mockups, wireframes tools are Designers and all involved are still still working on a fixed pixel mindset. learning the process. SOLUTION? Work with what you can, find what fits your workflow, go back, interate, re- peat. Testing is hard, expensive Too many devices and many more are and impossible to complete. comming. SOLUTION? Keep with the standards, don’t code for specific devices, unless there is a very good reason for it.
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
Tech team as 4 backend developers. 1.5 million page viewsOne frontend developer. 30.000+ Registered usersVery tight deadlines. 6.000+ Active contributorsWorking on Drupal 6. 1200 images a day from every country recognized by the UN and a few more Almost 1.200.000 nodes
Not so uglyThe Actual process Wireframes Design Prototype Move into drupal Test Iterate Release