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

Abstract

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.

Outline

UI & UX

  • 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

Workflow

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

Optimization

  • 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 ( http://hordesoftware.com/ ), 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:

  • http://ideadevice.com/
  • http://cmm.herokuapp.com/
  • http://patternsofdesign.co.uk/
  • http://slashcv.com/

Links

Comments

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

{{ gettext('You need to be a participant to comment.') }}

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

{{ errorMsg }}