Mobile Web Technology

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:



Our goal: Be more like Wikipedia



Design goals:


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

Small bit of progress after hack day:



Mockup Design
Simple mockups produced by Mobify:



Also see the "live" Mobify preview site.

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