Learning Website Lingo on the Fly

Posted by Joshua Jenkins, Jun 05, 2014 0 comments

Joshua Jenkins Joshua Jenkins

Working on a website redesign or refresh can become easily overwhelming, especially if you don’t consider yourself well-versed in the lingo, countless acronyms, and big concepts that get tossed around throughout the process.

Learning a few of these more “techy” concepts, how they function, and why they are important will make navigating through the design and development process a lot easier.

Here’s a rundown of some important concepts to grasp:

Information Architecture

When you are setting out to redesign your website, the concept of information architecture is paramount and one to consider in the early stages. The Information Architecture (IA) structures your website’s content in the way you’d like the user to experience it.

Often times this will push your organization to consider (and ideally develop detailed “use cases” for) the various types of audiences/users who will use your website and how that audience will influence how they behave on your site. Fleshing out the details of these various audiences will directly inform how you organize your content and what you prioritize.

This architecture, sometimes done preliminary with card-sorting, will likely take on a hierarchical format. From that end result, you can discuss how your architecture will translate into navigation, sub-navigation, one-off pages, etc.

HTML (Hyper Text Markup Language)

HTML is what’s generally referred to as “code” – it’s the primary language used to create web pages. This language creates the skeletal foundation of a web page, leaving the aesthetic components to CSS, which we’ll discuss later. It has a strict way that it must be written in order to function correctly. Using markup tags, we give value to select content. Tags, usually composed of a starting tag and ending tag, appear within brackets and assign a certain value to the content that falls within that bracket. For example:

<footer>Copyright 2014</footer>

The above HTML code uses the <footer> markup tag and allows us to specifically assign attributes to what falls between that start and end tag and nothing else. We can later, using CSS, choose to make all of our copyright text Helvetica font, bold, and centered, for example, because we can always refer back to the content using the footer tag.

HTML organizes and structures our content so we can easily refer to it and manipulate it using CSS.  The HTML language is constantly being updated with additional functionality and elements. The most current version is HTML5, the first update since 1999.

CSS (Cascading Style Sheets)

If you think about HTML as the bare bones organized structuring of a web page, CSS is coding language that communicates how the page should look.  Written as code, usually housed in one single file for easy editing, CSS takes those markup tags and assigns the desired styling you choose to them.  Back to our footer example:

footer {font-family: “Helvetica”; font-weight: bold;}

The above CSS code that would appear in the style sheet applies Helvetica font and bold weight to anything that falls within the footer tag in our HTML code.

It’s important to also note that, as websites accommodate mobile users, it is possible that more than one style sheet can accompany your website depending on the device which the site is being viewed on. For instance, a website can have multiple style sheets that will communicate to format our footer example differently on an Android phone than it would on an iPhone or iPad.

CMS (Content Management System)

Imagine every single time you need to make an edit to your content, you have to sift through pages of HTML code. Sounds pretty tiresome, right? Content Management Systems (CMS) are a fantastic solution for separating your content from the larger functionality and design of your website, allowing for easy content updating.  Adopting a CMS to run your site will allow for your staff as various skill levels to edit existing and create new content without potentially disturbing any functionality or design elements that are a part of the website.

There are multiple popular open-source (which means it’s a free platform created by a community of developers) content management systems including Drupal, Wordpress, and Joomla. Some proprietary (which means it’s created by one company who charges you a license fee) CMS examples are SiteCore and ExpressionEngine, and many small companies have created customized CMS options just for their clients.

Each content management system offers varying degrees of functionality and support options, so it is important to research your options thoroughly before making a decision.  Open-source CMS options, which we mainly utilize at Americans for the Arts, offer robust functionality through plugins and modules (third-party codes designed for the CMS your site is running). Want a contact form on your Drupal site? It could be as simple as downloading a module, instead of coding the form yourself.

Beta Testing

So, you have what you think is a great website? Can you back that assumption up?

As you move through the process of planning to redesign your website or maintaining what you have, it is paramount to get the opinions of your audiences. This “beta testing” concept revolves solely around developing a way to solicit the opinions of others on their individual experiences with your website.

Testing can take many different forms. You can observe first hand as users navigate your website freely, give users specific tasks and have them evaluate the difficulty of those tasks, or conduct a focus group. Whichever method is chosen, it is important to test your users so that the results can inform your choices on small updates and large redesigning. Your website can be the coolest one in your field, but is it serving your audiences effectively?

Please login to post comments.