Dreamweaver FAQ2: What’s the ideal size of a web page?

We will get to the answer you are looking for, but get yourself through the beginning paragraph first.

In today’s world, it is very difficult to predict the devices on which your web pages will be ultimately viewed.  That’s why it doesn’t make much sense to tailor fit your website to the dimensions of a single device. To understand the most likely device on which  your web pages are going to be viewed, you must do your research well. Your research will save you time when prioritizing the design for your website and the benefits you will get from it.

This article, Best Screen Resolution to Design Websites, http://www.hobo-web.co.uk/best-screen-size/ provides an insight into popular screen dimensions for 2014 and previous years.

After you have an idea about the device that you will be primarily designing for, you can start designing in those dimensions while allowing your design to load/transform gracefully  on devices with other dimensions. This approach is known as Responsive Design.

Examples of responsive websites:

To check if a website is responsive, drag the handles of your browser window to see if the web page inside morphs itself to fit the new dimensions of the browser window.

http://www.awwwards.com/web-design-awards/education-above-all

http://www.awwwards.com/web-design-awards/webflow-interactions

Responsive design uses a single website with multiple CSS files. The media query information in the CSS file specifies the dimensions of  the display device for which it should be used. This media query in the CSS file tells the browser, “Hello browser, use this CSS file if your display area is N pixels”.

<link rel=”stylesheet” media=”(max-width: 800px)” href=”example.css” />

CSS files combined with media query helps  you create a single website that caters to display devices with different dimensions.

Before you start designing your website, do a deep dive into Responsive Web Design. If you are going to be a web designer for a sufficient period of time, the principles of responsive design will keep you in good stead.

Happy designing!

Comments are closed.