Mobile Web Design Responsive web design Mayuree Srikulwong, PhD
Responsive Web Design
Aug 07, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
Related Documents
