There are 5 basic types of website design structures: Fixed Width, Adaptive, Responsive, Parallax, and Mobile. In a world rapidly moving toward being able to access any information on any device, a discussion of each follows.
Fixed Width – traditional web design where the website is created as a fixed width and is designed to start at the edge of a user’s browser or float to the middle of the browser window, assuming the browser window is larger than the fixed width of the website. Most fixed width sites are designed to view properly on monitors that have a screen resolution of 1024 pixel width or larger. This would include most desktop, laptop, and tablet computers. For most mobile devices, these sites display as a smaller image of the site and can be difficult to read and interact with.
Adaptive – Fixed Width sites with mobile optimized pages, typically are called Adaptive design. These sites provide a separate mobile user experience than that of tablet, laptop, and desktop users. Many people believe that an Adaptive site provides the best of both worlds. Due to limitations on mobile bandwidth and various data plans, Adaptive sites serve different content to the mobile user in a greatly reduced design format reducing the load time of the pages and providing just the information that a typical mobile user is looking for. Since a mobile searcher is more likely to take immediate action mobile page design and function is critical to the success of the Adaptive mobile experience. A good Adaptive website application will create your mobile page content directly from your desktop content, but will allow the site administrator to modify the mobile content separately from the desktop pages if and when it makes sense to do so. Most Adaptive designs start with the desktop design and adapt the content to fit the smaller screens.
Responsive – A responsive site is designed to optimize the viewer experience across any device. It responds to the screen size of the device and arranges content based on the device screen size. In order to function properly the website is created in a grid format with rules on how to manage the division layout on various screen sizes. Typically these sites are designed optimally for a specific screen size (i.e. 960, 1200, 1280 pixel width and then divided into a 12 or 16 equally sized grid layout with padding of 10 pixels on the left and right of each grid section), at 100% and then the content is increased or decreased as a percentage based on device. The smallest device size may be displayed at 50% of the original size and arranged based on sizes of the content blocks to be displayed beneath or eliminated altogether. Larger display sizes can be increased as a percentage of the total to better fit the larger screen size. Responsive designs typically start with a design for the mobile device and scale up the design for the desktop displays. To truly optimize the site for a small screen images should be created in various sizes and be loaded based on the device. Responsive designs can be complex and time consuming to do properly and for this reason, many Responsive Designs simply scale the existing desktop site to a smaller screen, thereby increasing the bandwidth usage for mobile users and increasing page load times.
Parallax – parallax site design uses techniques in which the background of the website moves at a different speed than the rest of the page for an impressive visual effect. Many times parallax sites consist of a single page. An example of a simple parallax site can be viewed here. Parallax sites typically are fixed width. Making parallax responsive can be difficult to impossible depending on the design. Typically the sites have a slower load time, but are very fast moving down the page which can be done by scrolling down. The upside to a parallax designed site include a “Wow” effect with site depth and animation, keeping visitors on a page for longer periods of time, and directing visitors to calls to action. The downside is that SEO can take a hit due to single page meta data, H1 tag relevance, no internal linking and single URL. The slow load times can be frustrating for visitors who may leave before the page fully loads. Parallax sites are best used to tell a story and lead a visitor to take an action.
Mobile Site – these are typically mobile only platforms for creating a mobile version of your website. The actual mobile version is served from a separate location/application than your standard site. When a mobile user comes to your site, there is code on the site that redirects the user to the mobile version of your site. This solution requires maintaining 2 versions of your website: your mobile application and your desktop application.
Mobile sites are frequently confused with Mobile Apps or mobile applications. Apps are small programs that are downloaded to your mobile device and reside on your mobile device. A Mobile website is accessed via your mobile browser.
A mobile site can be a stand-alone site created specifically for mobile devices. These can also be viewed on a desktop, laptop or tablet computer but typically display in a small screen format on all devices.
Which site design type is right for your company depends on your audience, the message you are trying to communicate and what actions you wish to have visitors take. One thing is clear, however: if your site is more than 3 years old and does not take into consideration the large and growing population of mobile users you are missing a lot of potential business.