Mobile Web Design

Responsive web design

Mayuree Srikulwong, PhD

Outlines

• Mobile vs Size

• Being Responsive

• What you have to design

• Site Types

• Design Styles

• Responsive Elements

• Design Elements

what is mobile?Defined by S I Z E and F U N C T I O N

D

M

T

7” - 10” Landscape

3.5” - 5.5” Portrait

Website or Web App?

is Platform Independent Not

http://pixabay.com/en/mobile-phone-smartphone-app-426560/

Modern mobile web design - Being Responsive

the approach that suggests that design and development should automatically respond to the user’s behavior and environment based on screen size, platform and orientation.

I.E. as the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

T MD

One design for all devices

The Power behind This

Frameworks

Tools

What YOU have to Design

Choose a Site Type Choose a Design Style

Design All Responsive Elements Design Some Design Elements

Site Types and Examples

Product

E-Commerce

Conference

Government News

Blog: http://davidejones.com http://tympanus.net/

Restaurant: bk.com

University: harvard.edu

Automotive

Portfolio: http://pauljohns.com http://alanparker.com

Design Styles

Minimal Decorative

Color block Typography

A big button array Light on Dark

Black and White Circles

Illustrated

MinimalT

M

Decorative T

M

Color BlocksT

M

TypographyT

M

A Big Button ArrayT

M

Light on DarkT

M

Black and WhiteT

M

Circles

M M M

Illustrated

M M M

Responsive Elements

Navigation Logos

Promo Space Forms

Content Images

Footers

NavigationT

M

LogosT

M

LogosT

M

Promo SpaceT

M

FormsT

M

ContentT

M

ContentT

M

ImagesT

M

ImagesT

M

FootersT

M

Design Elements

Navicons Slide-out Slidebar Menu

Icons Transparency

Jumbo photographs Blurred background img

Navicons

MM

Navicons

MM

Navicons

MM

Navicons

MM

Slide-out Sidebar Menu

MM

Slide-out Sidebar Menu

M M

Icons

M M

Jumbo Photographs

M M

Transparency

M M

Blurred Background Images

M M

References

• McNeil, P. 2013. Mobile Web Designer's Idea Book. HOW Books, Ohio, USA.

• Vaughan, T. 2011. Multimedia: Making It Work, 8th ed. McGraw Hill, NY, USA.