Mobile Web Development Best-practices and Recommendations

wrendressMobile - Wireless

Nov 12, 2013 (3 years and 7 months ago)

53 views

Mobile Web Development Best-practices and
Recommendations
Frances Botsford, Online Design and Communications
This document serves as a living document of the current state of mobile web development and how
it relates to the Simmons College websites. It aims to capture best practices and recommendations for
all Simmons websites, with the goals of the college in mind. Questions, comments, and updates can be
sent to webmaster@simmons.edu.
The Current State of the Mobile Web
The field of mobile web development is changing rapidly, and the industry standards and browser/
device capabilities are evolving in tandem, which makes developing mobile-friendly sites a challenge.
While computer browsers are catching up to a central standard and browser prefixes are now allowing
for advanced capabilities before standards are set, device browsers - mobile phones, tablet computers,
and other web enabled devices - are multiplying and do not always conform to even the most basic
standards (for example, the black and white kindle identifies as a color browser).
In addition to the complexity of the device landscape, there is a split in the web developer community
as to the best solution for mobile audiences. The three main options are: (1) creating a single website
that can respond to these different contexts (responsive design), (2) creating platform-specific apps
that must be customized for each device (dedicated apps), or (3) using device detection to send
different devices to different sites (browser detection).
The Mobile Web at Simmons
In spite of these challenges, we can make some decisions on how best to develop mobile friendly
access to the Simmons websites. First, we can declare a preference for responsive design which allows
the greatest flexibility and access for users with least errors and lowest development/maintenance
costs. (Custom apps and browser detection can be used for small, high-value projects or specialty
sites.)
Within the responsive framework, we can identify 5 tiers of layout using media queries: large desktop,
landscape tablet/desktop, portrait tablet, landscape phone, and portrait phone. Older browsers that
do not support media queries (IE7 and 8) will see the normal landscape tablet/desktop design.
The first Simmons responsive design/mobile-enhanced sites were rolled out in Winter/Spring of 2012;
all future projects should take mobile/responsive design into account.
Tips and considerations:

Frameworks are not recommended as they add a significant amount of code that isn't used.

If device detection is needed, MobileESP (
http://code.google.com/p/mobileesp/source/browse/
PHP/mdetect.php
) is the recommended method.

Be mindful of bandwidth; most of our sites are optimized, but large images and files should be
avoided or not displayed in a mobile context.
June 14, 2012 - Version 2

Content should be lean and precise in all contexts; by focusing on the most important content for
the mobile context, bloated content can be trimmed for the benefit of all users and contexts.
Layout Changes
This section applies to designers and strategists; can be shared with clients during site planning stages.
When planning and designing mobile-enhanced sites, several aspects need special attention and extra
development time: design (look and feel/UI), content layout (order of content on the page), and
content (words and images).
Each new site will now require a minimum of three designs: (1) Standard desktop/large tablet, (2)
landscape phone/small tablet, and (3) portrait phone/smallest screen. All issues that come up in a
normal design process will now need to be solved 3-fold, e.g. site navigation, page layouts, user tasks.
Fortunately, we can develop and reuse the patterns and solutions from one project to the next,
learning and improving as we go.
Some patterns we have already identified for small screens/mobile are:

Top nav should move into a drop down toggle button; sitemap remains at the bottom as an easily
accessible expanded nav

All floats should be removed so content flows in order (keep this in mind when laying out content)

There should be minimal hiding of content (users of most of our sites are learning and exploring
so removing content is counterproductive)
And for large desktops:

A max-width should be set to a fixed width to prevent layouts that grow too large to read
comfortably (usually a max-width of 1024px or 1200px is ideal, depending on the actual content
width)
And for all sizes:

