book of elle

brand personality & visibility for creative entrepreneurs

Web Design

Basics of Information Architecture (IA)

· ·

While doing some research on Information Architecture for work, I actually learned a couple of things about its history that I didn’t already know. I thought others might be interested too, so that’s what this article is all about. Enjoy!

What is Information Architecture (IA)?

The term “Information Architecture” (IA) was coined in 1976 at an American Institute of Architects (AIA) conference by Richard Saul Wurman, who is probably now best known for being one of the creators of the Technology Entertainment and Design (TED) conferences. As with many things website development related, IA seems easy to define on the face of it; however, the deeper you delve, the more robust and abstruse it becomes. When referring to web design and development, IA is the way an Information Architect sets up and structures the webpages (information) throughout a website, to put it simply.

So, what’s an Information Architect?

An Information Architect is the person who helps bring together all of the different elements of a website: design, usability, functionality, SEO, page copy, page hierarchy, and site navigation, as well as the overall internet marketing and digital strategies. The goal of an Information Architect is to create an intuitive website structure that is friendly to both human users and search robots alike. Another way to define IA is as “the art and science of creating and maintaining a model of a system of information describing the rules on how the information should be organized, interlinked, accessed, and presented.” For a little further explanation, here are some quotes on IA from industry leaders:

“The art and science of organizing and labeling websites, intranets, online communities, and software to support usability and findability.” —Information Architecture Institute

“Flickr allows me to upload my pictures and organize them, tag them, however I see fit. There is no central authority telling me what to tag my pictures. This is partly because it’s not going to hurt anybody if I do it ‘wrong’ … Flickr isn’t a mission-critical system. It’s a playful social platform…if you want a serious photo library, then use a system like the national archive or Corbis has, but not Flickr. There’s a difference between managing information, and designing the infrastructure to let others manage it themselves. But both approaches are architectural.” —Andrew Hinton, Information Architect

Why is IA so important?

IA is important for a few reasons. It allows for intuitive navigation of a website. It also increases usability and findability for visitors and search engines. Once you know your purpose and understand your target audience, you need to draft a plan on how you wish to convey and structure the information on your website so that it will enable human users to easily find what they seek. This also allows robots to crawl your site more efficiently.

Components of IA:

Here are some techniques that information architects use to develop effective IA. The book, “Information Architecture for the World Wide Web” by Louis Rosenfeld and Peter Morville, names four components of an information architecture system:

  • Organization systems are categories that organize information;
  • Labeling systems represent the information;
  • Navigation systems are how to navigate between pieces of information;
  • Searching systems are how to find information.

Tips on Intuitive Website IA:

  • Know the purpose of your website;
  • Understand your target audience;
  • Determine the short-term and long-term goals of your website;
  • Decide on your website’s organizational structure:
  • Draft an outline of your site;
  • Develop a wireframe or blueprint of your website;
  • Define your site navigation.

With a well executed plan, you can really improve your website’s organic SERP (search engine results page) standing, while keeping your target audience happy. Building a structurally sound website becomes a bit easier when you understand the basics of Information Architecture. Empower your content to be impactful by putting a solid digital strategy behind it.

By: Danielle Dandridge

Responsive Web Design

· ·

These days it’s hard to know what type of device your visitors might be using to access your website, let alone what size their screen will be. The sheer amount of screen sizes and resolutions available is enough to make your head spin. That’s where responsive web design comes in! In this article, we will explore responsive web design, why it is important, and the benefits of having a responsive website. Let’s jump in!

What is Responsive Web Design?

Responsive Web Design is a combination of techniques that allow a website to adjust to the size of the screen on which it is being viewed. This means that if your website is accessed via a small smartphone screen, it will be the same site that appears on a laptop or desktop computer, but it will have adapted to the constraints of that particular screen size and reformatted itself to provide the best possible user experience. Whether you are using a smartphone, a tablet, a laptop or desktop computer, the web page contains all the same content and functionality.

As the web grows up, it becomes more evident that relevant, sharable content is the most important aspect of any website. Responsive web design is the best way to utilize limited screen real estate, as it allows for ease of access by embracing a “mobile first” approach. This provides a cohesive experience, no matter what device is being used to view it.

Why should a website be responsive?

There are many reasons to use responsive design when building your website, but all you need is one: One website, that is. With the implementation of responsive web design, there is no need to build a separate website for mobile users. Your website will simply adjust to whatever screen size and resolution with which it is being viewed.

Benefits of Responsive Web Design:

  • Responsive websites are accessible and functional across a multitude of devices.
  • There is only one URL for customers and potential customers to remember.
  • Updating just one website is much more efficient.
  • Google suggests responsive web design for SEO purposes.
  • Having access to your site, regardless of which device they are using, makes the user’s life easier, and happy customers are good for business.
  • Websites that are responsive have longer shelf-lives, and they save both money and time on management, support, and upgrades.
  • Regardless of the type of device a site is viewed on, the user experience will be better if it is consistent and optimized for any screen size.

