PLAN Message What are you trying to say about your mobile site visually?
DESIGN With mobile considerations iconography Graphics Screen smallsub-pixel based landscape Typography Orientation sans-serif portrait new gestures: tapping/pull-down simpler Structure Interaction ﬁnger friendly“content ﬁrst, navigation second” different form interaction content ﬁrst
DESIGN Tips Content Check Make it modular Always be optimizing Take advantage of technological features
BUILD Develop functional codes Responsive Web Design Use ﬂexible and ﬂuid layouts that adapt to almost any screen.
RESPONSIVE WEB DESIGN Core concepts A ﬂexible grid-based layout that uses relative sizing Media queries and Meta viewport Flexible images and media, through dynamic resizing or CSS
EVALULATE Review and reﬁne Prototype EARLY and OFTEN through the process. paper digital sketch wireframes comp
EVALULATE Validate mobile site W3C MobileOKChecker http://validator.w3.org/mobile/ mobiReady http://ready.mobi/launch.jsp?locale=en_EN Mobile Emulators
CONCLUSION An iterative user-centered design process can help create the best mobile experiences for the users. Resources Ethan Marcotte, Responsive Web Design, A Book Apart Luke Wroblewski, Mobile First, A Book Apart