In the first part of e-commerce website design article series, we already learned about the basic store layout (header, main area, and footer). Now, we will talk about different kind of designs and layouts.

Yes, that's true. There is more than one kind of website designs and layouts in this world. Your work does not stop at just designing the appearance of your site, pick the best color option, etc. When you finished designing, you need to consider how your site will appear across a range of different kind of devices. Sometimes, this can be the most frustrating part of the designing process.

How can it be frustrating? First, screens have more than one size and resolution. With many choices of gadgets Nowaday, people can visit your site from their PC, laptop, tablet or smartphone. All of them have different screen sizes, right? Second, people also use a different operating system and web browsers. Your site may look finely when you access it via your Windows PC with Chrome browser, but look messy when you access it via your Android smartphone (believe it or not, this problem happens more often than you thought). Now you can see why displaying e-commerce website on different devices, apps and operating system can be quite a challenge.

There are several types of website layouts:

1. Fixed design layout
Fixed design means the width of a website is designed and measured by a particular pixel width. Just like its names, this layout is fixed and has an immovable width. The width will stay the same no matter what screen size, resolution, or device which used by the site's visitors. This is also mean the web browser can not change the text format.

Fixed design is quite commonly used in the website design world. With this layout, the width of the content will stay the same no matter what.

Advantages :
Content for the main area will always tightly controlled without the need to set a minimum and maximum width.
You are free to set the width for most optimum readability.
The content will always easy to read from any kind of browsers and devices.
It will be easier for you to design and style your site.
Your images will not overpower your text content.
Your site will look tidy and clean.
Get more control over images and other elements due to their static nature.

Disadvantages :
If the website's design is too big and the screen size is too small, the visitor must scroll horizontally in order to see the rest of the page.
The fixed width of the website design may limit the amount of content and columns.
There will be some dead space if the screen's size is bigger than the design's size.

2. Static design layout
The static website usually contains a series of HTML files which represent the physical page of that site. That is mean, each page in a static website is separated by HTML file.

Even if all pages have an identic content, they actually made with different file version. If you have a static website and want to change one element in it (for example, a footer), you need to edit all the file pages which contain a footer in it.

Cheap developing
Do not require much time to develop
Cheap hosting

If you want a more useful site with many functions, then this is not the best choice for you
Need a professional developer to update the site
Stagnant content.

3. Liquid or fluid design layout
Liquid or fluid design is a kind of website design which changes based on the screen size. It changes based on the percentage of the screen size rather than the number of the pixels. For example. when you reduce the size of your browser window by 75%, the elements in your site will scale to the same percentage of their typical size too.
A designer may decide not to use liquid or fluid design, but that does not mean this kind of design layout does not have its own benefits.

Advantages :
This kind of design may look visually attractive because the amount of the extra white spaces will look similar to all kind of browsers and screen resolutions.
It can be more user-friendly, due to its ability to adjust the user's set up.

The contents (images, videos and another type of contents) with fixed width will need to be set at multiple widths in order to adjust the user's screen resolutions.
It may be a bit hard for the designer to be able to spot any problem in the design because it looks perfectly fine on their specific screen resolution.

4. Adaptive design layout

Just like its name, this kind of design allows the contents of the site to adapt to different screen sizes, with more controls than fluid design. However, instead of screen percentage, adaptive design use screen size measurement to adapt instead.
This layout can detect the screen size of the device and the browser, and then adapt automatically to fit the screen. For example, there are three designs ready to use, design for desktop, mobile, and tablet users. The site will detect the type of device which used by visitors and then delivers a fit layout for that device.

Advantages :
If you want to change the design your existing website into an adaptive one, then there is no need for you to rebuild your site again from the scratch.
You can tailor each user experiences based on their context and intent.
Get more traffic, especially from mobile users.

Disadvantages :
Less flexible. The adaptive design will only work as long as the layout for the screen is available at the time of its making. That is mean, when a new device with a totally new screen resolution appears, you may get a problem if none of your available adaptive design is suitable for the new screen resolution. If that happens, you will not have any choice but to edit or add a new screen resolution into your site.
More expensive. That is because it takes more times and needs more work to optimize user's experience for different kind of screen sizes and devices.

5. Responsive design layout.
This is one of the most favorite design layout out there. Just like the adaptive design, responsive design also can automatically change according to the screen size. However, this one is built on the fluid grid. That is mean, with responsive design, you will create a new solution which works well for any kind of devices and screen resolution by taking elements from both fluid designs and adaptive design.

Advantages :
Save more cost on website development. When it comes to design, you only need to prepare 2 sets of design to be used for PC, mobile and iPad users.
User-friendly, because this kind of design can adapt to any kind of devices and screen size.
SEO friendly. You can easily collect all your social sharing links through one URL.

Disadvantages :
Slower loading time. It may take some time for your site to load this kind of design.
Has a bad compatibility with older version of the browser (especially IE, and yes, there are some people who still use IE out there).
Need more time for developing. Making a responsive web design is a time-consuming task.

All these designs offer solutions for the challenge of different kind of screen sizes, devices, and browsers. Pick one which suits your requirements the most.

This article also get published at :