24 July 2017
By limenotlemon
In the first part of ecommerce 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 ecommerce website design on different devices, apps and operating system can be quite a challenge.
There are several types of website layouts for your ecommerce website design:
Fixed design means the width of an ecommerce website design is 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 :
Disadvantages :
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. This also the simplest kind of ecommerce website design out there.
Advantages:
Disadvantages:
Liquid or fluid design is a kind of ecommerce 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 :
Disadvantages:
Just like its name, this kind of ecommerce website 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 :
Disadvantages :
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 :
Disadvantages :
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.
accelerating Commerce, Begin your digital transformation.
Start your project with LimeCommerce