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?
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).
Responsive Web Design (RWD) is an approach to web design aimed at providing an optimal experience across a wide range of devices – from laptops to smartphones.
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.
WordPress, Joomla, and Drupal combine to command 70% of the total CMS market.
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.
There are lots of web designers who would love to help craft your website. However, picking the right web designer is critical.
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.