In the ‘Best designed websites of the week’ series, I list down the top five websites which amaze me with their design concept. I also discuss briefly about any topic which is an important factor in web design.

The page-width is an important element in website design as it not only improves the aesthetics and look but also the readability. Now a day, the internet is accessed with a large variety of devices like mobile phones, tablets, laptop and computer screens of varied graphics resolution. While for mobile phones, the width can be as low as 160 pixels, in modern Full HD monitors, it goes up to 1920 pixels. As the technology progresses, the QHD (Quad HD) monitors will not be uncommon with a graphics resolution of 2560X1440 pixels. For full details of available graphics display resolution, you may refer Wikipedia.

With such varied graphics resolution, it becomes difficult for the web designers to decide on the most appropriate web page width for their websites. Most of the designers, define the web page width in either pixel or percentage. Both these methodologies have some pros and cons. When you define the web page width in pixels, the layout is fixed and you know exactly how your page will look like irrespective of screen resolution. However, when your web page is displayed on a device with resolution lesser than the defined width of your web page, user may need to scroll horizontally which is not convenient. In flexible width method, you define the web page width in percentage of the resolution of display. It means that the web page will fit in all screens and there will not be any horizontal scrolling. While it appears great on resolutions you have considered during your design, for extremely low and high resolution screens, it will be difficult to read the paragraphs. Suppose you are viewing your web page in high definition computer monitor with 1920X1080 pixels resolution with 100% defined width, it will not be convenient to read the paragraph lines which are spread in 1920 pixels.

The best way to avoid such problems is to define the width in percentage along with min-width and max-width attributes and align the page centrally. By doing this, you define the width in percentage and also the minimum and maximum width in pixels. This can lead to the appropriate display in most of the screen resolutions and gives you flexibility to decide on you web page layout also. One example of defining web page width is as below:

body
{
 width: 95%;
 min-width: 600px;
 max-width: 1200px;
}

To know the process of aligning your web page centrally, you may refer my article - single page website with CSS layout.

These days, web designers are opting for responsive web designs where the page layout will change as per the screen width.

Enough on web page width, let’s come back to the Best Designed Websites of this Week.

The Best Designed Websites of the Week are:

 TAPMATES

INTERACTIVE ADVENT CALENDER

PEOPLERISE

OSVALDAS VALUTIS

HUM CREATIVE

As always, if you want to include your website in the next ‘Best Designed Websites of the Week’ collection, please let me know.