Content should be short with high value per word
Code Changes
This section applies to developers only.
Though Simmons already uses modern coding standards which makes this transition significantly
easier, the css patterns we have used in the past must be adjusted slightly to allow the media queries
to be most efficient.
First, new code needs to be added to all html and css files.
In the head of every mobile-optimized html page, the following meta tag needs to be included:
!<meta name="viewport" content="width=device-width, initial-scale=1" />
A n d t h e s e r e c o m m e n d e d m e d i a q u e r y b r e a k s n e e d t o b e i n c l u d e d i n t h e m a i n c s s f i l e:
/* ===!
basic styles and standard layout
650px< width >900px (tablets and small desktops)
=== */
June 14, 2012 - Version 2
>This is where basic styles go (no media query wrapper allows older browsers to see this code)
/* ==== begin min-width 900px for standard desktop layout and larger tablets ==== */
@media only screen and (min-width: 900px) {!
>This is where special large screen styles go, usually max widths to prevent too much stretching
} /* ==== end min-width 900px ==== */
/* ===!landscape iphone and portrait small tablets === */
@media only screen and (max-width: 899px) {
>This is where most small screen styles go; this usually contains significant amount of code, similar to the
basic styles section above
} /* ==== end min-width 899px ==== */
/* ===!landscape iphone but not tablets === */
@media only screen and (max-width: 600px) {
>This is where adjustments for landscape phone styles go, usually only a few rules added to override the
wider tablet section above
} /* ==== end max-width 600px ==== */
/* ===!portrait iphone - small phone === */
@media only screen and (max-width: 479px) {
>This is where adjustments for smallest screens go, usually a few rules added to override the wider phone
and tablet sections above
} /* ==== end max-width 479px ==== */
/* === special rules for retina images === */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
>This is where adjustments for retina displays go, usually only a few rules added to replace important
images (eg. logo) with higher res images, like so (see Resources for more info):
body #header h1.org {
!background: transparent url("/i/site/m/
bg-header-m@2x.png
") no-repeat 0 0;
!background-size: 287px 82px;
!}
}
I n a d d i t i o n t o t h e n e w c o d e a b o v e, s t y l e s i n t h e s t y l e s h e e t m u s t b e d i v i d e d d i f f e r e n t l y: a l l l a y o u t s t y l e s
s h o u l d b e w i t h i n t h e d e s i r e d s c r e e n s i z e m e d i a q u e r y e x c e p t t h e d e f a u l t l a y o u t r u l e s, w h i c h m u s t b e
b a s e d o n
p e r c e n t a g e s i n s t e a d o f f i x e d p i x e l w i d t h s
t o a l l o w t h e d e s i g n t o s t r e t c h a n d c o n f o r m t o a s
J u n e 1 4, 2 0 1 2 - V e r s i o n 2
many devices as possible without breaking or scrolling. Also note that default rules should be
minimally specific to allow overrides in each of the media query sections. And as always, order within
the css is important: start with simple default styles, then cascade in order of greatest to smallest
width.
Tips and considerations:
Naturally, the additional complexity of having multiple layouts and contexts requires careful
implementation and testing when any adjustments are made to the stylesheets/sites during
development and in the future:
any css change should be checked at all sizes.
Images are especially troublesome with the variety of devices. Adding the following rule helps to scale
images for most contexts so the layout doesn’t break:
!images {max-width: 100%;}
b u t t h e r e a r e s t i l l s i g n i f i c a n t t r o u b l e p o i n t s y e t t o b e s o l v e d w i t h i m a g e s i n m o b i l e a n d r e s p o n s i v e
d e s i g n: ( 1 ) M o b i l e d e v i c e s o f t e n h a v e l i m i t e d b a n d w i d t h a n d m e m o r y s o d e l i v e r i n g s m a l l e r i m a g e s i s a
g o o d f o r o u r u s e r s, ( 2 ) h i g h e r r e s o l u t i o n d i s p l a y s d e m a n d h i g h e r r e s o l u t i o n i m a g e s t o l o o k
p r o f e s s i o n a l, a n d ( 3 ) t h e r e a r e n o s t a n d a r d s o r m e t h o d s f o r d e l i v e r i n g d i f f e r e n t i m a g e s f o r d i f f e r e n t
d e v i c e s w i t h o u t o t h e r s i g n i f i c a n t d r a w b a c k s. S e v e r a l i n t e r n a t i o n a l s t a n d a r d s b o d i e s a r e w o r k i n g o n
s o l u t i o n s, s o i d e a l l y t h e p r o b l e m w i l l h a v e s o m e s o l u t i o n i n t h e n e x t f e w y e a r s. W e w i l l n e e d t o k e e p
a b r e a s t o f d e v e l o p m e n t s t o e n s u r e w e a r e s e r v i n g o u r u s e r s i n t h e b e s t w a y s p o s s i b l e a s t h i s a r e a
d e v e l o p s.
L o o k i n g f o r w a r d
A s s t a t e d e a r l i e r, t h i s i s a e v o l v i n g a r e a, b u t o n e w e c a n n o t a f f o r d t o w a i t t o c o a l e s c e, s o w e w i l l n e e d t o
r e v i e w t h e s t r a t e g y a n d m e t h o d s r e g u l a r l y t o b e s u r e w e a r e g a i n i n g t h e b e s t a d v a n t a g e f o r o u r u s e r s.
P l e a s e s e n d a n y f e e d b a c k t o
w e b m a s t e r @ s i m m o n s.e d u
.
R e s o u r c e s
T e s t i n g t o o l:

h t t p://m a t t k e r s l e y.c o m/r e s p o n s i v e/
O v e r v i e w o f R e s p o n s i v e D e s i g n:

h t t p://c o d i n g.s m a s h i n g m a g a z i n e.c o m/2 0 1 1/0 1/1 2/g u i d e l i n e s - f o r - r e s p o n s i v e - w e b - d e s i g n/
R e s p o n s i v e I m a g e s:

h t t p://d e v.o p e r a.c o m/a r t i c l e s/v i e w/r e s p o n s i v e - i m a g e s - p r o b l e m/
R e t i n a d i s p l a y a n d i m a g e s:

h t t p://w w w.k y l e j l a r s o n.c o m/b l o g/2 0 1 2/c r e a t i n g - r e t i n a - i m a g e s - f o r - y o u r - w e b s i t e/
T h o u g h t s a n d r e s o u r c e s f o r f u t u r e d e v e l o p m e n t:

h t t p://w w w.l u k e w.c o m/f f/e n t r y.a s p?1 4 3 6
J u n e 1 4, 2 0 1 2 - V e r s i o n 2