Rise of the Responsive Single Page Application

“2013 Is the Year of Responsive Web Design” - Mashable

Photo and Quote http://mashable.com/2012/12/11/responsive-web-design/

Design

What is Responsive Design?It’s not this:

http://netforbeginners.about.com/od/internet101/tp/How-Mobile-Web-Pages-Are-Different.htm

Trello: The Best Practice

• Use Media Queries• Everything is

accessible on every platform

• Even Navigation/Header is Responsive

http://blog.fogcreek.com/building-trello-com-for-multiple-devices/

Why Responsive?

• Better Experience– Unified across experiences (Don’t use iOS or

Android’s design patterns, use your own)– Mobile: in browser or app– Consistent URL structure– Single page – Pages are so 2000s– Mobile Users Don’t Need to Do Everything that

Web Users Need to Do – FALSE

Why Responsive?

• Better SEO– Decrease mobile bounce rate– Backlinks go to one site

• Better Deployment & Maintenance– Deploy once to multiple platforms– No (or less) versioning on API– Circumvent app stores on updates (Sometimes)– All content is in one place

Developing Responsively

The Good• One small, talented

team can deliver a lot• No one gets left out– Windows Phone– Blackberry

The Ugly• More design work

(target every screen size)

• Manage loading times• It’s hard

1.5x the work = 3-4x the reward

Technology

http://www.slideshare.net/finjonkiang/phonegap-jquerymobile

http://www.slideshare.net/finjonkiang/phonegap-jquerymobile

Javascript can get messy…

Google to the rescue!

a framework for single page applications

Used in Production

The Angular philosophy

• Decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.

• Decouple DOM manipulation from app logic.

• It is very helpful if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing.

http://www.slideshare.net/AgentK/angularjs-for-designers-and-developers

Our Dev Workflow

Speed up and improve development workflow by

• Enforcing code practices• Testing• Automating everything• Doing these things as early as possible

http://www.slideshare.net/DavidAm/gruntjs-and-yeoman-continous-integration

grunt server

Watch when files change then– Lint– Compile less to css– Compile html templates– Include development mocks– Reload the page

grunt build

Above + Minify +

grunt server:test

Above +

Our grunt workflow (346 lines)

• Point any browsers to the url

• Trigger tests in parallel