Mobile Web Development Basics
When deciding to design or redesign a website, you also need to create a mobile friendly version of the site. This is not the same as a native application that resides on the smartphone, ones that needs to be downloaded from the app store. Most smartphones usually have their own browsers that can generate websites. When embarking on this journey, you’ll need to make a list of the devices that will be supported and design alternative sites that will meet these requirements.
The most apparent obstacle is the fact that these devices all have a small screen size. But there are other obstacles to consider such as the automatic switch of screen orientation from portrait to landscape and touch screen for user input. APIs like geolocation or screen orientation are typically not supported on desktop or less useful, but these APIs allow mobile users to have a much different interaction with a website.
Responsive web design is a term for a set of methods that allows your website to change its layout based on its viewing their environment. Most notably, the size and orientation of the screen changes. This is accomplished using techniques such as:
- Fluid CSS layouts which force the page to adapt seamlessly as the browser window size changes.
- Media queries that conditionally include CSS rules appropriate for the width and height of the device screen.
Code can also be added to the site that detects a user’s device and redirects them to the appropriate version of the website. Since there are so many devices to choose from, developers typically create multiple device profiles and categorize a number of devices into one of these profiles. Typically, profiles are driven by screen size:
- Microscopic – 132 pixels or less wide
- Tiny – 240 pixels or less wide
- Small – 320 or less wide
These small screen sizes make it apparent that alternative designs are necessary in order to deliver a pleasurable web experience.
Devices are particularly unique because they no longer have 72-dpi pixels. Many devices have steadily improved and now have higher resolutions. This can make development tricky because for websites and CSS, elements must still be defined in pixels that are 1/72 inch wide.
When developing a mobile website, it’s important to remember that there is no mouse to move around. Many users have a keypad or touch screen. In order to accommodate these features, many mobile sites have a much more stripped-down navigation scheme. This is due to the fact that there isn’t enough space to include all of the navigation elements that might typically be included in the main website. User’s enjoy an intuitive and simple design that allows them to accomplish their goal whether that is digesting news or entertainment or purchasing products.
When not connected to Wi-Fi in order to browse the web, devices can accumulate a lot of megabytes on a user’s data plan which could have a monthly limit. So, the more you can reduce the file size and dimensions of interface and content components, your site will download faster on cell networks and it will put much less pressure on the user’s monthly data transfer limit. You can also reduce the amount of unnecessary code, comments and optional tags in order to speed things up. User’s can be fickle when it comes to using mobile websites and speed is a huge determining factor in the number of users that will visit your site. If a site takes too long to load, most users will either exit the site or find a competitor’s site that may load faster.
Horizontal and Vertical Orientation
Mobile browsing is a fairly fluid environment. From the variety of pixel densities to the ability to view a site in both horizontal and vertical orientations, it’s best to design your site with a flexible layout rather than a fixed-width layout. By not specifying the site’s width and letting it fill up the screen naturally, your site can adapt to a mobile environment much more effectively and effortlessly. Using CSS color and tiled graphics instead of pixel bound single images to fill your components is another great way to ensure that the website flows more naturally. This is especially important for users because a website that doesn’t fully fill up a page or overfills a page can seem a bit unprofessional. When user’s have a seamless mobile web experience, it adds credibility to your site and makes them much more likely to revisit.
Single Column Layout
Although smart phones and mobile devices have become larger than their predecessors, they are still not large enough to accommodate anything more than a single-column layout when displaying content. Although this can be a large design alteration to make to your main website, the results are well worth it. The boost in usability this alteration causes makes your site much more attractive to potential users. A single-column layout that uses the entirety of the screen creates an experience where the user does not need to pan back and forth or zoom in. The content can expand down the page rather than across it. Users enjoy scrolling down the page much more than having to move side to side and zooming in to see content.
Why is Mobile Web Development Important?
In today’s day and age, most users browse websites on a mobile device. It’s not enough to just have a presentable, well-functioning site that is designed for browsing on a desktop, a mobile-friendly version is also needed. When you implement a responsive web design for your mobile website it allows you to appeal to more users who may prefer to browse on mobile devices. Developing a mobile-friendly site can be difficult, so hiring a professional to design your site is recommended. Provide the maximum experience to your audience regardless of the device they’re using.
Article written by: Anastasia Thom