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.

Change Agent

Blazing the Trail:

As Technology Changes So Does Business

With technology constantly evolving and transforming in this digital age, business structures and practices also change.

footprints

Who knows what technology will emerge in the next ten years? Maybe computer monitors will transform into 3D displays, or interactive holographic images will spring up from mobile phones. Flying cars? We’re still waiting on that one. As technology evolves, so does the way we do things, including in business.

As far as the next five to ten years, I predict that the Internet will get even bigger, web coding and technology will evolve and offer more options (more stuff to utilize but also more to absorb into our code-soaked brains). There will be more people getting into computer and design related fields because it will permeate our everyday lives even more.

Examples of Recent Changes in Technology

Responsive Design

mobile phone

Just in the past few years, technology has moved at a rapid pace. Mobile phones (and other devices) have created the need for responsive design, a recent emerging technology that has worked itself into this field. It allows sites to be formatted automatically depending on the type of device, such as iPad, smart phones, tablets, etc.

Online Editing/File Sharing

Also emerging is the use of online applications and storage/file sharing. This includes: Adobe’s Creative CloudGoogle Drive, and file sharing/storage such as Dropbox or Hightail. Now files and programs can be accessed simply by logging in. That helps businesses, especially between designers and clients, who do a lot of file sharing (sometimes LARGE files), proofing designs, and presentations. It is also useful for designers who may want to access files and work on them from an assortment of devices or locations.

Cool New Tricks: HTML5 & CSS3

Another example of emerging technology is the updated standard of HTML5 and CSS3 that allows web designers to push the limits beyond what was previously possible. (Some examples are HTML5’s canvas, adding video/audio, CSS3’s rounded corners, columns and so much more.)

Another recent new technology  is 3D printing. These are just a few examples of the latest technologies. (I can’t wait to play around with some designs and “print” something 3D.)

Looking Ahead: Designer = Visionary?

300x216_greenarrowThis field requires a never-ending learning process. A designer must absorb a lot of information as much as possible (on a regular basis) because there is so much to learn and it evolves at lightning speed.

As far as considering myself as a “change agent” (one who brings about or contributes to change) I would do what seems like the right idea for the circumstance. I’d push the boundaries if it makes sense and feels right. It’s good to be willing to explore new ways of doing things if it works. There are standards that are good to adhere to, but it is also important to explore new possibilities.

“Learn the rules like a pro, so you can break them like an artist.”

 ~ Pablo Picasso

Change is Inevitable

Life is change.

So we’ll just have to go along on the journey, learn the most we can and explore possibilities. Perhaps one day we will have flying cars or maybe…we’ll find a way to fly without them. Only time will tell.

clock

Blogging For Business

BLOG

Blogging is a very important marketing tool for businesses. It attracts potential clients, gives people information about your business and offers insight about your company. By maintaining a consistent blog, readers tend to return which creates a loyal base of clientele.

Blogging Statistics

There are a lot of blogs out there and even more viewers. In order to keep your business from falling behind, consider having a blog.

Good for Business

Laptop icon

“WE ARE HERE FOR YOU!” Blogging is a great way to let the world know your business exists, attracts potential clients and gives people an idea about your business and company.

“THIS IS WHAT WE PROVIDE AND WHAT WE’RE ABOUT.” Having a blog is a great way to showcase your company and its services. Some content could be samples of the work or service your business provides.

“JUST IN!” Blogging is different from just having a website because it is information that keeps readers coming back. Adding to your blog regularly keeps readers interested in anything new happening with your business. Some examples may be to let people know your business is using new technology or expanding to new locations.

“COME FIND US!” Having a blog provides keywords that help search engines bring in more viewers. Connecting your blog to social networks also spreads the word.

(Here’s an article from socialmediaexaminer.com about why blogging is useful for business.)

Ways to Improve Your Blog

Info & Answers: Offer tips and information about your field. This educates potential clients and lets them know that your business is knowledgeable.

300x225dictionaryPencil

Grammar & Spelling: Correct grammar and well-written posts are crucial to maintaining a professional appearance. Spellcheck, edit and correct any grammatical errors or typos.

Comment & Share: When creating your blog, include links that allow readers to share your blog. This helps get the word out and can bring in more viewers (potential clients). Commenting is also a useful way to get feedback and connect with more people.

Plan & Publish: It may be helpful to write many posts ahead of time and post them regularly. Set a scheduled day to publish posts. This maintains consistency and keeps readers interested. A blog that just collects dust won’t keep readers coming back!

700x457_grass_path

Quality graphics: Images are an important part of creating an interesting blog. Low quality images can detract from the presentation of your blog. Make sure to include only high quality images, graphics and icons.

Easy to scan: The way to do this is to have good formatting such as pertinent headings and subheadings. Provide bulleted lists or text that emphasizes important ideas in bold or italics. (But don’t over do it!) Keep it simple and concise.

Future Blogging Ideas

I will be continually updating this blog with design-related tips and examples. Some of the topics may include:

  • Image quality and file types
  • The importance of white space
  • Tips on logo design and branding
  • Standard web practices
  • Latest trends
  • Tips for SEO

Check back periodically to learn more. Please feel free to comment!

So You Want to Start a Blog?

typewriter

Generally, I like to root for the underdog, to give the less commonly known a chance. For example, I’d rather discover some mysterious item on a bottom shelf of a bookcase in an antique warehouse, than buy mass produced mall knick-knacks. However, sometimes things are popular for a reason. When it comes to finding a blogging platform, I made the decision to go with a glaringly popular one: WordPress.

After researching available options for free blogging platforms, I discovered that WordPress and Blogger are the most widely recommended. There are other platforms that are good for specific purposes, such as  Tumblr for mainly images and video.

Features

WordPress logo

WordPress

  • Many templates to choose from
  • A plethora of plug-ins
  • Free and easy to upgrade
  • Option to transfer platforms easily without losing content

blogger-logo-vector

Blogger 

  • Fast and easy to use
  • Many options such as fonts, colors and layouts
  • Google Analytics as well as other Google apps

tumblr logo

Tumblr

  • Combined social network features
  • Good for images and video
  • Focused more on visuals, less text

Choosing

Basically, the choice depends on what the blogger’s needs and personal preferences are. I chose WordPress because it offers a lot of templates and plug-ins. Since it is so popular, I also wanted to be comfortable using it for future clients. (Keep in mind, there is WordPress.com and WordPress.org. There is a useful article here that explains the difference between the two.)

So if you are looking for a good blog platform to use, decide what your needs are, do a little research and get started.

Want to know more?

While researching this topic, I found this article on noupe, one of my favorite resources for design. There is also a useful article at PCMagazine about blog platforms. Thirdly, this article from Six Revisions has some useful insight as well.

Other Resources:

PC Magazine

Noupe

Digital Trends