By Michael Kilmer
With the recent influx of smartphone users, questions arise regarding how to design a website for all browsers. Do you design it as “flexible” so that it can fit on any screen? Do you develop a specific version for mobile phones? What about tablets? The answer may not be quite as cut and dry as you think.
Because more and more people are visiting your website on their phones, your challenge is to get your website to display properly (and attractively) on a phone as well as a desktop. The early approach was to just create two versions of your website – a mobile version and a desktop version. But many designers have found ways around this by developing the site as flexible, meaning the content will adapt to the size of the screen and still give the design aesthetic originally intended. This can work really well on text-heavy sites, however it is not an approach that will work for every site, particularly image-heavy sites.
The “old” method, creating a separate mobile version of a site, is still a good practice. Sites that rely heavily on images should be condensed and shortened into bite-size pieces, so as not to overwhelm the tiny mobile screen. In order to achieve this, one must redirect to a mobile version of the site or a mobile version of the stylesheet (which controls the look of the site), then the user can still get the content they need but in a smaller and more manageable package.
When you enter the tablet world, another problem presents itself. The iPad and similar Android tablets are still considered mobile, but a mobile site is not going to look right on the larger screens that tablets offer. So what is the solution? Well, there are a couple parts to the solution. First you have to exclude versions based on screen size or browser. Therefore, the larger screen size of the iPad and Android tablets will display the desktop site version rather than the mobile version of the site. The second part of the solution is especially important: design for tablets from the get-go. Things like dropdown menus and Adobe Flash will not work correctly (or at all) on tablets. By incorporating a touch-friendly interface into the desktop version, and using new tools like CSS3 and HTML5, you can ensure that the site will look as intended on every platform.
To summarize, when approaching a new design for a website, remember these key things:
- Choose a design that supports your content. Will a flexible design work for your site? Or will you need a separate mobile version?
- Design with a touch interface in mind.
- Take advantage of new tools that are compatible across all devices.
