New smaller device! New larger screen! Android smartphone! Apple tablet! Mobile devices are rapidly evolving, and both smartphones and tablets both have a growing user base. In fact, many people own both. It is important to consider these users when designing or modifying your website. According to a report released by digital marketing technology company Monetate, 1 in every 10 dollars spent online by U.S. consumers is through a mobile device. That is a large and growing part of the market, judging by website traffic patterns over the past year. The number of visits to e-commerce websites from smartphones has more than doubled in the past year alone!
So how do you ensure you reach this audience in the most effective way possible? Think of it like condensing a flyer into a quarter page ad. There is less “real-estate” on mobile devices than on a standard laptop or desktop computer, so you want to make sure you get the most important information to the user and omit what is unnecessary, all while making it clear and easy to navigate. How you approach this depends on whether you are working with a pre-existing site, or getting ready to build a new website for the first time, and whether you are using a content-management system (CMS) or coding your own.
Mobile Websites in Content Management SystemsIf you have an existing website through a CMS such as Joomla or WordPress, there are many extensions and add-ons that you can choose from and install to modify your existing layout into a condensed, smaller-screen version when viewed from a mobile device. This makes the process relatively quick for you, but can often create undesirable results. You will still likely have to customize the look of the mobile layout with CSS (cascading style sheets, which contain code that tell the browser how to visually present the information), as these add-ons will make design decisions for you.
An alternative to this would be to find a pre-existing template for your CMS that already includes a mobile version or “responsive design”. You will, again, have to apply your own CSS rules to get the custom look that you want, whether building your site from scratch or replacing your existing template. However, this method ensures that all of your users will get an optimized experience on your website, no matter the device (or screen size) they visit from. If you have the time, this is the best option for CMS-driven websites. Coding your own requires a bit different approach.
Code It YourselfIf you have a pre-existing website that you coded yourself, one way to convert your site to a mobile-friendly version is by providing a separate stylesheet for smaller resolutions. This can be done by using a media query, which is a piece of code that tells the browser to read a specific style file based on the type of device being used to access the web page. However, using this method can be tricky due to each browser’s unique interpretation of these instructions. There are hundreds of different screen sizes, which can be roughly catered to by grouping them into similar categories (mobile device, tablet, screen); but this will only give a very rough “revised version” and will not be custom to each. This is especially a problem for devices that can change the screen orientation. The width of an iPhone screen vs. the length is quite different! So how do we make sure that no matter what device or orientation, the page displays the way we intend it to?
Responsive DesignPerhaps the best solution to these issues is responsive web design, named for the ability of the design to respond to the user’s preferences, which helps scale to the variety of different devices available on the market now, whether desktop, tablet, or mobile, Apple or Android. It is not just about resizable images and adjustable screen resolutions, but an entirely different way to think about design. It is easiest to implement this at the start of a new design, rather than to edit existing code. Trying to make old code work in a liquid layout can be frustrating, messy, and time consuming, not to mention you really should, ideally, develop a new concept for how your design will display in different sizes. Don’t just hack and slash your way though!
Using “liquid” layouts, which define the sizes of elements relative to their parent element, allows the design to resize itself and rebreak text appropriate to the size of the display. Rather than coding with specific pixel sizes, we use percents. This helps the design to snap to the size of the screen rather than an arbitrary “smaller” size. Implementing media queries with specific identifiers (such as the type of device being used, the device’s maximum or minimum width, and orientation) will allow the browser to read its own personal style instructions and apply them.
There are three examples of automatically adjusting images: sliding and revealing portions of images (thanks to CSS positioning), images that scale with the layout, and sliding composite images (created by layering images). An example of a sliding composite image can be seen here — try resizing your browser window to watch the flying saucer move!
One caveat to this is Apple’s browser, which automatically rescales web designs to fit the tiny screen. If a designer creates a responsive layout, Apple devices still resize images proportionally to the page even if made to fit on the screen, which also scales text and other elements to miniature. An Apple-specific meta tag, which provides the browser metadata about the document and how it is formatted, fixes this issue. This snippet of code overrides Apple’s browser default of scaling things proportionally, allowing the designer’s fluid layout to take over.