Meta Refresh 2013

The design and engineering of user interface on the web

Previous proposal

 Questioning the "why"

Next proposal

High on Design

Getting Serious about Responsive web design

Submitted by Arpan Chinta on Jan 2, 2013

Section: Process Technical level: Advanced Session type: Lecture Status: Confirmed & Scheduled


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:




  • Sunit Singh (@surdattack) 7 years ago (edited 7 years ago)

    It would be really nice if you could come with a checklist as part of your talk. Something that you can hand out (may be in print) during/after your session and also publish it online. Something like this:

    Should be really be handy for developers who want to ensure that they’ve covered everything to ensure their product delivers an optimum experience on each device. You could even structure your entire talk along this list.

    This would be an extremely valuable take-away.

    • Arpan CJ (@arpancj) 7 years ago

      Sunit, that’s a fantastic idea. I’ll definitely do that. How many printed copies do you think I should get? Around 500? I’ll also prepare a web page with the same content & a downloadable PDF.

  • Jitendra Vyas (@jitendravyas) 7 years ago
    • Arpan CJ (@arpancj) 7 years ago

      Hi Jitendra,
      I’m planning completely new content. Decided to submit a talk on Responsive Design because it is still something that is very new and it is often misunderstood or implemented without care.

      I’m working on complete new content. Not planning a repeat of last year’s content.

  • Jitendra Vyas (@jitendravyas) 7 years ago (edited 7 years ago)

    How Semantic markup, Compact CSS & JS. CDNs, server side compression are related to responsive design only? I think optimization session can be skipped to give more time to other things

    • Arpan CJ (@arpancj) 7 years ago

      Responsive Design shouldn’t be just about fitting all the content in the available space, it should also take into account the limitations of different devices. Good performance is a fundamental part of proper Responsive Design.

      There are too many sites that are superficially responsive, but that take forever to load, use heavy JS that crash browsers, and give an overall poor user experience to users on mobiles & tablets, especially those who don’t have high end devices.

    • Arpan CJ (@arpancj) 7 years ago

      But you are right, I will cut out the section on Performance (or maybe just spend 1 slide and a couple minutes on it) and will instead focus on the UI, tools & testing.

  • Arpan CJ (@arpancj) 7 years ago

    Jintendra, from the points I submitted above, what do you think are the most important parts? Is there something important that I’ve missed and ought to be included?

Login to leave a comment