Build a Website: Designing for Different Audiences

The best planned and designed website may look significantly different when viewed on computers running different operating systems, different web browsers, or different devices. There's a few reason why this happens:

• First, people access the Web with a wide variety of computer systems and monitors.
• Second, all web browsers are not the same and don't support the same features.
• Third, as smartphone usage continues to climb, more and more people are viewing websites on the go from their mobile devices, which typically have much smaller screens than our desktops at home.

The design challenge is to address these differences, so that even if all your visitors don’t have the same experience on your site, the experience is a good one regardless of their equipment or software.

Define Your Audience

Before designing a website, ask yourself this key question: who is your target audience? Do you want the site to be accessed by as many people as possible, or are you targeting a select group? For instance, if you’re designing for the average viewer in the developed world, you can expect that most of them will have high-speed Internet access at home, on their phone, or using their local hotspot. That means you can incorporate rich graphics and multimedia content into your site without having to worry that it will significantly impair their viewing experience. But if you plan on targeting users in developing countries, or even those living in rural or impoverished areas in developed nations, expect that many of your viewers will be reaching your site using a 56 Kbps modem, and downloading a graphics-intensive or media-rich web page will be painfully slow.

If your website is general interest, expect that many of your visitors will connect to it using a mobile device. Depending on the size of their device, large graphics or other displays may not show up as clearly. Most people using mobile devices browse websites in portrait mode, meaning their screen is taller than it is wide, the opposite of how we view sites on our desktops. And complex menu systems will be a pain to view and navigate with a touch screen. You need to consider this and design a mobile-friendly version of your site or use an adaptive theme (which we’ll discuss shortly).

On the other than, if you site is designed for business users who are sitting at their desks, you probably don’t have to worry much about mobile access. Though you probably should, because even businesses are growing more reliant on mobile technology every day, and it’s best to stay ahead of this shift.

So how do you create a flexible website that will look right on any computer, browser, or type of device? The approach you take will depend on how technically savvy you are and the tools you use to design your site. Let’s look at three of the most popular methods for designing sites today, and see how you can easily create versatile, adaptive sites using each method.

Content Management Systems

Content Management Systems have made it possible for anyone to create their own stylish, complex website and to easily update that site on the fly. The three most popular content management systems are WordPress, Joomla, and Drupal, all of which are available for free with most web hosting packages. For many content management systems, you don’t need to know any programming. All you have to do to get started is to pick a theme for your site, update the text headings and photographs to match your brand, and start adding content. If you do know some coding, you can customize your site even more, but it’s not necessary. There are thousands of themes available, many of which are free, so it’s easy to create a site that has a fresh, contemporary feel.

In many cases, it is also the theme that will determine how compatible your website is with various devices. Make sure you select a theme that specifically states it responsive or mobile compatible. A responsive theme automatically adjusts its layout based on the screen size of the device that is viewing your site. For instance, if your site has a menu bar and text and images are placed side-by-side, a dynamic theme will change your site when viewed from a smartphone so that the user will see a mobile-friendly menu, and images and text will be placed on their own lines, so neither has to be scrunched to fit. When choosing your theme, it’s also a good idea to pick something that is fairly new or has been updated recently, as older themes are less likely to be responsive. And once you have applied your theme, make sure to test it on several types of devices.

If you plan on including any add-ons within your pages, such as media players or other enhanced content, make sure to carefully research those as well, as some may not be compatible with different browsers or devices.

If you already have a website created with a content management system, you’re in luck. Most existing sites, unless they have been heavily customized, can be easily updated to a modern theme. Download a new theme and test it out. Just remember, don’t apply the changes until you’re sure it will work.

Website Builders

Website builders are even easier to use than content management systems though they are usually not as powerful or versatile. However, they are a great way to get started, particularly if you want to avoid too much of the technical work. Most hosting plans include some sort of free website builder, which should have a large selection of predesigned themes. Just as with content management systems, make sure to choose a recent theme and look for ones that are mobile-compatible. Before you get too far along with your website, publish a simple version and test it in as many browsers and on as many devices as you can. If it doesn’t work for some, check the theme’s options to see if it can be customized, or try a different theme.

Most website builders also make it very easy to update your theme as newer styles become available. This can be particularly handy if you find that your theme is not working on certain devices. Some website builders, particular those that are provided for free with your hosting plan, may charge extra to take advantage of some features, including responsive themes. If responsive or mobile themes are an add-on for your system, bite the bullet and pay for it (or find another system that provides them for free). Your mobile visitors will greatly appreciate it!

Developing Your Own Site

If you prefer to create your own site from scratch, you will have to consider compatibility when designing it. If you want to appeal to the widest possible audience, keep your site simple and avoid the use of advanced features that are not universally supported. A good example is Google, which is enormously popular despite its basic design.

If you decide to use some advanced features that may not be supported by some systems, consider developing parallel sites–a simple one that doesn't use the “enhancements” and one that has all the bells and whistles. The best way to accomplish this is to direct the user to the alternative versions with a link at the top of your home page. Keep in mind, however, that developing different versions is time-consuming and expensive, and maintaining them can be cumbersome.

Test. Test. Test.

Regardless of how you design your site or what tool you use to create it, test your page design in a variety of browsers. This will give you a good idea of how different people will see it. If you typically use a broadband connection, try accessing your site with a dial-up connection or view it on a smartphone screen. If you're frustrated by the experience, imagine how others will feel.