How to Design Websites for All Screen Resolutions Best Practices
As you create websites, keep in mind that besides having useful content, the display must be accessible and convenient for your audience. For example, if you build page layouts that are too wide, many users have to scroll to see your data and if you make these too small, visitors end up with a lot of extra space around your page. By using Cascading Style Sheets (CSS), you can apply a couple of best practices during the design phase of your website.
Other People Are Reading
Instructions
-
Use a Liquid Layout
-
1
Launch a HyperText Markup Language (HTML) text editor and begin a new page.
-
2
Type in a "body" style and enter a "width" attribute to control the horizontal behavior of your site. For example:
body { width: } -
-
3
Enter "100%" after the colon to enable your Web page to adjust to different monitor resolutions. For instance:
body { width: 100%; } -
4
Save your document with a CSS extension and place it on your Web host in the same directory that contains your other Web files. Make sure to remember this location to properly link it to your website pages.
-
5
Link your external CSS file to any page that you create for your website by entering the location between the "<head></head>" portion at the top of the code. To illustrate:
<head>
<link href="http://www.domain.com/sample.css" rel="stylesheet" type="text/css" media="screen">
</head>
Use a Fixed Width Layout
-
6
Launch an HTML text editor and create a new document.
-
7
Type in a "body" style and enter a "width" attribute to control the horizontal dimension of your site. For example:
body { width: } -
8
Type in "760px" after the colon to create a width that accommodates the lowest common display resolution of "800px." You do not use the 800 pixels measurement because the extra 40 pixels ensures that visitors do not end up with scroll bars on the browser window. To illustrate:
body { width: 760px; } -
9
Save your document with a CSS extension, place it on your Web host in the same folder that contains your other website files and note the location so you can properly link it to your Web pages.
-
10
Attach your external CSS file to any page that you create for your website by typing the location between the "<head></head>" elements. For instance:
<head>
<link href="http://www.domain.com/example.css" rel="stylesheet" type="text/css" media="screen">
</head
-
1
Tips & Warnings
If you need to make changes to the width of your site, edit the CSS file and then place it back on your Web host so that any linked Web pages are updated automatically.
