mobile design in 2014 and beyond
DESCRIPTION
I presented this at Drupalcamp Toronto 2014. How was mobile device use changing the imagery and use of the web? Should it still be called the "web"? How does our linear use of mobiles effect the entire way site should be organized?TRANSCRIPT
![Page 1: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/1.jpg)
Mobile Design in 2014 and Beyond
DrupalCamp Toronto
![Page 2: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/2.jpg)
Kurt JarchowWeb Interactions Designer
Freeform Solutions-
ProfessorDurham College
@jarchowk
![Page 3: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/3.jpg)
In this discussion
High-level thinking - what does the "web" mean? How are mobile users using it.
Designing prep for mobile
Design concepts
Brush on CMS problems
![Page 4: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/4.jpg)
Is mobile a ...
Revolution?
Evolution?
![Page 5: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/5.jpg)
Take the red pill
![Page 6: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/6.jpg)
Paper to Web
![Page 7: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/7.jpg)
A new medium was born. What happened?
Old business models broke, new ones created
Content was re-written and reorganized
New design patterns were created
New customer expectations emerged
![Page 8: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/8.jpg)
Visualizing the "Web"
![Page 9: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/9.jpg)
Web to Mobile
![Page 10: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/10.jpg)
A new medium is born, what's happening?
Old business models breaking, new ones being created
Content being re-written and reorganized
New design patterns emerging
New customer expectations starting
![Page 11: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/11.jpg)
Visualizing the mobile web as a stream
![Page 12: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/12.jpg)
How can we design for mobiles/desktop/tablets?
(Watches? TVs??)
![Page 13: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/13.jpg)
Don't!
![Page 14: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/14.jpg)
Design for...
Content
Single interactions
Change
Iteratively
![Page 15: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/15.jpg)
Designing for content
Similar to "mobile first"
Designer learns content strategy
Typography makes a comeback
![Page 16: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/16.jpg)
Mobile First
![Page 17: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/17.jpg)
Content Strategy
![Page 18: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/18.jpg)
Typography
![Page 19: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/19.jpg)
Designing for single interactions
Mobile will have fewer page visits per visit
Can you simplify your site?
Current web mobile menus are unproven
![Page 20: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/20.jpg)
Design for change
Borrow heavily from Lean UX
Be agile
Accept design change as hypotheses
Measure, and repeat
Be lean
![Page 21: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/21.jpg)
Further reading
The Design of Everyday Things - Donald A. Norman
Content Strategy for the Web - Kristen Halvorson
Mobile First - Luke Wroblewski
Lean UX - Jeff Gothelf
![Page 22: Mobile Design in 2014 and Beyond](https://reader038.vdocuments.net/reader038/viewer/2022110302/547c3e9bb4af9faa108b4590/html5/thumbnails/22.jpg)
In conclusion...
Use what we've learned from old
But don't be held back by them
Embrace the new medium
Experiment with new ideas