How to Find the Best Web Host for Your Website
The Basics of Mobile-Friendly Web Design
Choosing a Strategy for Your Mobile Web Design

Web Design: How to Present Content on a Web Page

When building your wireframes, remember that you are not limited to a static presentation of text and graphics. Many technologies, from Flash animation to DHTML, help you maximize your page space and present content in more interesting and interactive ways.

Indicating text on a wireframe

Because you’re sharing wireframes with clients and team members alike, indicate all navigational elements and headlines for major content sections with readable text to orient them. All other copy components can be indicated with so-called greek text (which is actually Latin gibberish) that reflects their allocated character count (the number of letters, punctuation, and spaces) so you get a sense of actual text-block size.

You can search the web for lorem ipsum generator to find sites that generate paragraphs of greek text — and even specific character counts — that you can copy and paste right into your wireframes.


Working with a content management system

A content management system is a user-friendly website or application that offers site administrators secure access into the database that populates their website. By logging in to a CMS, a website’s manager can easily add, remove, and update content stored in the database. The benefit of using a CMS to store text and graphics is that once you define a bunch of content types such as “short description,” “product name,” and “product thumbnail image,” you create instances of these objects, fill them with actual copy or images, and then assign them to one or more web pages. That way, if you update the instance in the CMS, the content automatically updates wherever it’s used on the site. This strategy separates the content from the web page presentation to give you more flexibility for future design and content changes, making the site easier to maintain.

If your site uses a content management system, a Content Strategist works closely with the Information Architect (on smaller teams, this can be one and the same person) to first identify all the different content types a site has and then determine which content types go on each page.

Maximizing your space on the web

Most people have small computer monitors, and many people are browsing websites through smart phones and devices. If you hold up an 8-1⁄2 x 11-inch piece of paper horizontally, you’re looking at the size of most people’s windows on the World Wide Web. After you factor in the browser’s interface with all its buttons across the top, favorites tabs, and scroll controls, the viewing space devoted to the web is whittled down to a postcard size, or about 800 x 600 for many users. This scrawny window is your web-design canvas.

Here are some organizational and interactive strategies to help you better present your content on this wee little space:

  • Scroll to see less important content. You simply can’t shove everything into the viewable area — the first 800 x 600 pixels of the browser window. So, place the high-priority items within that initial window and lower priority items below the fold.

    Give visual clues to let users know more stuff is below the fold by purposefully showing headlines or the tops of images that lead to more stuff below. Users don’t mind scrolling, just as long as the page doesn’t go on forever. A good rule is to target the total page height to twice the initial viewable height (so 1200 pixels for an 800-wide-by-600-tall page).

  • Use horizontal space too. You can use technologies like Flash or HTML 5 to present horizontally scrolling content or a “carousel” of rotating content.

    [Credit: © Bohemia Design Ltd. ]
    Credit: © Bohemia Design Ltd.
  • Layer your content. Another way to maximize the viewing space is to reveal layers of content on top of the web page as the user rolls over or clicks something. You can hide and show content layers through technologies like JavaScript, DHTML (Dynamic HTML), and Flash.

    A user rollover expands this content module on a Disney website to reveal more information. [Credit
    Credit: © Disney
    A user rollover expands this content module on a Disney website to reveal more information.
    DHTML can produce an “enhanced” drop-down menu that offers organized options when a user
    Credit: © Television Food Network
    DHTML can produce an “enhanced” drop-down menu that offers organized options when a user rolls over a navigational item.
  • Design a revolving door of content. Because web page space is at a premium, another dimension that you need to consider is time. If you can’t fit everything that you want inside the viewable area, you may want to think about animating the area.

Annotating your wireframes

Sometimes web pages contain highly interactive components that must be explained in the wireframes via annotations. Annotations are simply margin notes that describe how elements on the page work, what triggers the interaction, and what content displays in different scenarios. By numbering areas of the wireframe, and numbering your notes, you can efficiently describe the interaction detail. Often, you’ll also need to include an inset diagram that shows a different state that appears upon a user action such as a rollover or click.

This annotated wireframe with numbered callouts also has insets that show the different states of c
This annotated wireframe with numbered callouts also has insets that show the different states of content as users interact with it.
blog comments powered by Disqus
Managing Your Site's Structure with Dreamweaver
The Seven Rules of Web Site Design
Designing the Navigation of a New Website
How to Build an Outline for a New Website
Web Design: Why Image and Monitor Resolution Matters