Hit “Reset” on Your CSS

This article is a look at a technique first introduced by Eric Meyer called “CSS Reset”. Please read on for an explanation of what it is and how it works…

A while back, I was building a website when I hit a wall I hadn’t hit in a long time. No matter what I did, I just could not get it to look exactly the way I wanted it to in the browser. Then I remembered “CSS Reset” and it made my life so much easier! Once implemented, it instantly fixed the entire problem, which I had wasted far too much time laboring over in the first place. If I can pass on a little knowledge and save someone else the time and headache, I feel like all the trouble I had wasn’t in vain.

What is CSS Reset?

Did you know that each web browser has its own default stylesheet that creates basic style on otherwise unstyled webpages? The reason is to present the content in a more readable and user-friendly fashion. But what if you have your own custom stylesheet and these default styles are interfering with the appearance of your website? In a nutshell, CSS Reset is a piece of CSS code that communicates to the browser to reset the specified default styles to null. It simply gives you the ability to overwrite the predefined default browser styles.

How does CSS Reset work?

This time I’m not going to include any code snippets. (For the original CSS code, please visit Eric Meyer’s website.) Instead, I’m going to briefly explain how it works, as the concept is simple: CSS Reset works by forcing each browser’s styles to be reset to null. This allows the CSS author to essentially start their page styles from scratch, with no external interference.

CSS Reset can help create a more cohesive, cross-browser & cross-platform compatible, adaptive, responsive web experience. Simply put, it is easier to make a website look virtually the same across a wide variety of web browsers and platforms. This uniformity saves a lot of time and frustration for the designer/developer and aids in branding your company.

By: Danielle Dandridge

Creating a Living Style Guide

This article is about creating living style guides. In it, we will discuss what they are, why they are an important step in the web design process, and a few tips on what they should include. Please feel free to leave your own suggestions and tips, or any questions you may have about style guides in the comment section below. Let’s begin!

What is a “Living Style Guide”?

In short, a living style guide is an ever-growing document that defines each of the various elements that make up your website. As your website changes over time, so should your style guide. This collection of pre-designed elements — color scheme, typography (fonts), logo and other images, code snippets, general guidelines, etc. — should be followed by every member of the team to ensure that each piece of the website is consistent, creating a cohesive user experience. Aside from consolidating all the individual design elements, it creates general design principles that determine the overall direction of the website, and it lays out the visual language the designers and developers will use to create the site.

Why is it important?

Creating a style guide is a very important step in the web design process. It enables you to stay on task and helps to create a cohesive experience throughout the entire website. Communication is also made simpler with the aid of a style guide because it can be shared with your entire team, including business owners and administrators, to reference when discussing site modifications. This can help streamline the approval process for everyone involved, from decision makers to the design and development team.

A living style guide will assist you in numerous ways as your team grows and changes organically over time. To begin with, creating it will take up a little time, but it should balance out with faster build times for new web pages, as designers and developers who are new to the team will have a reference to go back to for details on the precise styles that are to be used. Additionally, using the guide as an inventory of code enables designers and developers to easily see if new designs will fit with the established standards. If not, they can decide as a team whether to expand the codebase or if there is existing code that can be easily modified. Without a guide, it is impossible to do this, often making it necessary to write new styles, which will eventually result in a bloated CSS file. The codebase can be kept smaller when design consistency is maintained.

Finally, the language of the various classes already established in the guide can be quickly referenced and used when implementing changes. This leaves little to no confusion for designers and developers as they advance through revisions. It also provides the whole team with a common vocabulary to use when discussing the designs after they have been coded.

What should a style guide consist of?

