Mobile Web Technology

From Dryad wiki
Jump to: navigation, search

Dryad was not originally designed for mobile devices. This page documents our attempt to make it more mobile-friendly.

Create a branch for mobile development

Modify the main (dryad.css) to make @media queries (forcing 'mobile first' into dryad.css doesn't sound appropriate).

Screenshots

Original view of Dryad on an iPhone:

MobileDryad2012-6-21p.png MobileDryad2012-6-21l.png

Our goal: Be more like Wikipedia

MobileWikipedia.png

Design goals:

  • text is large and simple
  • search box is easily available
  • menus are drop-down


Small bit of progress after hack day:


DryadAfterHackDay.png

Mockup Design

Simple mockups produced by Mobify:

MobifyDryadHome.png MobifyDryadMenus.png

Also see the "live" Mobify preview site.

W3C Suggestions

Front Page

  • Remove Pop-up in mobile version
  • Document served w/o caching information
  • Document size of markup (48.3K), recommends max 10K
  • Total page size (94K), recommends max 20K
  • Recommends use/validation against XHTML Basic 1.1 (apparently XHTML 1.0 Strict doesn't cut it)
  • Recommends using gif or jpeg for images (png doesn't cut it)
  • Lots of images without width/height specifications
  • Dryad logo and the rss icons have no alt attributes
  • Use of event attribute in a form element mixes scripting with contents (warning)
  • Use of style attributes instead of defined styles (rss images and artifact description)
  • Suggested adding an inputmode attribute to an input element

Item Page (additional)

  • Use of Frames - this is for the facebook like button - fb seems to have depricated this approach 
  • Table with less than two rows/ two cells (generally recommends care when using tables)
  • Length property uses an absolute unit
  • Size specified for delicious image exceeds actually image size
  • More than 10 embedded external resources
  • Warns against use of overflow as not being CSS1 compatible


Tasks remaining

  • Remove the minimum widths for elements on the home page
  • Ensure items float properly as browser sizes change
  • Review the W3C suggestions (above) to determine which ones we will implement