Mobile First Development

Mobile First

Lane's webpages are designed with a "mobile first" web development approach, and specifically using an implementation technique called "responsive web design". For more background, you can read the original article on the importance of Mobile First development, as well as the original article that developed responsive web design as a viable technique.

Device Detection and Support

Because devices change regularly, rather than develop for specific devices, developent and media queries should be based on the device's width, allowing us to adapt to new devices in the future.

Testing should be conducted on Android Tablets, iPads, Android Phones (>2.2), and iPhones. At this time, other mobile devices make up less than 1% of our mobile users.

Content

One of the primary goals of responsive web design is to show all content to all users. Rather than think about reducing the amount of content shown to a mobile user, think about adding supplimental content for non mobile users, or better yet, rearraging content to better suit the screen size of non mobile users.

Page Focus

Due to the restricted screen size of most mobile devices, each page should focus on a core message, rather than combining multiple messages. 

Bandwidth Considerations

Mobile devices often operate with less bandwidth than traditional devices. Lane websites should make an effort to reduce their page load and rendering times as much as possible

Flash

Apple iPhones and iPads do not support Flash. Since at this time, Apple devices represent more than 50% of the mobile devices using our websites, content owners should avoid using flash where possible.

Telephone Numbers

Telephone numbers should be formatted as: (541) 555-5555 so that Drupal will automatically add a tel: link.

Click targets

Anything clickable on a mobile webpage (a click target) should have an area of at least one square centimeter when rendered at standard zoom on a mobile device, in order to make them easy to click.

Drupal

Our CMS, Drupal, handles many of these considerations for you. However, you should still optimize your images before uploading them, as images are often one of the largest elements of a page. Drupal will also only automatically add a tel: link when a phone number is formatted as (555) 555-5555.

Drupal has two css classes available to show or hide content based on if a user is a mobile screen. These classes should be used sparingly, if at all.