Why is Mobile Web Important. • Trends we saw in 2013. • HTML5. • Libraries / platforms for Mobile web. • Mobile web design patterns. • Tips for building a great mobile web experience. • Discussion.
hand-held mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network. Maybe through a mobile website or a packaged mobile webapp.
accessing the Internet through hand-held devices such as smartphones and tablets than from personal computers. • Majority of web access in Africa is on Mobile web. • Unlike native apps, mobile web apps will run across all smartphones and tablets. • Building mobile webapps is not hard.
CSS and HTML. • HTML5 and CSS3. • Basic structure of a webapp. • How to make your webapp communicate with a remote server. (REST) • Available frameworks/libraries/platforms for modern web development both for mobile and desktop.
across a multiplicity of devices. • Support for gestures, hardware acceleration, gps, camera, more • Easier to Bake into existing web experiences. • Local storage helps in caching data offline which is great for mobile networks. • Faster, cheaper, easier to develop.
to build world-class user interfaces and powerful apps that run across iOS, Android, Windows Phone, BB.... • Over 50 built-in components for each popular mobile operating system.
know and love: HTML, CSS, and JavaScript • Owned by Adobe. • Free and open source framework. • Phonegap-build allows to package mobile webapp in the cloud. You don't have to maintain sdk's for each and every platform you are targeting. • Great documentation: docs.phonegap.com • Apache cordova allows you to compile your app in the cloud and make releases for each mobile operating system you are targeting.
Create native client applications using HTML5 and JavaScript with a single code base and deliver solutions that target today's most popular smartphones and tablet devices • Touch-optimized user experience, natively rendered widgets, straightforward page navigation, view management, and data access layers • Can be packaged using apache cordova.
native • The-M-Project is a mobile HTML5 JavaScript framework that helps you build great mobile apps, easy and fast. • Cross platform – Pure HTML, JavaScript, CSS3 code base that can be compiled to run on iOS, Android, Windows phone. • Free and Open source. • You can make builds using apache cordova.
rapid development of mobile web applications with a native look and feel on modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android and RIM smartphones and tablets. • Has inbuilt themes with a native feel and look. • Touch gestures, animated transition, smooth scrolling.... • Can be compiled using apache cordova. • Free and Open Source.
will help you build great mobile web apps. • Designed and developed to meet the specific constraints of the mobile environment. • The toolkit's core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities. • Offers a wide range of UI components to help you improve the look and feel of a web app, or simply to experiment with new user interaction. • Can be compiled using Apache Cordova.
cross-platform apps • Let's you develop, test, preview and deploy HTML5 apps. • You can make builds in the cloud for Android, iOS, Windows Phone.... • A well thought out HTML5 development environment.
web apps development environment targeting Nokia Asha and Series 40 devices. • Includes Asha UI build based on the popular series 40 ui. • Helps you build and compile webapps to install natively on Asha and s40 devices. • Easy to publish apps on the Nokia store.
creating websites and web applications. • Originally developed at twitter. • Has a powerful responsive grid system that scales from hand-held devices up to the desktop. • Great for responsive web design. One codebase for both the desktop and mobile version of your webapp.
• JQuery • Angularjs • Backbonejs • Emberjs • Modernizr • Requirejs • HTML5 Boilerplate • Nodejs • And many more.... • Note: you don't have to know how to use all them but it helps to what they are and their uses.
structure with an index page and a series of sub pages. • Good for organizing complicated mobile site structures that need to follow a desktop site’s structure.
together by a tab menu. • This allows the user to quickly scan and understand the complete functionality of the app when it’s first opened. • Good for tools based apps with a similar theme. • Suited for apps with simple content structure.
will navigate out. • Users can’t navigate between spokes but must return to the hub, instead. • Good for multi-functional tools, each with a distinct internal navigation and purpose. • It’s the default pattern on Apple’s iPhone
to more detailed content. • This is a quick and easy method of navigation. • The perception of moving forward and then back, gives the user a strong sense of where they are in the structure of the webapp. • Good for apps or sites with singular or closely related topics. • Users won’t be able to quickly switch between sections under this architecture as the have to return Home in order to select another section.
the index screen by using components to display portions of related tools or content. • Allows the user to glance at key information on the apps homepage. • More suited to tablets than mobile phones due to its complexity. • Suitable for content based apps like news apps.
set of data by selecting filter options to create an alternative view. • The app could have side navigation bar with several menu options for different subcategories • Each subcategory is displayed on the main view without leaving the site's homepage.
responsive design. • Build touch friendly interfaces. • Make it very easy for users to fill forms and give you information. • Reduce network requests to save bandwidth. • Bundle and Compress your JavaScript and CSS to make loading them faster. • Use CDN's to host your static resources – CSS, JavaScript, images. • Sacrifice complex features for a clean, simple and easy to use design. • •
jmwai
thatjeffsmith
ryotaroikeda
ryota_hnk
javiergs
sutetotanuki
yimajo
tasshi
gekko0114
har1101
ohmori_yusuke
katarinadahlin
kimpetersen
holman
takai
tammyeverts
davetheseo
akosma
rasmusluckow
bryan
chrislema
jcasabona
uxyall
