11. Why not dedicated mobile?
Data
had us questioning the “mobile use
case” scenario
Maintenance redundancy
No need to leverage special device
capabilities for main library site
Near future proofing
13. Guiding principle: Mobile first
ALL of your content is now MOBILE. So be
kind.
Design FIRST for mobile, and build out
Design with touch in mind (larger targets)
and ample whitespace
Images that ADD VALUE
14. Guiding Principle: Content First
It all flows from the content out…
Inventory
Rewriting
Prioritization
15.
16.
17. Content
Rewrote
virtually everything
Writing for the web is now writing for
mobile
Held library wide writing workshops had
~50 staff participate and rewrite content
20. Responsive images
Serve
different size images, or different
images entirely, according to platform
Avoid simply hiding them since they’re still
served
http://mobile.smashingmagazine.com/2013
/07/08/choosing-a-responsive-imagesolution/
24. Responsive Process
Linear design (phone)
Breakpoint graph
Design for the various breakpoints
Sketch, wireframe
Usability test
Functional testing (on multiples of devices
and form factors), repeat
HTML design prototype (this comes scary
late)
25. One month to launch
Web committee member: “ummm are you
like, going to start building the site soon?”
Me: “we HAVE been building the site….up
here…”
26. Tools
Frameworks
package made up of a structure of files and
folders of standardized code (HTML, CSS, JS
documents etc.) which can be used to
support the development of websites, as a
basis to start building a site.
28. Tools
Drupal and WP themes
We used Skeleton for Drupal:
https://drupal.org/project/skeletontheme
Tried Omega and Bootstrap, both too much
solution for us
29. Tips, Tricks, Lessons Learned
Was
hard to resist the urge to start coding
earlier
Rewriting content was time very well
spent
We’re still handing off to many non
optimized sites/services
Focus on content, not devices
Design in text
Used personas to test platform use cases