Simply put, with no standard screen sizes or resolutions and constant changes being made, who knows where the market will go? Using responsive web design ensures that your website will be accessible and functional now, as well as in the future.

Card-based Web Design

One of the most versatile aspects of the responsive website movement are card-based designs. In general, cards are a small, rectangular space which contains easily digestible and sharable information. There is usually a border around the cards to separate them from each other and the rest of the content on the web page. Another way to separate cards from one another other is to give each one its own background color. These techniques will organize your content, as well as help the user understand your information and how to navigate your website. To find examples of card-based web design, you may not have to go any further than your favorite social network. Facebook, Twitter, Pinterest, and even Google+ utilize card-based design layouts to provide a cohesive experience to millions of users. Here are some of the benefits of using card-based responsive design:

  • Cards contain concise, “bite-sized” pieces of information.
  • Cards are highly sharable on social sites, like Twitter and Facebook, and can have their own social sharing buttons, making them even more sharable.
  • Cards create a clean and organized website layout.
  • Cards can be interactive.
  • Cards are an organic way to get your visitors attention, making them a logical and convenient place for call-to-action buttons.

To wrap up, at present, responsive web design is the best way to ensure that a website is accessible and functional on an array of devices, with a myriad of different screen sizes and resolutions. If you have a website, it is in your best interest to make sure it is as accessible and sharable as possible, to the largest amount of users, no matter what device they use. Responsive web design will allow you the freedom and flexibility to design for nearly everyone on the web!

By: Danielle Dandridge

Principles of Progressive Enhancement

· ·

What Progressive Enhancement Is Not

To understand what Progressive Enhancement is, it may be easier to start with what it is not. You may have heard the terms “Progressive Enhancement” and “Graceful Degradation” in respect to web design and front-end website development, but they are not the same things. In fact, they are two solutions that endeavour to solve the same problem from opposite directions. Graceful Degradation was brought over to website design and development from the world of software development. In short, it is the practice of building a website for the most current, state-of-the-art browsers, while ensuring that it still performs its basic functions in older, less advanced browsers; therefore, degrading gracefully. You may be wondering, “what’s wrong with that?” It sounds like a great idea, doesn’t it? After all, you are thinking of the users whose technology is a bit behind and that’s pretty thoughtful! The answer is, there is nothing wrong with it…per se. There’s just a better way to do it, and it’s called Progressive Enhancement.

So, what is Progressive Enhancement then?

Way back in 2003, Steven Champeon coined the term and introduced the concept to designers at SXSW. Unlike its predecessor (Graceful Degradation), Progressive Enhancement focuses on user experience by creating content centered webpages for the least advanced browsers, building style and interactivity upon them, layer by layer, for the benefit of more advanced browsers. This ensures functionality, even in older and less advanced browsers that don’t support as many features. As you can see, the strategies are reversed. You’re starting out with a site that will be accessible and functional in even the lowest common denominator browsers, then in final stages of development, adding more features for the browsers that can handle the technology. In other words, Graceful Degradation concerns itself with the technology first, and Progressive Enhancement brings the focus back to the user. If content is king (and it always is), Progressive Enhancement just makes more sense because it builds style (or presentation) and interactivity (or behavior) around a firm foundation of content, which is the entire reason people visit websites in the first place.

Principles of Progressive Enhancement – Gotta Keep ‘Em Separated!

HTML (Hypertext Markup Language): Content = Foundation

CSS (Cascading Style Sheet): Style = Presentation

JavaScript: Behavior = Interactivity

The goal of Progressive Enhancement is building a website, layer by layer, to provide the best possible user experience. You do this by creating separate files for your HTML, CSS, and JavaScript, then simply linking your CSS file to the <head> tag of your HTML document:

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

And linking your JavaScript file to the very bottom of the <body> tag (preferably below the rest of your content):

<body>

<!– Content above, JavaScript below –>

<script type=”text/javascript” src=”script.js”></script>

</body>

The first layer of Progressive Enhancement is a solid foundation of HTML that structures your content and allows you to layer your presentation (style) and behavior (interactivity) on top. Utilizing this technique gives you the ability to build a highly functional website across a wide variety of web browsers and devices. The second layer is CSS and it creates the layout, style, and overall presentation of your website. It’s what enables you to display your content in a visually pleasing manner. The third layer adds behavior and interactivity to your site with JavaScript, and can make it a lot of fun for users to visit! See? It’s a pretty simple concept when you break it down. Make it functional first, then add all of the bells and whistles.

