Designing the Non-Desktop Web
A collection of resources for designing beyond the desktop. Curated by Cameron Moll, who thinks the web is the bee's knees.
Good-natured and nefarious critics alike will argue "non-desktop" is frivolous and unnecessary for describing what should really just be called the web. They're right. But for the sake of using a terse phrase that encapsulates mobile devices, tablets, and anything else internet-enabled that isn't a desktop computer — and that works well in a conference presentation title, to boot — non-desktop will have to do.
Getting started
Beginner’s Guide to Responsive Web Design | Think Vitamin
thinkvitamin.comWhether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in
Responsive Web Design: A Visual Guide | Nettuts+
net.tutsplus.comThese days, one size fits all is quickly becoming a dated concept. Luckily, with CSS media queries, we can now easily build responsive web designs that
Responsive Web Design Demystified
www.elated.comWhat exactly is responsive design, and how do you create a responsive website? This tutorial explains the concepts, and walks you through the basic steps for creating a responsive w
Pragmatic responsive design
www.slideshare.netPresented by Stephanie Rieger in Nashville for Breaking Development 2011
Adactio: Journal—One Web, transcribed
adactio.comListen, watch or read the presentation.
Books
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement — Easy Readers
easy-readers.netIn this brief book, Aaron Gustafson chronicles the origins of progressive enhancement, its philosophy, and mechanisms, and reveals the countless practical ways that you can apply pr
Amazon.com: Tapworthy: Designing Great iPhone Apps (9781449381653): Josh Clark: Books
www.amazon.comAmazon.com: Tapworthy: Designing Great iPhone Apps (9781449381653): Josh Clark: Books
Responsive/adaptive examples
Ethan Marcotte's 20 favourite responsive sites | Feature | .net magazine
www.netmagazine.comEthan Marcotte, the father of responsive web design, has compiled a whole folder of responsive sites, each as flexible and foxy as the last. Here he rounds up 20 of his favourites
10 Gorgeous Examples of Responsive Web Design | HOW Interactive Design
www.howinteractivedesign.comResponsive web design presents designers with some new challenges to overcome—but also awesome possibilities.
The Boston Globe
bostonglobe.comA leading news source for Massachusetts, breaking news, business, sports, health, arts & entertainment, politics, education, cars, jobs, real estate & more.
Forefathers Group | The New Design Frontier
forefathersgroup.comEnlivened by mirth, provoking surprise and marvelous feats, the Forefathers web design group fashions the world's most electrifying logos, websites, illustrations, and back-end cont
Food Sense | Plant-Based Eating At Its Best
foodsense.isA unique resource for thoughtful, food-loving eaters and home cooks who have a palate for plant-based eating - for themselves or their loved ones; three days a week, or every day of
Arizona State University | Online Degree Programs | ASU Online
asuonline.asu.eduArizona State University offers fully online degree programs through ASU Online. Learn about our bachelor and master degrees, how to apply, and available financial aid. Request info
Sketching & prototyping
Keynotopia: User Interface Design Libraries for Keynote, PowerPoint and OpenOffice
keynotopia.comPrototype cheaply and quickly for iPad, iPhone, Android, Windows Phone 7, Facebook and web using Apple Keynote, Microsoft PowerPoint or OpenOffice Impress.
Responsive Web Design Sketch Sheets » Jeremy P Alford
jeremypalford.comJeremy Patrick Alford's personal site, with portfolio of graphic design, web design, drawing, writing and book list.
Windows Phone 7 UX Sketch Templates | MerryCode
blog.merrycode.comAs a designer, UX designing is my favorite part of application development. I love the UI of Windows Phone 7 and I always have an urge to experience the UX designing of a Windows Ph
Windows Phone Sticky Pad — UI Stencils
www.uistencils.comQuickly sketch out your website and mobile application ideas.
Blackberry & Android Wireframes & UI
www.kryos.comThis page is for the wireframing kit.
iPad GUI PSD - Version 2 | Teehan+Lax
www.teehanlax.comNow in its second iteration, this version of the template has been completely redesigned from the ground up. Based on the recent 4.2.1 update, it in
iOS 5 GUI PSD (iPhone 4S) | Teehan+Lax
www.teehanlax.comEvery time we create one of these files we notice just how much has changed. I'm not talking about the obvious stuff like iCloud, Siri or Notifications
iPhone Application Sketch Template v1.3 | Flickr - Photo Sharing!
www.flickr.comHere's the wireframe template I designed whilst working on ideas for our iPhone App Momento. Grid squares are equivalent to 10px, and tick marks indicate the heights of the Status
ZURB iPhone Omnigraffle Stencils & Sketchsheets - ZURB Playground - ZURB.com
www.zurb.comDownload free iPhone Omnigraffle stencils and sketchsheets to help speed up your workflow
iPhone Stencil Kit — UI Stencils
www.uistencils.comQuickly sketch out your website and mobile application ideas.
iPhone, iPad and Web Sketchbooks — App Sketchbook
appsketchbook.comSketchbooks for designing iOS applications and web sites. Sketch your app ideas in App Sketchbook or UX Sketchbook. Web browser and device blueprints to help visualize you design.
Frameworks & boilerplates
iUI - Mobile web framework for high-end devices
www.iui-js.orgiUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for smartphones & mobile devices.
Golden Grid System
goldengridsystem.comA grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.
Gridless - An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites
thatcoolguy.github.comGridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
The 1140px CSS Grid System · Fluid down to mobile
cssgrid.netA 1140px wide, 12 column grid. Fluid all the way down to a mobile version.
Font stuff
How to Bulletproof @font-face Web Fonts
sixrevisions.comA discussion of some of the common issues with using @font-face/web fonts, such as web fonts not displaying and web fonts momentarily flickering unstyled text.
Font sizing with rem - Snook.ca
snook.caSnook.ca - Web Design, Development and Consulting Services
Device detection
WURFL. Device Detection by ScientiaMobile
wurfl.sourceforge.netWURFL, by ScientiaMobile, is a DDR (Device Description Repository), a catalogue of mobile device information and a framework for adaptation of mobile applications
Mobile JavaScript Framework for Developing HTML5 Web Apps | Sencha Touch | Products | Sencha
www.sencha.comSencha Touch is a mobile JavaScript framework for developing HTML5 web apps that looks at feel native.
jQTouch — jQuery plugin for mobile web development
jqtouch.comA jQuery plugin for mobile web development, optimized for the iPhone and iPod touch.
jQuery and other scripts
Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more | Filament Group, Inc., Boston, MA
filamentgroup.comAt Filament Group, we build elegant communications and interactions that help people understand, work, and collaborate effectively across a variety of media - from web sites to wire
Respond.js now available in Modernizr | Filament Group, Inc., Boston, MA
filamentgroup.comAt Filament Group, we build elegant communications and interactions that help people understand, work, and collaborate effectively across a variety of media - from web sites to wire
Modernizr
www.modernizr.comModernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
HTML5 Video Player | VideoJS
videojs.comVideoJS is an HTML5 Video Player, built with Javascript and CSS, with a fallback to a Flash video player for when the browser doesn't support HTML5 video.
Testing resources
Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions
quirktools.comTest any website at a multitude of common screen resolutions, including desktop monitors, tablets, and smaller mobile devices.
Responsive Design Testing
mattkersley.comResponsive design testing for the masses
resizeMyBrowser
resizemybrowser.comA simple, useful and beautiful browser window resize app for Web designers and developers.
Debugging CSS Media Queries · Johan Brook
johanbrook.comIn Responsive Web Design we’re working with different states, widths, and viewport sizes. Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when
Resize
resizesafari.comResize is a Safari Extension that lets you resize Safari window to any size with just a single click, full customizable.
pinch/zoom » DeviceAnywhere Overview
pinchzoom.comwe make kick-ass mobile experiences
Stats
Global mobile statistics 2011: all quality mobile marketing research, mobile Web stats, subscribers, ad revenue, usage, trends… | mobiThinking
mobithinking.comDescription: July 2011: The essential compendium of need-to-know statistics. Beware of media hype and mobile myth – put your mobile strategy on a sound footing with the latest
Mobile Phones Dominate in South Africa | Nielsen Wire
blog.nielsen.comThe Nielsen Company, Consumer Insights, Global Media and Consumer Research
Smartphones and Tablets Drive Nearly 7 Percent of Total U.S. Digital Traffic - comScore, Inc
www.comscore.comcomScore, Inc. (NASDAQ: SCOR), a leader in measuring the digital world, today released the report Digital Omnivores: How Tablets, Smartphones and Connected Devices are Changing U.S.
Subtraction.com: Mary Meeker and Tim Cook on Tablets
www.subtraction.comThe former securities analyst and now Kleiner Perkins partne...
The Tablet Revolution | Project for Excellence in Journalism (PEJ)
www.journalism.orgThe Lead Teaser: Roughly eighteen months after the iPad 1 was first introduced, tablets have been described as the fastest-growing new technology ever. How has this new device
Miscellany
Mobile UI Patterns | UI that I Heart
mobile-patterns.comA collection of UI patterns for mobile apps.
Sass - Syntactically Awesome Stylesheets
sass-lang.comSyntactically Awesome Stylesheets
via Frank : Designers vs Coding
blog.frankchimero.comDesigners vs Coding “Do I need to know how to code?” is a question that comes up with sure-fire consistency in design circles. I’ve seen it asked by so many, from uncertain design s
Adobe Muse: a step in the wrong direction » Blog » Elliot Jay Stocks
elliotjaystocks.comElliot Jay Stocks is a designer, illustrator, speaker, and author
Focus on Mobile Commerce - Customer says ‘I do’ to a $300,000 mobile transaction - Internet Retailer
www.internetretailer.comInternet Retailer - BLOG_ROOT/Focus on Mobile Commerce - Customer says ‘I do’ to a $300,000 mobile transaction