Upload
ernesto-lara
View
515
Download
2
Embed Size (px)
DESCRIPTION
Mobile Web Design and Responsiveness
Citation preview
Impact of GrowthOn Table and Mobile User and why websites need Responsive Design
www.adultliteracyleague.org
Mobile and Tablet Use for Browsing
the WebThe sale of mobile phones and tablets has increased dramatically over the past years and the use of mobile browsers segmented the traffic of websites from desktops, mobile, and desktops.
Responsive Design Responsive Design is not
only for making your site mobile/tablet friendly, but to optimize assets that will make your site faster to load, easier to access, and have a better user experience.
Right image provides a really good example of Responsive and Mobile Web Design.
Mobile Usage vs. Web Design
Even though website designers have less space to create, Mobile sites are meant to be minimal and straight to the point approach.
New technology must be used: HTML5 and CSS3 are the future because it increases speed on load time and video and audio are embedded on the site, allowing a faster stream of media (including images) and content.
Web Designers have to create interfaces for desktops, mobile, and tablet users. Using this boosts your online presence and increases your chances to your content be seen everywhere possible, if it is more efficient, you will be able to create a mobile app for Apple products and Android platforms.
Design for your UsersMobile Design: Responsive &
Minimalist, tab & Menu structure Desktop Design: more Features and content with more tools
Re-Designing your Site
Create a new, minimal navigation menu to add the most important categories first.
Display the most relevant/important content first on your site, add the main focus of your website and focus on that to your users.
Design should be the last thing to worry about. Mobile Structure is first in order to build on top of that.
Check for competitors and see what ideas they have come up with and build on top of them.
Check the progress of your mobile site through analytics and see what works best for the site. Implement, and test.
New Technologies for Mobile Web
DesignBootstrap Appcelerator Jquery Mobile
Why you need these
technologiesFuture help support will be accessible.
Future developers and designers can work on top of their current designs, making coding faster and more efficient to use.
CSS3 and JavaScript. There is no need of using another code unless your site is running server-side scripts such as PHP, Java in order to load your site.
The library of these frameworks are free and accessible to any web designers.
Recommendations
Optimizing Image for faster page speed.
Media should be embedded with HTML5 markups
Redirect traffic from mobile and tablet devices to specific sites such as www.m.adultliteracyleague.com
Use Bootstrap Framework to use its library and work on top of that to reuse CSS and JavaScript Code.
Implement and Use analytics to gather information about your users.
Examples of a Good Site
Responsive and mobile design when resizing browser window
Example of a Bad Site
No Responsive Design when adjusting the browser window
ReferencesImage of second slide http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Image of Slide 3 http://www.adultliteracyleague.com
Image of fifth slide http://www.creativebloq.com/mobile/mobile-first-3117071
Images of seventh slide http://www.getbootstrap.com http://www.jquerymobile.com http://www.appcelerator.com
Image on slide #10 http://www.vendorseek.com
Image on slide #11 http://www.vendorseek.com