Introduction to CMS

CMS header image

Choosing a CMS

A Content Management System (or CMS) is a way to organize content for a website which allows users to update or change without having to know code. There are many CMS applications to choose from. Each one is different and offers a variety of features. In choosing a CMS, it’s important to know which features are the most important according to you or your client’s needs.

Essential CMS Features

With so many features, it might be tempting to just pick the CMS with the most features, but this can actually do more harm than good! First, decide what essential features you need and then consider features that might be nice, but not as necessary. This is the best strategy for choosing a CMS.

Some essential features a CMS may have are:

  • User-friendly interface
  • Easy to manage menus and navigation
  • Easy to customize functions or design
  • Many templates/themes to choose from
  • Tutorials

Other CMS Features

Some other features that may be useful but might not be as essential are:

  • Many plug-ins/extensions or add-ons
  • Login History
  • Spell Check
  • Drag and Drop
  • Image resizing

Evaluating CMS Options

There are many CMS applications to choose from. Some are free and some aren’t. The following are some of the most popular and they are free:

  • WordPress
  • Joomla
  • Drupal

Do keep in mind though, that even though the CMS is free, it may cost a company to hire someone to maintain and update the website. Also, some templates/themes are not free.

Some other things to consider in choosing a CMS:

  • Using a template: How customizable is it?
  • How good is security (especially e-commerce sites)?
  • Is there an easy way to search for content?
  • Does it have clean, valid code?

Check out community forums to get feedback and learn tips on a particular CMS.

Comparison Resources

  • This is a good article from noupe.com comparing WordPress and Joomla.
  • CMS Matrix is a great resource for comparing CMS features.
  • Here is a chart with useful comparisons on socialcompare.com

SEO for CMS

SEO Rankings are important for businesses. One advantage of using a CMS is that content is easy to update and content is a key factor for improving SEO.

Magnifying glass

Here are some ways to improve SEO:

  • Meta data, page titles & header tags
  • Drop down navigation
  • Keywords in the URL
  • Keyword phrases
  • Relevant and regularly updated content
  • Backlinks (or inbound links)

CMS for Designers

Designers need to know how to use a variety of CMSs because so many businesses and clients are using them. The best way to learn how to use a CMS is by researching and practicing!

Resources For Designers

paperAs a designer it’s important to be on the lookout for useful resources. In this ever changing and evolving field, it helps to keep oneself updated on the latest technology, web design standards and practices, tips and tools. There are numerous resources out there. Listed here are a few good ones designers should know about…

CSS Tutorials

This resource is a treasure of informative tutorials, articles and examples:

Sitepoint.com

It offers a lot of helpful information through articles and references. I could spend hours absorbing information on this website!

  • HTML5 and CSS3 (including a wonderful reference section)
  • JavaScript
  • PHP
  • Web Design
  • WordPress
  • Ruby on Rails
  • Mobile
  • Cloud
  • Tools

They even have a podcast section and forums – A truly wonderful resource!

screenshot of site point.com

CSS Tools

There are many useful CSS tools. Here are two:

Text Wrapper using CSS

This tool generates a way to wrap text into a shape. I think this might be useful on some occasions, but I wouldn’t over use this tool. Still, it’s nice to have the option:

CSSTextwrap.com

text in a circle

CSS Code Correction

CSS Lint

This website is a great way to check CSS code. It claims that it may “hurt your feelings but it will make for better code!

CSS Lint screen shot

CSS Lint

HTML5/CSS Frameworks

For a framework that offers HTML5 and CSS3 as well as JavaScript, here is a good resource: 52framework.com. Here is a video they have on how to use this framework.

To learn more about 52framework, there is a good article about how to use the framework and tips to make it more efficient.

Another good resource for an HTML framework is workless.ikreativ.com.

There really is an enormous amount of web design resources. Hopefully some of these resources will be helpful.

Ubiquitous Video

Incorporating Video into a Website

camera

It’s everywhere you turn.

Video is a common component in websites everywhere. From feature product videos to a video playing in the background, this technology is a crucial aspect that designers should know how to implement and to be involved in this ever-expanding aspect of digital media.

Why Videos?

Videos have IMPACT.

Videos can appeal to the audience both visually and with sound or music. It can be dynamic by including motion as well as other design elements such as lighting, contrast, colors, etc. Now because of technological advances that support video, film, motion graphics and animation on the web, designers are expanding the way video is being used in websites.

