Mobile application development PowerPoin
Download as PPTX, PDF•0 likes•4 views
The document outlines strategies for mobile website development, discussing adaptive and dedicated options suitable for organizations lacking resources for a mobile app. It emphasizes the importance of analyzing the current website's capabilities and choosing the right approach based on user needs and existing infrastructure, highlighting how content management systems can facilitate mobile optimization. Additionally, it provides insights on testing methodologies and the advantages of responsive web design for creating versatile websites across devices.
Mobile application development PowerPoin
- 1. MOBILE APPLICATION DEVELOPMENT UNIT III MOBILE WEBSITES
- 2. Choosing a mobile web option • If your organization is keen to be mobile, but doesn’t have a focused purpose or resources to develop a mobile app. • Mobile website can be a great place to start. •Adaptive mobile websites: Automatically adjust your current website when viewed on mobile screen sizes, modifying the layout, sizing, and spacing to make it more mobile-friendly. •Dedicated mobile websites: Require a completely separate mobile website, and mobile web apps employ HTML5 functionality and specific UI elements to create an app-like experience on the web. •You need to analyze some things about your organization and its current website before choosing a mobilization strategy, as discussed in the following sections.
- 3. Why Do People Use Your Website on Mobile Devices? • For restaurants and local retail stores, this question can be pretty easy to answer. People are already out and about, and they need to know your location, your phone number, or more information • About what they will find at your store. (What’s on the menu? Do you carry the product I’m searching for? How much will it cost if I go there?) •A mobile website that makes it extremely easy. • To access information is critical in these situations, and can potentially cost sales if people can’t find what they are looking for.
- 4. What Can Your Current Website Accommodate? • Different mobile website techniques use existing desktop websites more than others. •It’s important to know how the current website was built and what the platform capabilities are when choosing a mobile development technique. •For example, if the desktop website is built entirely in Flash, you will have to develop a separate, dedicated website for mobile devices to accommodate non-Flash mobile browsers, such as iPhones. •you might consider revamping the entire website to eliminate Flash, but that’s another story.
- 5. What Can Your Current Website Accommodate? • Desktop websites built using clean, modern development standards • external style sheets and semantic, •div-based HTML • Can work well as the base for an adaptive website design, because existing elements are easily manipulated through CSS. • If your website is built on a content management system (CMS), you can check for any mobile options available on the platform. •More CMS platforms are focusing on facilitating great mobile sites. •As a start, most include some sort of template system for the site designs. • Templates make it easier to apply site wide mobile modifications because changes made to a theme file instantly apply to the entire site, which means less time updating individual pages. •Global style sheets create a default place for mobile CSS changes to be added for the entire site.
- 6. What Can Your Current Website Accommodate? • Most theme-based CMS systems are starting to introduce mobile-friendly themes that you can use and modify to provide your site with both a desktop and mobile optimized experience. • Some CMS systems provide other tools to help with things like • Mobile browser testing, • Mobile detection and redirection, and • Mobile menu modifications. The following sections provide some CMS system mobile functionality examples. • Word Press • Drupal • DotNetNuke
- 7. CMS system mobile functionality examples Word Press: •Full Site link is included to get back to Some specific Word Press themes automatically apply a different mobile theme to their blog sites when viewed on mobile devices. •Many of the available Word Press themes are considered mobile ready, and come with mobile versions. •The default Word Press theme automatically applies an alternate mobile theme plus a View the full desktop website.
- 8. CMS system mobile functionality examples Drupal : •Drupal has many themes and modules that you can piece together to create a mobile website version. •The WURFL : (http://drupal.org/project/wurfl), •Mobile Plugin: (http://drupal.org/project/mobileplugin), and •Mobile Tools: (http://drupal.org/project/mobile_tools) Modules can assist with mobile detection, redirection, theme- switching, and image scaling
- 9. CMS system mobile functionality examples DotNetNuke : •The latest DotNetNuke versions include built-in tools for mobile detection, redirection, and a mobile template that provides a few layout changes for phone and tablet browsers. It also has a nice, built-in emulator for mobile browser testing. •Lots of tools are available that are making dynamic mobile sites easier. •Basic HTML and CSS websites can also be modified with mobile CSS. •If you have an older website, or a lot of custom developed functions or complicated features, it might be difficult to adapt your current website, and a dedicated site may be the way to go.
- 10. How Much Do You Want to Provide for Mobile Users? •If you want mobile users to access basically the same information as they would on a desktop browser, •A mobile website is the direction to go. That technique allows you to hide some elements and rearrange the majority of your site for a better mobile UI. •Content is identical and updated through the same editing process.
- 11. How Much Do You Want to Provide for Mobile Users? •If you want mobile users to access basically the same information as they would on a desktop browser, •A mobile website is the direction to go. That technique allows you to hide some elements and rearrange the majority of your site for a better mobile UI. •Content is identical and updated through the same editing process. •If you know that mobile users won’t need to access a large amount of your website content, a dedicated mobile website would be a good solution. •Design a mobile-specific website from the ground up, addressing specific organizational requirements and the needs of on-the-go customers. •A dedicated mobile website will benefit from a thorough mo bile marketing strategy, and can use modified content targeting mobile users in an optimal UI.
- 12. How Much Do You Want to Provide for Mobile Users?
- 13. ADAPTIVE MOBILE WEBSITES •An adaptive mobile website is a great first project for mobile, and it allows steps to be taken incrementally toward an optimal mobile UI. •Adaptive mobile websites use CSS media queries to serve different style sheets based on the size or type of browser or device detected viewing the site. •With CSS, content and presentation layers are kept separate; •Media queries change website layout and appearance without content modification. •No browser detection or site redirection is needed; •The optimal website layout appears automatically when media query parameters are met.
- 15. Get Your Queries in Place •Media queries are the core of adaptive mobile websites. •This section explains how to choose what media type or feature to target, and then explains different ways to add your media query to your site. Choose Your Target Link to Your Media Queries Remember the Viewport The Inevitable Internet Explorer Fix
- 16. Add Mobile Styles •Once the media query is in place, it’s time to decide how to change the website for mobile browsers. •It is a good idea to create mock-ups of how you would like your website to look on mobile, but it’s important to know the limitations of this technique, and it may be helpful to test out some changes in the code first. Adding Your Changes to @Media Change Your Width Flow Your Columns
- 17. Hide Content •Another thing to do while planning your mobile website is determining content areas that are not needed on the mobile site. • For items that you want to hide for mobile, it’s as easy as adding display Simplify Your Header Modify Menus Review Your Content Scale Media Adaptive images
- 18. Testing Made Easy •Testing adaptive mobile websites is extremely easy, especially if you are targeting your media queries for all devices with max-width criteria as discussed earlier: @media all and (max-width: 480px) •This means you can simply resize your browser to less than 480px wide, and you’ll instantly see your website with the mobile CSS styles applied on your desktop screen. •Some mobile emulators are available to enhance testing from your desktop. •Screenfly (http://quirktools.com/screenfly) uses a proxy server to mimic devices as you view a website.
- 20. Testing Made Easy •Testing on a desktop browser or emulator is convenient, but there is no comparison to native mobile browsers for working out all the kinks and small details. •For example, desktop browsers will not accurately portray the left and right margin space that appears in a mobile phone browser. •Using a regular desktop browser might always show some space on each side, but when you check on your phone, text might run right up to each edge if specific margins or padding were not added in the CSS.
- 21. Break Out of Mobile (or Not?) •If your mobile website version is well tested, easy to navigate, and still contains most of your desktop website content, people should have no reason to switch back to a desktop version. •If you’ve chosen to hide a lot of content or entire pages in your adaptive mobile site, linking to the desktop website may be useful. •To do this, you need to use a separate style sheet for your mobile device styles, and a bit of Java script to “break out” of the mobile styles and view the regular webpage.
- 22. Complete Responsive Websites •Instead of modifying the fixed-width desktop website to create a fixed-width mobile website, a fully responsive website utilizes percentage-based widths and margins for a flexible grid layout. Media Queries, showcasing sites optimized for desktop, tablet, and mobile devices using responsive web design