Content Knowledge - Guide For Effective Web Development

When you take the time to understand the content that already exists, not only will you be able to ensure that it’s supported in the new design, but you’ll actually make the entire design stronger because you’ll have realistic scenarios to design with and for — not to mention an opportunity to clean out the bad outdated muck before it obscures your sparkly new design.

If content parity matters to you (and it damn well should if you care one whit about the “large and growing minority of Internet users” who always or mostly access the Web on a mobile device), then at some point you’ll have to deal with the unruly content lurking underneath your website’s neat surface. Because chances are there’ll be stuff out there that you’ve never thought about, much less designed for. And all that stuff has to go somewhere — too often, left in an mobile unfriendly design.But if you’re trying to work with a website with thousands of URLs — or anything more than a few dozen, really — you have to ask: Which content do I design with?

Once you’ve taken stock of what you have, gotten rid of the garbage and identified the patterns, you’ll also need to decide which attributes each content type needs to include: Do articles have date stamps? Does this need a byline? What about images? Features? Benefits? Timelines? Ingredients? Pull quotes? This will enable you to turn all of those old shapeless pages — “blobs,” as Karen McGrane has so affectionately labeled them — into a system of content that’s defined and interlinked. Regardless of what you want to do with your content — launch a responsive website, publish to multiple websites simultaneously, extract snippets of content for the home page, reuse the content in an app, mash it up with a third party’s content — this sort of structure will make it possible, because it enables you to pick and choose which bits should go where, when.

TOOLS FOR AUDITING CONTENT LINK
The content audit may not be new, but some tools to help you get started are. Lately, I’ve been running initial reports with the Content Analysis Tool (CAT).

Using CAT’s Web interface, you can sift through the report and see details such as page types, titles, descriptions and images.

While features such as screenshots of all pages and lists of links are useful for individual analysis, I prefer to export CAT’s reports into a big ol’ CSV file, where the raw data looks like this, with each row of the spreadsheet representing a single URL

The Secret To Scale Link
You don’t have to love auditing content. You certainly don’t need to develop a sick addiction to pivot tables (but it’s totally OK if you do). What you will love, I promise, is what a deep knowledge of content enables you to do: create an extensible design system that doesn’t devolve at scale.

BuzzTo is a reputed web designing company in Toronto who can avail these Content driven services and effective web designing tools in your business website in a cost effective way.

Single-Page Websites Exploration

We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that’s always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next. Sometimes global navigation and scrolling are the best, most appropriate ways to move about.

The websites in this article let you scroll, but they also provide alternative ways of finding cues and means for getting around. In several cases the designs encourage exploration, which is both more engaging and also teaches you how to navigate at the same time.

1. Jess and Russ Link

The Jess and Russ’s website is a wedding invitation, though it’s also something more. As it says at the top of the page, it is the story of Jess and Russ leading up to this moment. It’s a narrative that begins with a few details before they had met, leads to their meeting and falling in love, and culminates with the invitation.

. I started this post suggesting we could provide more than scrolling. This example shows that, at times, scrolling is the most appropriate way to navigate. Jess and Russ’s website could easily have been broken up into several pages (navigated through the “next” and “previous” links at the bottom and top of each page). That would still keep things moving linearly, though each click would momentarily disrupt the narrative. In this case scrolling was the better choice. Fortunately the website makes us want to scroll. Along the way we get an engaging story, filled with wonderful artwork and with interesting parallax effects. With this website you won’t get bored scrolling — instead, you’ll be looking forward to the next part of the story and how it will be told.

2. Bleep Radio Link

Bleep Radio also encourages you to explore their single-page website. Unlike the websites above, there’s less of a directional nature to the scrolling. What you want to do could be located on any part of the page. As with the Cadillac ATS pages, there are visual cues in the form of triangles that suggest they are clickable for navigation.
Any browser open to at least 1200×900 will see most of the main menu, which is inside a large triangle showing the word Discover (again, encouraging exploration). The program link takes you to a section above the page (like Who We Are on Ballantyne ). Again, there is an X to get back.
Aside from the Program link, most of the other links are located in the main Discover triangle. And of course, you can scroll up and down the page to find different content.

The website does have some qualities that are both nice and fun:

• Clicking the Just Bleep triangle at the top clears away most of the content on the page so that you can focus on the task at hand. Nothing specifically happens for me after clicking Just Bleep (though I’m guessing it would, were I logged into the website).
• The bleeper section is a grid of member images. There are a few triangles sitting atop the images, and hovering over them results in their shifting to the right or left. There’s no functional purpose, but it lends an interactive feel to the website.

The lesson here is that a unique and creative design can encourage exploration, however you should be consistent in your navigational cues.

3. EVO Energy: The Interactive U.K. Energy Consumption Guide Link

Scrolling isn’t the only way to navigate the content here. You are expected to interact with the page in order to get most of the information it contains. For example, the first interactive section on the page offers data about the total primary energy consumption from fuel used in the United Kingdom. The main graphic is a tree with circles of various colors representing leaves. Each color is associated with a different type of fuel…

• Electricity
• Biomass
• Gas
• Petroleum
• Solid Fuel

The more colored circles are shown in the graphic, the greater that fuel contributes to the total. Each of the fuel types are listed in another graphic to the right, and hovering over them reveals the actual percentage of the fuel within the total. There’s little in the way of text on the page outside of a few basic bits of information and occasional instructions. It’s hardly needed (though it could enhance the graphics some).These interactive infographics take advantage of what the Web can do and through interaction the information sinks in a lot more. You aren’t just being presented information — you’re actively selecting the information you want to see, making it more likely that you’ll pay attention and remember it.

The lesson here is that navigation is more than moving about a website or Web page, it can also be a way to bring content to you in place.

                                                                Summary Link

Some of the lessons these websites teach us about navigation:
• Choose appropriate navigation based on the needs of the content.
• Provide alternate forms of navigation when it benefits your visitor.
• Provide immediate and obvious cues about how to navigate.
• Offer advanced ways to navigate for advanced users.
• Encourage exploration, but don’t require it for navigation to be usable.
• You don’t always have to take people to the content — you can bring the content to them.

Hopefully this brief look at the websites above will get you to explore further and help you generate ideas for alternate ways to navigate content.

For more details on Single Page Website Exploration click here