Designing responsively
32
DESIGNING RESPONSIVELY The Role of UX and other head scratchers. [email protected] LONDON - CAMBRIDGE - TORONTO - OTTAWA
description
An informative look at responsive design and its relationship to UX. Link to full responsive design video recording on Notes of final slide.
Transcript of Designing responsively
DESIGNING
RESPONSIVELYThe Role of UX and other head scratchers.
LONDON - CAMBRIDGE - TORONTO - OTTAWA
WHAT IS RESPONSIVE
DESIGN?A DESCRIPTION...
ONE SOURCE MULTIPLE
DEVICES
MANAGE WEB CODE
FLUID DESIGNS
AND…
NOT TOTALLY NEW
DESKTOP APPLICATION
TOOLBARS
DESKTOP APPLICATION
WORK SPACES
BUT SOMEWHAT NEW TO
THE WEB• Desktop
• Tablet
• Mobile
RESPONSIVE
DESIGN
RATHER...
RESPONSIVE CONTENT
(IMAGES, TEXT, FONTS, GRAPHICS)
CONTENT SINGLE SOURCE
CONTENT DEVICE SPECIFIC
DEVICE CHARACTERISTICS
RESOLUTION
480x320 px 960x640 px 1920x1080 px
FONT RESOLUTION & TYPE
480x320 px 960x640 px 1920x1080 px
SIZE CONSTRAINTS
IN RESPONSIVE DESIGN?
480x320 px 960x640 px 1920x1080 px 3840x2160 px
RESPONSIVE CONTENT
• Actual content written
• Actual images chosen
• Actual font choice
RESPONSIVE AS A MAGIC
WAND
RESPONSIVE
INTERACTION
NAVIGATION
Double tab navigationTab navigation at
top AND bottom
Single ‘Menu’
navigation at top
RESPONSIVE LAYOUT
FUNCTION FOLLOWS FORM
Desktop layout Tablet layout Mobile
DEVICE DETERMINES
DESIGN
THEREFORE…
DON’T GET LOST IN THE CODE
CONVERSATIONS
IT’S STILL USER
EXPERIENCE DESIGN
RESPONSIVE IN ITSELF
DOESN’T SOLVE INFORMATION
MANAGEMENT PROBLEMS
Governance
Signoff Workflow
Content creation Reviews
Updates
Archiving
AND RESPONSIVE IN ITSELF
DOESN’T SOLVE
ASSET MANAGEMENT
CHALLENGES
QUESTIONSANYONE?