This enables you to write very clean, syntactically correct code. Keeping them in separate files not only helps you keep the languages straight in your mind, but also allows for faster loading, as browsers don’t have to parse through and read three different languages in the same file to render the page. It’s just a more logical, organized way to build a website. It also makes it easier to add the layers necessary to create style and interactivity. See how this puts the content at the forefront of the design, making the user the main focus? This is how it should be. Without content and users, what’s the point of having a website in the first place?

You can’t go wrong when you plan your website if content and user experience are always your priorities. After all, why do you have a website in the first place? To display your content; be it information, a service, or a product. Who do you want to visit your site? Targeted users. Why do they visit your site? The content. What will keep them on your website? The design. What keeps them coming back for more, aside from fresh content? The interactivity! Look at your CSS and JavaScript layers as what sets your content apart from other similar websites, and you will never go wrong!

By: Danielle Dandridge

Common Web Conventions

· ·

Like most industries, web design/development has a number of established conventions and standards. They assist in making websites more functional and user-friendly. In this article, we will define web conventions and standards, as well as discuss why and how you should follow them to make your own website more usable for your visitors and search engine robots. We will also examine the benefits of utilizing certain conventions. Let’s get started!

Define Common “Web Conventions” and Standards

When we talk about common “web conventions” in web design and development, we mean the standards the majority of designers and developers follow to make their websites more intuitive and user-friendly. They have become common conventions simply because they work and, as they say, “if it ain’t broke, don’t try to fix it.” Users have grown accustomed to seeing specific web page elements in certain areas on a website. Though it can be tempting for a designer to challenge some conventions and flex their creativity, there are certain standards that can help improve user experience on your site.

Why should you follow web conventions and standards?

It is a good practice to follow some common web conventions and standards when building a website so your visitors will have an easier time navigating it. The main reason for following any established convention is that it works. After all, they cannot become conventions if users do not find them useful. When a number of sites find success using a specific type of navigation, for instance, others will follow suit and adopt a similar system. More websites adopting a certain convention means that users will learn to navigate them more efficiently. Furthermore, using conventions and standards can even help the user understand how to maneuver around a website that is not written in their native language.

Are there any web conventions that should never be broken?

There are a few web conventions and standards that probably should not be broken, unless you have a very good reason for doing so, and/or you really know what you are doing. It’s generally best to only break conventions when you have come up with a better way of doing something; thus, creating a new convention, are a large and already established brand, or you offer something that no one else offers. Here are a few web conventions most websites should really consider following:

  • Logos – generally positioned at the top left-hand corner of each web page so users have a reference point that will always remind them what site they are currently visiting.
  • Naming Conventions – help users intuitively know where they can find the information they need.
  • Global Navigation (main navigation bar) – should be located within the top 25% of your web pages (or occasionally on the left sidebar, although, I prefer to place secondary navigation there).
  • Link Styles – need to show users which text is clickable and most expect links to be underlined and/or a different color than the rest of the text, so avoid underlining words and using different colors on non-links.
  • Icons – should require little to no textual explanation, so be sure to use standard icon conventions that users are already familiar with (i.e. a shopping cart for a checkout page).
  • Visual Hierarchy – lets users know what content is most important with headings, bullet points, images, and other visual cues.

It’s also a good idea to make your content more “scanable” for human visitors. The vast majority of users will scan a webpage in an F pattern, and many others scan in a Z pattern. That is why it is important to put your main content and navigation in certain regions of your web page. Following are some tips for creating more “scanable” content:

  • The most important information should be presented within the first two paragraphs.
  • Use succinct sentences and concise paragraphs that are approximately 6-8 sentences in length maximum.
  • H1 headings should be short and make a strong first impression.
  • Use subheadings (i.e. H2, H3, etc.), images, and bullet points to break up text.
  • Make good use of white space to break up content in a visually pleasing manner.
  • Bold text is a great way to highlight areas of importance.

What are the benefits of following web conventions and standards?

There are two major benefits to using common web conventions in your website design: users and search engines. Both user and search engine friendliness are central to the overall success of your website. First and foremost, a website should be created with its users in mind. Then it should be optimized for the best possible search engine results. When you design your site utilizing the tips above, you are sure to create a familiar user experience, even for those who are first time visitors, and you are bound to convert some into repeat visitors, subscribers, paying customers, etc.

To conclude…

It is pretty simple to apply some common web conventions and standards that will increase your website’s usability without compromising its creativity. When you use techniques with which your users are already accustomed, it allows them to navigate your site with ease, while instilling a certain level of trust and boosting your own credibility. Only break tried-and-true conventions when you have a new way of doing things that actually works better than the old conventions do. Following these simple conventions will automatically improve user experience and help establish your website as an authoritative resource for users and search engine robots.

By: Danielle Dandridge