Ernesto lara mobile_presentation

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