d6 Collab: Membership Explained

I’m so excited to present our preliminary, proposed d6 Collaborative Membership Plans! Membership really does have its perks, including fully optimized, responsive Portfolios (you.d6collab.com) w/ 20+ features (& growing)!

Here is a preliminary feature and proposed pricing guide for d6 Collab membership:
(Prices are tentative and may be subject to change. More below…)

Basic
no monthly fee
FREE
Pay nothing unless you upgrade.
Profile w/ privacy controls (i.e. d6collab.com/members/you/)
Text, image, audio, and video "status updates"
Add "friends"
Forums to help find collaborators!
+ much more!
Portfolios/Blogs
Security through WP Engine, iThemes Security, and Akismet
Artist Protection: copyright, Creative Commons Licensing options, disabled page copying & more!
Responsive (mobile-ready) HTML 5 / CSS 3 templates built on top of WordPress' reliable and stable framework
+ 1 more!
View All
Apprentice
monthly
$5
Or $49.99 billed annually
Profile w/ privacy controls (i.e. d6collab.com/members/you/)
Text, image, audio, and video "status updates"
Add "friends"
Forums to help find collaborators!
+ much more!
Portfolios/Blogs
Security through WP Engine, iThemes Security, and Akismet
Artist Protection: copyright, Creative Commons Licensing options, disabled page copying & more!
Responsive (mobile-ready) HTML 5 / CSS 3 templates built on top of WordPress' reliable and stable framework
+ 3 more!
View All
Artisan
monthly
$10
Or $99.99 billed annually
Profile w/ privacy controls (i.e. d6collab.com/members/you/)
Text, image, audio, and video "status updates"
Add "friends"
Forums to help find collaborators!
+ much more!
Portfolios/Blogs
Security through WP Engine, iThemes Security, and Akismet
Artist Protection: copyright, Creative Commons Licensing options, disabled page copying & more!
Responsive (mobile-ready) HTML 5 / CSS 3 templates built on top of WordPress' reliable and stable framework
+ 4 more!
View All
Virtuoso
monthly
$20
Or $199.99 billed annually
Profile w/ privacy controls (i.e. d6collab.com/members/you/)
Text, image, audio, and video "status updates"
Add "friends"
Forums to help find collaborators!
+ much more!
Portfolios/Blogs
Security through WP Engine, iThemes Security, and Akismet
Artist Protection: copyright, Creative Commons Licensing options, disabled page copying & more!
Responsive (mobile-ready) HTML 5 / CSS 3 templates built on top of WordPress' reliable and stable framework
+ up to 8 more!
View All

I am also considering offering certain features “a la carte” to those who don’t want or need a full plan or don’t need all of the features included in the next plan up. There are other monetization models I’m looking into, as well, but this is the most complete at this time.

As you can see, I am looking at having plans ranging from free up to ~$20 per month or ~$199.99 per year. Prices may be subject to change depending upon feature modifications, additions, or eliminations, as well as depending upon how much funding we raise.

But why wait? If you are interested in joining d6 Collab when membership launches, get in on the ground floor now! You can reserve your exclusive early bird access right now AND get your own portfolio (designed by me) up and running NOW by making a donation at one of three levels. Learn more here! Your donations will be used to continue and finish developing the d6 Collab Artists’ Community.

Though I have given a lot of thought to monetization, just between us, it is my dream to raise enough money to offer EVERYTHING to ALL members for FREE, at least for the first year, but we would have to raise A LOT of money to make that a reality! I honestly don’t know how possible it is, but let’s see what we can do!

If you believe in what I’m building, my mission, and my vision for the future of d6 Collab, please help me spread the word! Share this information with anyone and everyone you know who might be interested. Let’s create some buzz and excitement before we launch our crowdfunding campaign! I greatly need and genuinely appreciate your support!

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