How video is used

men-facesVideo is often used in websites for:

  • Entertainment/storytelling
  • Promoting products, services or organizations
  • Providing training or for educational purposes
  • As a design element to add interest to a website

(It can also be a combination of these.)

Benefits

How do online videos benefit the world at large?

Basically, it is a tool from which may spring a plethora of inspiring ideas, networking for good causes, reaching out to a lot of people and many other benefits. Because of the POWER of videos, it can be used to entice people to buy products (beneficial for business and economy), be informative about an issue, spread awareness about a topic (organization or company) or it can simply entertain audiences for artistic purposes.

Ways to Use Videos

A business that sells a new kind of product can incorporate a video on their website. The video may feature the product in use and show how the product can benefit the viewer. Or the video can simply tell a story that reaches to the emotions of the viewer that compels the viewer. I believe it all comes down to basic human curiosity. A video can reach some viewers in a way that is more compelling than just a still graphic.

Video as a background design element

An emerging trend is to use video as a background instead of a still image. Instead of an isolated “framed box” (within a container) of a video sitting in a website, the video is a part of the whole experience of the website. The video is the background image, filling the entire browser window. 

3-D video on website: (You’ll need some red & blue glasses to view in 3D.)

“Illustrative” Video

Another wonderful example of video used in a website is from The New York Times. It uses video to help illustrate a story: http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek

Interactive Videos

Here are websites that include user interaction within the video:

A Little Bit of History

Film goes way back…it started taking off at the end of the nineteenth century. From silent films to cable TV, film (video) is now a cultural phenomenon in everyday lives around the world.

  • 1990 The Internet was created.
  • 1993 The first live streaming video
  • 1996 Microsoft’s first media player: ActiveMovie
  • 1999 QuickTime player
  • 2005 YouTube

Source: www.blog.treepodia.com

YouTube was a milestone in online video. Started in 2005, it provided a way for anyone to upload, play and share videos.

Tech Talk: How To Add the Video

teacher

Okay, so the question remains: HOW does one incorporate a video into a website? What are the options to do so and how does one do it? First I think it is important to understand the following basic ideas…

To Embed or Upload? That is the Question…

To UPLOAD a video means: to HOST your video on your website, similar to uploading pictures to your website. A disadvantage to this is: Bandwidth (It will load down your server, especially if it is widely viewed.)

To EMBED a video means: Using a third party site like Vimeo or YouTube then embedding the video into the website. The advantages are that YouTube is widely viewed, the video can be easily shared and it’s easy to use. Also viewers can decide what resolution to view the video.

Embedding a video using YouTube:

All it comes down to (basically) are these simple steps:

  1. Download video converter
  2. Upload video to YouTube
  3. Code is given, copy and paste the code into HTML file to embed.

That is it! YouTube also provides information if you need assistance.

Using HTML5:

According to this very helpful article, http://www.html5rocks.com/en/features/multimedia, it is fairly simple to add video using an HTML5 <video> tag. The code looks something like this:

<video src=”video.webm” controls></video>

It would be best to include source options in case the browser does not support the file type:

<source src=“movie.webm”/>

Another thing to add to the code is the type attribute. This helps determine which file to play, according to the browser.

<type= “video/webm”/>

There are many more features and options that can be used with this method. To learn more about it visit the article here.

Using a CMS

For example, WordPress: www.wpbeginner.com

A video could be uploaded to a CMS, but as mentioned previously, it may be wiser to use a video hosting website, like YouTube, to embed the video.

 

Issues to Consider

As a designer, there are some things to consider when choosing how to add videos to a website.

  • Bandwidth: Video uses a lot of data and can be huge in size even if the video is compressed. Some remedies are:
  • Video Compression: This is a topic that usually requires a lot of technical know-how and a lot of learning, but it can be very helpful to understand the basic concepts and codecs if working with online video.
  • External hosting (such as YouTube/Vimeo, etc.)
  • Plug-ins: If using plug-ins, realize that browsers support different plug-ins.

Resources: Video To Website

There is a lot to this topic and this is only a basic starting point. Online video is expanding and being used in new ways as technology expands. It is important for designers to be able to incorporate video in a variety of ways for their clients while searching for new possibilities for video to be used.