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

• MetaRefresh 2012 video: http://www.youtube.com/watch?v=hqCtlUjvGKM
• MetaRefresh 2012 Slides: http://www.hordesoftware.com/projects/responsive_design/responsive%20design-part2.pdf
• RubyConf 2012 Video: http://www.youtube.com/watch?v=nHIBPz4G3nA&list=PL50D7368F56665FAE
• RubyConf 2012 Slides: http://www.hordesoftware.com/projects/responsive_design/responsive-design.pdf