Responsive Web Design

01/31/2021 / Resources, Tools / ,

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

Resources for Responsive Design Techniques

http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Content Prototyping In Responsive Web Design

http://uxdesign.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/designing from the content out

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

quirksmode

cloudfour

appmobi

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

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

SCREENFLY
http://quirktools.com/screenfly/