To create comprehensive layouts for the web takes skill and a lot of dedication. Web designers perform a job where most unable to do, and in a very sophisticated manner. As web pages have evolved we’ve seen the need to fill more space and hold more content than ever before. If you already understand how to design a website, that’s a huge bonus towards understanding these methods better. Core features in a website rarely change. However with more than average page content other factors come into play including white space, typography, element positioning, among others.
We’ll be going into detail to cover some major tips for building content intensive layouts. These can range from social networking apps, large business & corporate websites, or anything in-between. It is important to ask yourself "what am I trying to achieve with this design?" when you are designing pages as it will help you to foresee a wider prospect.
I always recommend creating a small list of page elements considered to be installed into the template. Once these are all written down it becomes easier to weed out the bad ideas or pick up on missed or forgotten gems. This also paves the way for easy planning to relieve stress down the road.
Consider a good starting point to build off into detailed page layouts. Many designers find it helpful to sketch up possible wireframe designs to rule out the not-so-obvious flaws. This doesn’t require any fancy paper and can even be done in a run-down ruled notebook. The purpose of a wireframe is to give a rough idea of where the site layout should be heading with room to fill in the details later.
With content heavy layouts it should be taken into consideration just how much the platform will contain. Building a closed 2-3 column layout to host 100+ pages of long, intricate content will not leave much room for breathing space. By sketching and planning ahead you can control the amount of spacious room for page content. This doesn’t just encapsulate text or block areas but deals with images and videos too.
Paragraphs and page headers are a great place to start with customizations. Using CSS properties you should be able to manipulate the external margins and padding off each block-line text element. These include all headings 1-6, paragraphs, blockquotes, lists, preformatted text, and a few lesser elements.
If you wish to hold your reader’s attention, it’s important to apply spacing beneath major text elements. Paragraphs and smaller headings work best with 15px-25px bottom margins in place. For larger page elements such as h1 or h2 consider 35px+ (this will depend on your font size as well). Spaces between vertical elements is important for scrolling and "at-a-glance" scanning. However line-height is another important CSS property which influences the spacing between lines in a text element. Paragraphs should have a much larger line-height value compared to their font size so there’s plenty of extra padding between lines.
If you are designing a layout for a website heavy with content, the result will look like another bland template by the end. There are plenty of properties to play around with for advanced typographic styles. Text shadows, less/more letter spacing, background platforms, icons… the list is endless.
Truly you are the designer and your final word is law. Designing a layout isn’t comparable to a single lane highway with no turnaround. During the process you are able to go back and change styles, manipulate new elements or trash a concept entirely. Consider some other useful CSS tips and play around to see what fits best!
The most convenient and handy choice is to create a drop-down navigation scheme with head categories and sub-categories. There are also many open source scripts which offer sub-sub-categories if you have intensely detailed topics.
Possibly the quickest and least frustrating strategy is to begin with a JavaScript framework. Some of the most popular include jQuery, MooTools, or possibly Prototype. All of these libraries offer documentation and many have free drop down menu scripts available.
These will all have the same internal markup except for contents inside the main content area. Each individual page view can be manipulated and provides insight towards a finished product. Switch this up to contain all of the major views you think will be needed with each page. Other examples of page elements could include comment boxes, videos or embedded galleries, or split-page links.
Another especially droll topic resides is mobile design. This new market is seeing tremendous expansion in not just smartphones but powerful tablet PCs. This means users may be accessing your layout from a mobile screen – make sure content isn’t overflowing and is presenting neatly.
Custom Web Pages
No matter how experienced in practical web design you may be, it’s true that we all had to start somewhere. Designing custom web pages is generally the first step towards a career in web programming before applying conventional specs.Layout Wireframe
For the generic 5-page website you’ll often see the same elements repeated. A top corner logo, head navigation links, main content area possibly split with a sidebar and other functionality (login, search box, etc).Consider a good starting point to build off into detailed page layouts. Many designers find it helpful to sketch up possible wireframe designs to rule out the not-so-obvious flaws. This doesn’t require any fancy paper and can even be done in a run-down ruled notebook. The purpose of a wireframe is to give a rough idea of where the site layout should be heading with room to fill in the details later.
Brilliant White Space
White spacing is possibly the most important factor to be taken into consideration in content intensive layout design. Website content rules it alll, more so than any regular website. If readers are unable to understand the content because there’s no room to digest your words, traffic will be spotty and displeased.Paragraphs and page headers are a great place to start with customizations. Using CSS properties you should be able to manipulate the external margins and padding off each block-line text element. These include all headings 1-6, paragraphs, blockquotes, lists, preformatted text, and a few lesser elements.
Consider Dynamic Styles
Aside from spacing, digital typography should be manipulated in ways to make it jump off the page. With hundreds of millions of websites in the world today, it’s common to see the same font type(s) everywhere.Truly you are the designer and your final word is law. Designing a layout isn’t comparable to a single lane highway with no turnaround. During the process you are able to go back and change styles, manipulate new elements or trash a concept entirely. Consider some other useful CSS tips and play around to see what fits best!
Utilize Dropdown Menus
With so much content it’s unlikely all of your links will fit on a single page. There are many options about how to handle an overload of pages. Placing extra links in sidebar blocks or sewn into columns in the site footer are two purposeful options.Possibly the quickest and least frustrating strategy is to begin with a JavaScript framework. Some of the most popular include jQuery, MooTools, or possibly Prototype. All of these libraries offer documentation and many have free drop down menu scripts available.
Plan Content Views
In practice it’s much more difficult to create a simplistic body area to house all of the content your average website contains. With shifting browser standards and semi-shoddy mobile support, it’s no wonder we see such content-intensive websites shot down. Be sensitive to each style of web page in display. Some will contain multiple images, others may contain a primary graphic or video or no graphics at all. After you’ve finished coding the final layout, create multiple HTML pages to house different views.Plan Strategies Thoroughly
In truth it isn’t entirely difficult to create a powerhouse web layout. Many designers get caught up with the little details such as how to plant block elements or color hyperlinks. These details are important as they send across a branding message, even from smaller elements the message should come together with the entirety of the page. Mentally plan the stages of your design to figure out how the best approach for each obstacles. If you are working with a client, it would be good to discuss what type of content will be filling pages beforehand. This gives you the opportunity to plan ahead and strategize the best approach for a general layout.Another especially droll topic resides is mobile design. This new market is seeing tremendous expansion in not just smartphones but powerful tablet PCs. This means users may be accessing your layout from a mobile screen – make sure content isn’t overflowing and is presenting neatly.
7 Examples of Heavy-content websites
Below are a few example screenshots from popular content-heavy websites. These are mostly well-known brands both in physical and digital markets. Check out some of the ideas below to find some inspiration in your own projects. Also feel free to share other content heavy web layouts in the comments section.Clicker
Clicker is a new social networking application for TV and movie lovers. You can register for a new account and find some of your favorite classic TV shows, archived by season and episode listing. You could compare the site to IMDB with less information and more video content!Future of Web Design
Future of Web Design 2011 will be launching things off in London this coming spring. Check out the home page for more information and a great example of text-based layout design. All the details are genuinely shared and offer speakers, schedules, workshops, sponsors, and so much more.Lord Likely
In this comical layout the main character Lord Likely has been "cartoonized" and perforated into an illustration. The site is divided into 3 columns with each sporting new content, ads, feed links, and archives. The design itself is very retro and a clever take on the illustration designs.Microsoft
Most tech-enthusiasts are familiar with Microsoft. In fact, most people who understand what a computer is can give you even a brief description of Microsoft and Bill Gates. Their home page houses content for dozens of software packages, news updates, press releases, and developer information. A little ways down the page you can spot a vertical tab menu with dynamic content switching.Search Engine Land
Search Engine Land is a popular web magazine focusing on Search Engines and Internet marketing. They frequently update with amazing quality posts and drive hundreds of thousands of people to their site every day. The main page splits into 3 columns used to hold each content module and advertisement.The White House
The United States White House design looks very clean and professional. There is a lot of information regarding the president’s schedule and other important political events. One trick for alleviating page room has been the addition of a small content slider towards the page heading. This is great for displaying 3-4 big news headlines right when your visitors land on the page.Yahoo Portal
As far as large content websites go Yahoo! must be trending towards the peak. Yahoo! offers hundreds of services to their customers including webmail, news, videos, and even web search. Check out some of the Y! portal links from the sidebar to see how their templates compare.
