Mobile Websites 101

Mobile Websites 101 The Basics of Mobile Design Mobile web design is at its best when it mirrors the convenience provided by a mobile device and provides the user a clean and simple experience. In this infographic, we detail some of the basics of mobile website design, and discuss a few practices that need to be considered early on in the design process. Simplicity Size The small size of mobile screens Reduce file sizes to allow the page to greatly restricts the freedom the user has to navigate the website. load faster. This will limit the amount of data used on cell networks. Layout Using a single-column layout is best for a mobile site, as it does not clutter the page and allows for a simple user experience. o Though a desktop website may have multiple columns, mobile website design can achieve a streamlined one-column layout with proper coding specified for responsive web design. Orientation A hallmark of mobile browsing is its fluidity. Approach the mobile-friendly website with a flexible layout, so that users can view the site in both horizontal and vertical orientation. Best Practices in Mobile Design Simplicity Mobile sites must be focused on a simple idea so that it can be executed to perfection. 3,200,000,000 people will be actively using the internet by the end of 2015. Functionality Mobile users visit sites that address a need. Make sure the site design is focused on the overarching theme of the site. 2000 738 Million This corresponds to a penetration rate of 97% MOBILE CELLULAR 2015 SUBSCRIPTIONS 7 Billion BY YEAR Mobile Responsive Web Design responds or adapts to the size of screen the site is presented on, allowing for the best user experience. Typically there are four general screen sizes that responsive design is aimed at: LOREM IPSUM LOREM IPSUM LOREM IPSUM Widescreen Desktop Monitor Small Desktop / Laptop Tablet Mobile Phone Balance DESIGN DEVICE Mobile devices are underpowered compared to traditional computers, laptops, or tablets. Because of this, the performance impact of design elements is intensified for mobile devices. Balance the design direction with the limitations of the device. Optimize Optimize design for performance by planning for problems in advance. Mobile broadband 89% of urban penetration has increased 12 times population is covered by 3G mobile broadband. since 2007, reaching 47% in 2015. Common Mistakes Images Including Too Many Images: Including too many images can cause slow performance. Text in Images: Text in images takes away from the quality of the image, especially on smartphones. LOREM IPSUM Layout Not Designing for Multiple Screen Sizes: Users will be accessing the site from devices featuring various screen sizes. Take this into account when designing. Customizing Dropdowns: Customized dropdowns generally aren't consistent in mobile browsers, and can frustrate the visitor. Туре Not Giving the Text Enough Room: Know how the type will render, and give room for it to flow. Erroneous Font Choice: Know that using custom fonts increases the page size, and will slow down page load time. LOREM IPSUM Please Wait, Loading... Vs. LOREM IPSUM Sources: http://s2ndesign.com/mobilegeddon-mobile-friendly-web-design/ US Digital Future in Focus 2015, ComScore http://www.adobe.com/inspire/2011/11/ten-best-practices-designing-mobile-websites.html http://mobilewebbestpractices.com/visual-design/ http://smallbiztrends.com/2015/03/top-7-mistakes-with-mobile-friendly-web-design.html https://www.studiopress.com/design/beginners-guide-responsive-design.htm TeleVox