two years ago, i started with html5 in it’s very alpha stages, just updating my structural patterns to html5 and adding a few new form field attributes that would default to current text fields in browsers that do not understand them. at this point html5 boilerplate did not yet exist, and i was reading bits and pieces, and soaking it up.
it did not take long for the best minds using best practices to get creative with what is still a working draft.
now, just when we have all dipped our toes into the html5 pond…along comes the concept of responsive design. i’m starting a new project right now, so i’m looking at expanding on my usage of html5. this time starting with the html5 boilerplate and 320 and up and writing SASS. to this end, i have been keeping a growing set of resources in Evernote. The list continues to grow, but here it is to date.
Responsive Design Philosophy
Software design needs to support efficient development by a large and changing team of developers in response to continuous surprising feature requests. It needs to deliver a product quickly to generate concrete feedback and at the same time support continued development for years or decades. Satisfying these vague, shifting, and contradictory requirements without sufficient accurate information is the job of the designer. Responsive design is an approach to software design that balances efficiency, early delivery, and sustainable development by making design changes in safe steps. Standing between up-front, predictive design and too-late reactive design, the responsive designer uses a small set of concrete strategies to make large changes over time.
– Kent Beck
Responsive Web Design
Fluid Grids, Flexible Images and Media queries are the three technical ingredients for Responsive Web Design.
– Ethan Marcotte / blog
Responsive Web Design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available screen capabilities and adapt accordingly. RWD is most useful for layout but some have extended it to interactive elements as well (although this often requires Javascript).
Responsive Web Design allows you to use a single URL structure for a site, thereby removing the need for separate mobile, tablet, desktop, etc. sites.
– Luke Wroblewski
Responsive Web Design, but for real (slideshow)
Quotes
Media Queries
Probably the most important point I learned was that if you’re planning to use media queries, that decision must be made at the very start of the project, because it affects not only the way you write your CSS, but also your markup.
Testing for features
The problem with doing anything on the server side is that it becomes effectively about browser/platform sniffing rather than device independent feature detection. We did explore that option, but the disadvantages outweighed the advantages
Reason to Develop for Mobile
“By 2015 more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices.”
Most companies operate with a plan on what they will do three to five years out into the future. They then budget annual resources to accomplish the goals of this plan.
In three years more than 50% of U.S. users will be accesses the Internet using mobile devices. By 2015, 40% of the worlds population will have Internet access and largely access the Internet using mobile devices. Given these incredible projections, and keep this in mind – most of these projections have been met or surpassed sometimes years in advance, why are enterprises still fixated on developing non-mobile friendly sites?
Given the amount of time necessary to get a site redesign planned and implemented, and the amount of time necessary to develop and test a mobile friendly site; if this isn’t already number one on your list for your current planning cycle your company is already behind.
To put it more succinctly, would you put forth a plan that would alienate the majority of your sites traffic?
Responsive Sites
- BostonGlobe Responsive discussion
- Sony
- CMS for The Guardian
- forefathersgroup.com
- informationarchitects.jp
- iheadlondon.com
- foodsense.is
- londonandpartners.com
- bitfoundry.ca
- http://ethanmarcotte.com/
- http://paulrobertlloyd.com/
Resources for Responsive Design Techniques
Content Prototyping In Responsive Web Design
http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Using ems allows your designs to be resolution independent.
tool to tell which mediaquery fired
http://seesparkbox.com/foundry/media_query_bookmarklet
using-media-queries-in-the-real-world
Current mobile development toolbox:
Zepto – https://github.com/madrobby/zepto
Underscore – https://github.com/documentcloud/underscore/
Backbone – https://github.com/documentcloud/backbone/
Jasmine – http://pivotal.github.com/jasmine/
Confess – https://github.com/jamesgpearce/confess
PhantomJS – http://www.phantomjs.org/
LiveReload – http://livereload.com/
PhoneGap – http://www.phonegap.com/
html5 forms
http://robertnyman.com/2011/08/16/html5-forms-input-types-attributes-and-new-elements-demos-tips-and-tricks/
http://diveintohtml5.org/forms.html
https://github.com/shichuan/mobile-html5-boilerplate/wiki/Mobile-Matrices
Mobile Matrices
This is an attempt to compile a list of relevant specifications for all modern smart phones and mobile internet devices. It is primarily for a quick reference sheet when trying to target a specific platform with CSS media queries.
Grids
built for 960 grid (we use) to adapt the grid
http://adapt.960.gs/
Styleguide
Yeah, this is basically what i have been promoting to make with the initial layout – it explains the “grid” and typography.
http://markuplibrary.org/styleguide/
CSS Railroad diagrams
MediaQueries
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
http://nmsdvid.com/snippets/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
orientation media query
http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html
Roles: using “roles” in html
http://www.w3.org/1999/xhtml/vocab/#XHTMLRoleVocabulary
Responsive Images
http://www.cloudfour.com/responsive-imgs-part-2/
http://www.quirksmode.org/blog/archives/2011/09/responsive_desi.html
http://adaptive-images.com/
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/
http://csswizardry.com/2011/07/responsive-images-right-now/
http://nicolasgallagher.com/responsive-images-using-css3/
http://blog.keithclark.co.uk/responsive-images-using-cookies/
CSS
PrefixFree: Break Free From CSS Prefix Hell
http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
JS
https://github.com/paulirish/matchMedia.js/
non viewable assets are downloaded anyway
(display: none is not download:none) unnecessary downloads
SOLUTION: start from the cleanest solution and progressive enhance adding what MORE capable browsers can use.
if (matchMedia(‘only screen and (min-width: 30em)’).matches) { // load more assets }
Methods for calling/loading specific js
http://smallhadroncollider.com/thoughts/three-ideas/
http://api.jquery.com/jQuery.getScript/
HTML5 appcache
http://www.webdirections.org/blog/get-offline/
TESTING
test on every possible browser you can install USe offsite browser testing services
- use “responsiveness” testing services
- MOBILE Nothing is like the real thing Android simulator, iOS simulator, opera mini simulator
- CrossBrowserTesting (http://crossbrowsertesting.com/), Browsershots (http://browsershots.org/), Litmus (http://litmus.com/), Browsercam (http://www.browsercam.com/), etc…
- Resize My Browser (http://resizemybrowser.com/), ResponsivePx (http://responsivepx.com/), ScreenFly (http:// quirktools.com/screenfly/), Responsive Design Testing (http://mattkersley.com/responsive/)
SCREENFLY
http://quirktools.com/screenfly/
You must log in to post a comment.