Creating a style guide can seem a little daunting. After all, it is a collection of all the different design elements of your website. Try not to get overwhelmed, though, and just take it one step at a time. There is no exact formula you must follow to create a useful style guide; however, there are some imperative aspects that should be included to ensure its effectiveness and usability. Here are a few quick tips to help you get started:

  • Layout – Since your layout is likely to change during the design process, creating this section will help you define its general elements.
  • Navigation – Write the code for everything that will be used for navigation and interaction throughout your website (i.e. links, buttons, menus, etc.)
  • Typography – This section documents your font choices to set up type style. (You can always adjust font sizes later in the design process.)
  • Branding – Establish your company’s brand identity by outlining your website’s color scheme as well as imagery (i.e. logos, graphics, etc.)
  • Multimedia Content (i.e. videos, images, etc.) – Define specific proportions for videos, images, etc. in this section.
  • HTML – Use this section to define elements like copy, header and footer styles, etc., as it will contribute to site consistency.

Using a style guide lends many advantages to any project. They more than make up for the time it takes to create them in multiple ways throughout the life of the website, and they can be used by virtually every member of your team. In other words, style guides just make everybody’s lives easier!

By: Danielle Dandridge

Have your own tips on creating a style guide? Please leave them in the comments below!

5 Simple Tips on Gaining and Retaining Website Visitors

This is a brief look into five simple tips to help you gain and retain website visitors. This is in no way meant to be a comprehensive guide, as it is always best to tailor your digital strategy to your individual website’s purpose. It is important to customize any campaign to fit the needs and interests of your target audience.

The goals of most webmasters are quite similar. They are akin to this:

  1. Get indexed
  2. Climb up the search engine results pages (SERPs)
  3. Gain traffic
  4. Convert visitors into customers/clients
  5. Keep them coming back

I’ve put together a list of five basic tips to help you do just that here:

Tip #1: Be Responsive

With so many different devices and browsers to choose from, website responsiveness will continue to gain importance. A responsive website is capable of adapting to different screen resolutions and sizes. On a mobile device, content should load quickly and be legible without the need to zoom. If your visitors know your website is accessible on all of their devices, they will be more likely to come back. Make it easy for your visitors to become repeat visitors!

Tip #2: Keep it Fresh

Updating your website with fresh content is crucial. First, your visitors are more likely to return if they know there is going to be something new to see. Additionally, fresh content helps your site climb the SERPs because search engine robots will crawl it more often to see what has been added and what is new that needs to be indexed. This will, of course, bring more traffic to your website as it gets closer to the top of the organic search results.

Tip #3: Blog it Out

Because blogs are so search engine friendly, they are indexed rather quickly. Creating a reciprocal link between your website and blog will direct those who visit and/or follow your blog to your website, as well as contribute to your natural link building efforts, which is still an important off-page element of Organic SEO. Blogs can also be viewed as fresh content that brings your visitors back to read new entries. Make sure a link to your website is featured prominently on your blog. If they like what they read on your blog, they will likely be interested in taking a closer look at what you do!

Tip #4: Get Social

Supply your visitors with a list of tried-and-true, free online business and social networks, preferably some of which you or your company are already a member, and don’t be afraid to promote your company’s social profiles. The more you interact with your visitors, the more likely they are to become customers/clients. Additionally, business networks can be a great way for your visitors to give their own company a boost. Consider starting your own network, incorporating your business/company name into the title. This can assist in getting your company’s name “out there” so people will recognize it, and it will help establish you as an expert in your field, which is always good!

Tip #5: Give a Gift

Give your visitors gifts because they appreciate it. They will be more likely to return and recommend your website to others. You can offer things like free consultations, free quotes, free daily horoscopes, free graphics, free quizzes, or anything else that pertains to your specific content. When you change and/or update your freebies, it also counts as fresh content, which will place you higher in the organic search results.

I hope these have given you some helpful hints for your own website. What has worked for you in the past? Are you experimenting with new interactive ideas and techniques? Please feel free to leave your own tips and tricks in the comments!

By: Danielle Dandridge

Creating Intuitive Navigation for Your Website

My last article covered the Basics of Information Architecture, so I thought a good follow-up would be to take a look at intuitive navigation. You’ve probably been on a website that had inconsistent, poorly labeled, or otherwise confusing navigation before. How long did it take you to leave that site and go to one in which you could actually find what you wanted/needed? If you’re like most people, it was probably just a matter of seconds. In this article, we will learn more about intuitive navigation, why it is important, and what you can do to make your own website navigation more intuitive for both human users and search engine robots. Let’s jump in!

