ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Web Page Layout

Updated on September 23, 2014
Conleys Review profile image

Conley is a retired Engineering Programs Manager, the Author of a "Web Page Design Guide" and the owner and creator of several websites.

Planning a web page

When you decide you want to build a web page, there are a few things you need to consider. I have shown some ideas for planning a web page layout and starting the web page below.

Selecting the Niche for your web page
Decide the topic of your web page. It is best to select some niche that you know a lot about or for which you have a great passion. As an example, some people have a passion for animals, sports, cooking, internet marketing, etc.

If you are planning to monetize your web page, consider if your proposed niche is suitable.

When you are considering niches for your web page, it is always a good idea to use Google's Keyword Tool to analyze the type of competition you may have in that niche and to look at various keywords to see what terms people are searching for monthly. This can help you in creating a web page which will get visitors through the Search Engines.

Decide the Theme for the web page
Select a theme of a 2 - 3 column page layout which will showcase your content and your images in style. More information on web page layout is presented later in this Hub.

Think about the type of Header you want for your web page which will brand your niche.

Decide if you want the navigation links across the top of the page or in a column on the left or right.

Sample Layout with Header and 3 Columns, Navigation Across Top

Think about having a footer on your web page, which is always optional. Footers are normally not used to catch a viewers attention and are often ignored. Footers are used to show Privacy links, Contact details, Copyright notices and site information, etc. But that doesn't mean that you can make it more appealing. You can also use the footer to express something artistic and very personal to make the footer more appealing.

Page Layout -- Position, Text, Background & Graphics

When we first look at a web page, we unconsciously decide how interesting we think the page will be. This decision is normally based on what the eye initially sees. Below are some major elements to consider when you start a web page:

Position of Key Elements - it is imperative to understand how web users view web pages. Think about how visitors would see the web page. Since we read from the left and from top down, the top left corner of the web page is usually what catches the eye first. It is important to have key elements of your web site in this quadrant to entice your visitors to “take a look.” Something to keep in mind is that users want to see content right away, rather than scrolling down the page past a slew of ads, .

Another key factor for not overloading your page above-the-fold with ads is that Google now penalizes a web page where only a small amount of visible content is above-the-fold.

A webpage "above-the-fold" refers to the visible screen upon the initial loading, without scrolling.

Web page above-the-fold compares to a newspaper-fold


Graphical information on a page – photos, illustrations, charts etc. Your eyes may be drawn first of all to the graphics on a page. If a page is all text, your visitors might consider the page to be too much like hard work to view.

  • Although graphics are very important on a web page as they add interest, they also increase the download time for your site. Slow download times have been shown to be a major cause of people leaving a web site.Choose the right file type and size for your graphics. Graphic images that you plan to use on your web site should be saved in JPEG or PNG format, whereas other pictures, such as buttons and logos, can be saved in GIF format.

  • To include a large graphic, you can present it as a small thumbnail with a link to the larger version of the graphic and the initial load time will be quicker.

  • To help web browsers lay out your page faster, use your HTML Editor to add the width and height attributes to images, so that the browser knows how much space to reserve on the page for the downloading image. This will speed up the download time.

White space – this is the empty space on a page – margins, breaks between paragraphs and space around graphics. White space is the second most popular thing on a page as it gives your eyes a rest from reading.

Text – the text on a page may be the least interested element to look at. Use a good font size and my recommendation is NOT to use more than 3 font types on a page. Titles, sub-titles, headers should be the same font type and the body text should be a different font type. Don't pick a background color which makes your text difficult to read. Use color text for emphasis, but don't use it excessively.

You should arrange your web pages to balance your graphics with white and text space to make sure your visitors will be enticed to read your text and stay on your page.

Start your web page
Now that you have completed the preliminary decisions for your web page, start creating the web page with a good web page Editor.

If you are looking for a Free Web Page Editor, I recommend Kompozer, a what-you-see-is what-you-get Editor. You see immediately as to how your page will look. Google "Kompozer" to find the Kompozer web site for download.

To build and test your web page, you don't have to be online or have a web hosting company. This can come later.

You can create your web page with the Editor, save the page on your hard disk and then load it into a browser to test. You will have to go online to finalize the testing of your links.

Upload your webpage to your domain

When you have your web page finalized for upload, you will need File Transfer Protocol (FTP) software to upload the web page to your domain server. Most FTP software is intuitive and easy to use.

File Transfer Protocol (FTP) Client Software


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)