“I Think It’s Missing Something…”

Missing Feature Header

A Feature That Could Improve Your Website

As we progress on our client’s website, it seems as though something could be added to help viewers visiting the site. Our group is working on a website for an artist organization that features artists and holds events. One of the main purposes of the website is to bring in visitors to the events. Therefore, I think the website would greatly benefit from adding an event calendar on the home page. That way, visitors can efficiently access the upcoming events for particular dates.

One of the most popular calendars is Google Calendar Events. An advantage of this calendar is that viewers can sync it with their own personal calendars (if they use this calendar.) It is also easy for the client to update or change upcoming events. Any updates made in the Google Calendar are instantly updated on the website.

Ways To Implement This Feature

There are two ways to add Google Calendar to your website. One is to add the plug-in through WordPress and the other is to manually embed it.

To Add the Plug-in

Google Calendar Events: Here is the link for the WordPress plug-in. Download, install and activate the plug-in in the WordPress Dashboard. Then on the Plug-ins page, go to Settings. Here the settings can be customized for the calendar. It is pretty straightforward to use this method, but implementing it manually is just as simple. Here is a helpful tutorial article on rhanney.co.uk for this plug-in and other useful information.

Manually Embed

Calendar-Settings First you need to create the calendar in Google. Then you can change the settings of the calendar and how it displays by going into Calendar Settings (under “My Calendars”). Customize the calendar as needed, then copy and paste the HTML code that is displayed.             CalendarDetails

Then in the WordPress Dashboard create a new page, add page title and paste code into page (in text tab, not visual). Anytime the calendar is updated, it will also be updated on the website.

Google Calendar Examples

Some great examples of this feature being used on other sites are listed here:

  • Tangoasheville.com: This website uses Google Calendar in a simple and effective way. It has a “Calendar” page with a monthly format. There is a button that allows viewers to subscribe and share events. Then on all other pages it has a sidebar calendar list.
  • www.aiaasheville.org/calendar/: On this website, the calendar is very customized visually and for its functionality. Viewers may submit events and have the ability to RSVP an event. (This website also uses iCal, so for those viewers who use iCal, the event can be synced to their own calendars.) This is a nice example of how to use Google Calendar in a customized way.

Adding A Widget

Google Calendar Widget can be a useful way to display a smaller version of the calendar, for example in a sidebar on the home page that can link to a calendar page if desired: http://wordpress.org/plugins/google-calendar-widget/.

Missing Feature Resolved

Once we get the Google Calendar up and running on our artists’ website, visitors can sync their calendars and maybe there will be even more visitors in person at the events!

Advertisements

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.