What is intuitive navigation?

Intuitive navigation just means that your visitors are able to find what they are looking for on your website with ease, and it is designed to allow traffic to flow from webpage to webpage. In other words, users should just kind of “know” how to navigate your website without having to learn anything new. Your menus and other navigation should be logical to them. One way to be sure that your navigation system is intuitive is to stick with some Common Web Conventions. An example is positioning global navigation somewhere within the top 25% of the web page, but we will delve more deeply into this and other techniques in the “How do I achieve intuitive navigation?” section below.

Why is intuitive navigation important?

Intuitive navigation is important to users and search engines, as it enables both to find what they are looking for more efficiently. Most people will scan your global navigation menu when they enter your site from a search engine or another website to see if there is anything else that interests them. Ensure that your menu labels let them know what kind of information they are going to find within your web pages. Always design your menus with human users in mind; however, there are ways of creating SEO friendly navigation that still puts people first.

For example, descriptive menu labels are very helpful to users and robots. Do not just label your page “Development” on your menu, but specify what you develop instead. You could be developing websites, software, business plans, personal goals… Who knows? That’s why your menu should be specific. Visitors and search engines will both have a better time finding what they need if you say something like “Software Development” or “Personal Development”.

How do you achieve intuitive navigation?

Like any project, it is imperative to begin with brainstorming. List all of the pages you think your website will require, even if some may seem silly. Remember, there are no wrong answers in brainstorming and it should freely flow. You can always remove any irrelevant ideas when you finish. The point is to not limit yourself during the brainstorming process.

It is always a good idea to plan the website navigation systems from the very start with Information Architecture (IA). (Starting with website navigation can also serve to streamline the rest of your website planning process.) Some tips on creating intuitive navigation for your website’s visitors are:

  • Display global navigation / main navigation bar in the top 25% of the page (or in the left sidebar if you prefer);
  • Place navigation menu(s) consistently throughout the website;
  • Make it simple to learn;
  • Keep number of clicks to the next piece of information or section to a minimum;
  • Use breadcrumbs that show visitors how to get back to where they started;
  • Label menus according to common web conventions that everyone knows and understands;
  • Don’t use industry jargon that might be confusing or unclear to users;
  • Make each link unique;
  • Organize navigation into logical groups;
  • Don’t force the user to scroll to reach any part of your global navigation;
  • Never disable the browser’s back button;
  • All important/main web pages should be accessible from your global/main navigation;
  • Provide local navigation or a secondary menu if necessary (usually for larger websites);
  • Make sure your menus are mobile friendly;
  • Provide users with a “call-to-action” that guides them to the web page(s) that allow your website to achieve its ultimate goal;
  • Use internal linking (link your web pages together within your own copy) to drive traffic to your call-to-action and/or other important pages on your website.

What are some of the benefits of intuitive navigation?

Designing a website that is easy to navigate is beneficial in so many ways. Visitors are more likely to return to a site with great information that is easy to find. Following are just a few of the numerous benefits you will enjoy if you employ intuitive navigation on your website.

Increased:

  • Website traffic;
  • Repeat visitors;
  • Readership and/or subscribers on your blog or newsletter;
  • Sales on your e-Commerce website;
  • Social media connections;
  • Engagement on social media and/or blog posts/articles;
  • SERP rankings for the individual web pages of your website.

Making your website navigation intuitive for your visitors is a great way to elevate their user experience and convert them into content consumers of your website. After all, the main goal of any website is the conversion of traffic into subscribers, members, paying customers, etc. People are more inclined to stay on your site and see what you have to offer if they do not have any trouble finding what they need. Search engines will be more likely to rank your site higher on their SERPs if their robots can crawl your pages more easily. All of this can be aided with the implementation of intuitive navigation on your website.

By: Danielle Dandridge

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