Following on in this two part look at the various types of mobile web design in this article we take a more in depth look at the three various
What is Mobile-Friendly Web Design?
Mobile-friendly web design basically can be considered a “slimmed-down” version of the site’s standard desktop look. Essentially, it requires several small alterations to accommodate smartphones and smaller screens.
Using this method requires a designer to consider a few key principles:
• All fonts must either be 14pt or 16pt. While standard on most laptop screens, they are just large enough to be readily visible on smaller screens like a smartphone. Anything smaller than 14pt will be too difficult for users to read on their phones.
• All images should be properly formatted so that they are small enough to quickly load on smartphones.
• Mouse-over effects should be avoided when adjusting to smartphones.
• Page elements should be arranged to ensure they do not overlap one another. Instead, they should be stacked on top of each other using a horizontal scrolling feature.
Simple in theory, mobile-friendly pages can be difficult to set up, especially if you have a preexisting desktop version to reformat. One tip is to reduce and consolidate the desktop’s information. Rather than display everything that would normally show on the larger screen, consider only showing the most pertinent information. These can be stacked onto each other and used in a horizontal scroll.
Another mobile-friendly design worth considering was created by A.D. Suses. This design uses sections that can be collapsed and expanded, reducing the amount of immediate information displayed on the screen. Placing the most vital information first, users can decide to peruse the rest of the page without feeling obligated to read large walls of text or information that, while manageable on a desktop, can be overwhelming on a smartphone.
What is Mobile-Optimized Web Design?
Mobile-optimized designs are pages that have been specifically developed with mobile screens in mind. These websites take the opposite approach from mobile-friendly designs. Rather than a large page shrunken to fit a smaller screen, optimized pages natively fit smaller screens and must be expanded to fit larger ones.
As mentioned in the earlier section, when using a mobile-friendly design, you must consolidate information and, in some cases, leave things out in order to ensure the page works well.
This is not the case for optimized designs. Not only is all the information immediately available, but it is quickly attainable and incredibly simplified. These designs compress images and shorten copy. Certain desktop-based features, like animations or mouse-over effects, are removed and pop-up effects are reformatted.
Here are some key principles for mobile-optimized web designs:
• Layout should use Single Columns
• Graphics should utilize White Space Borders
• Site Navigation should be Simple
• To reduce clutter, ensure that there are fewer additional features on the page
It may, at first glance, seem that mobile-based sites would be easier to set up compared to desktop. In reality, it’s the opposite. There are many challenges that are involved with compressing down to a small design. For many companies, it is because of these challenges that so many often opt for the “simpler” mobile-friendly design.
What is Responsive Web Design?
A responsive web design acts as the best of both worlds. Whereas mobile-friendly designs native to desktop screens and mobile-optimized designs are native to mobile device screens, responsive designs can adjust to perfectly fit virtually all screen sizes.
More than just desktops and smartphones, responsive designs can adapt to a large variety of options, including tablets, gaming pc screens, and widescreen 4k monitors, just to name a few. As you can expect, this method of design, while the most accessible, is the most complex as well as the most costly.
If you are interested in setting up a responsive design, here are some key points to consider:
• Multiple Design Breakpoints: Creating a design for each point that the website layout may change. This determines how responsive your page actually is as well as what elements will move where at each breakpoint.
• Proper Fluidity: Whenever the screen changes, it is important that the page retains its quality.
• No Favorites: If you are going to make a responsive designed web page, in order for the elements to smoothly transition along the aforementioned breakpoints, you cannot prefer either desktop or mobile over the other.
Which is Best? Mobile-Friendly, Mobile-Optimized, or Responsive?
Now that you see the differing aspects of each design, you may be asking yourself which of the three should you be using for your website.
All three have their own strengths and their weaknesses and must be weighed against what you are looking for in a website as well as what your budget can allow. Are you looking for something that primarily caters to mobile users or is much of your traffic still done through desktop? Is your budget large enough to handle both devices? These are questions you must ask yourself and your business before making an ultimate decision.
No matter which option you choose, there is a way to optimize your website so that it drives more traffic, attracts more users, and helps your business thrive. There are professional designers for all three options, each ready and willing to help take your online presence to the next level.
