Meta Refresh 2013

The design and engineering of user interface on the web

Arpan Chinta

Getting Serious about Responsive web design

Submitted Jan 2, 2013

We need to rethink the way we design web sites. Screen sizes (mobile, tablet, desktop, TV) , user context (at home, on the road…), input methods (mouse, keyboard, touch screens), all have an impact in the way users interact with websites and we need to take that into account when we are designing the sites.

The focus of this talk is going to be on new designs, built from the ground up to be responsive.



  • Screen Sizes, Context, Interface, Input methods
  • Touch Targets
  • Touch Interactions
  • Forms: optimizing for mobile devices
  • Navigation: designing navigation for mobile devices
  • Layout: working with responsive grids
  • Content
  • Mobile First
  • Content First > Navigation Second
  • Typography, Font embedding, Icon fonts, Retina artwork


  • Layout > Content > Typography > Design patterns > Device considerations
  • Tools
  • UX Testing


  • Semantic markup
  • Compact CSS & JS
  • Responsive Images
  • CDNs, server side compression

Speaker bio

I’m a designer who loves programming! Started out as a print designer back in school, moved to web design and then to UI design. Started using Rails to implement my designs and have been doing that for the last 7+ years.

Now I work with HordeSoftware ( ), with a specific focus on cross-device UI design, specifically in creating web sites & web apps that work well across various screen sizes & resolutions.

Some of my recent work:



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}