HTML5 Video, Audio, and Canvas

HTML5 Audio and Video Elements

HTML5 audio and video elements make embedding videos and sound a lot easier. There is no need for flash or silverlight because the browser automatically sizes the video and the rest (buttons for control, % size, start and stop time) can be controlled using HTML and CSS. According to this article Practical Cross-Browser HTML5 audio and video, the author (John Dyer) believes the video tag is a huge improvement from that in HTML4. He goes on to give examples of scripting and how to create buttons to control playback. This image below is an example of the code for times text tracks.

This article called Fallback options in HTML5 Audio and Video Tags can come in handy when trying to implement a video or song and have it work across different browsers. Mozilla doesn’t support MP4 and 3GP files so using these fallback options below, you can give the computer options so that the video can be seen in multiple browsers.

This is all still under development and most likely as technology progresses along with the dependence of easy web access, HTML5 will become the standard practice and these fallback options will be obsolete, but for now, they are good to keep in mind.

This article by Mark Boas, Native Audio in the Browser, focuses on the audio tag and the benefits surrounding this HTML5 feature. Like the video tag, this tag has native playback within the browser. This image below is a helpful chart to see which browsers support what files. Again, fallback options can be used with the audio tag to ensure that the audio works across multiple browsers. It is much like the video tag in this aspect.

HTML5 Canvas

The canvas tag is another feature of HTML5 that is a big improvement. What it does is add a layer of grain to an image, which is 70K let’s say, along with a layer of transparency to blend the two, resulting in an image which is significantly smaller in size than what it would be without the canvas tag. This tag not only enables designers to decrease the loading time and size of images, but also allows them to draw, so to speak, within certain areas using pixels. And each pixel can be controlled, according to this article from HTML5 Arena. This image below displays a few examples of what the canvas tag looks like in action.

This article from Web Intel called HTML5 Canvas Element puts the definition into more concise words. They define the canvas tag as an element which “element allows for dynamic, scriptable rendering of 2D shapes and bitmap images.” It’s used in tandem with javascript language. This tag also eliminates the need for a flash plug-in. Below is an example of a code which uses the canvas element.

This article by Dipal Choksi, A Practical Look at the HTML5 Canvas Tag, really breaks it down. He gives a nice, bulleted list of what the canvas tag allows the designer to control. This image below is what he gathers from the canvas element.

All in all, it’s safe to say HTML5 is going to make web design much more intuitive both for designers and web users. The need for extensive mark-up and confusing code language may be coming to a close as developers are constantly discovering ways to make web design simpler and more functional.

A Look at HTML5

After reading a little about HTML5 on  Switched along with some other sites, I gained some good and useful knowledge about what HTML5 is and what it does. HTML5 is the latest revision of the HTML markup and it allows the creator to make a website with more complex features opening the door for more user interactivity and connectivity. Multimedia experience is a part of HTML5 as well. CSS3 and javascript allow for HTML5 to be quite seamless in terms of responsive design.

HTML5 vs. HTML4.01 and XHTML 1.0

HTML5 allows for offline storage and media playback without downloading the latest plugin, which we all know is a pain to do when you want something now in our modern world where instant gratification is expected. HTML5 allows you to plug in a <video> and <audio> tag without any plugin. HTML4 has to rely on Flash or Silverlight in order for the user to watch a video or listen to audio on the web.

The main difference setting apart XHTML from HTML is that it forces the authors to use more legible codes so that there are very few mistakes. XHTML code is case sensitive and very touchy. There is hardly any leeway for error where HTML 4.01 will assume what the author meant and overlook the error. The goal for HTML5 is to make the site more intuitive and minimize semantic errors by authors.

Articles Discussing HTML5 Development

1. This article (a PDF I was emailed) from Outsell Inc., a publishing and marketing company, was interesting because it analyzed where HTML5 was going and why it would displace HTML4. Publishing and information providers are looking more toward “web technologies over native apps by two to one.” Analysts are already predicting HTML5 capable mobile device sales of a billion units in 2013 and over 2 billion units by 2013. The article goes on to say that tablets may reign over laptop computer sales and this is a good thing to know or web designers to focus on responsive techniques.

The next segment explains the risks companies would be taking with HTML5 and using native code versus a hybrid of HTML5 and native code for better performance. It discusses the research done and the prediction of where publishing companies will invest money for mobile apps and the heavy reliance of the tablet for sales.

2. This next article I read on Net Tuts is a list and explanation of 25 HTML5 techniques that could be of importance.

A few I thought were interesting was the use of the placeholder tag, which allows the author to add a value as a placeholder in a text box without doing any css.

The next one I think is handy is the <audio> tag. HTML5 supposedly will be able to playback audio and video files without relying on Flash or Silverlight. The kinks are still being worked out with the cross browser capabilities but this would surely be a lot easier both in terms of mark-up and user accessibility.

This last one is HTML5 in a nutshell. HTML5 is going to be a lot less complicated for designers as it’s going to make things easier and more fluid. This doctype link below is for XHTML.

This one below is used for HTML5.

So you see the difference?

3. This last article I read on TechNewsDaily discusses how HTML5 will revolutionize the web. The main point is ease of use and it goes on to say that users with compatible web browsers will be able to watch videos without downloading 3^rd party software. Out of the articles I read, this fact alone seems to get people very excited. iPhone and Android devices already use HTML5 because they allow the users to watch youtube videos. They can’t watch videos that use Flash because you can’t download Flash on an iPhone or Android.

The article goes on to explain why Adobe fears HTML5 will render Flash useless but that’s not entirely true as some devices will always need a plugin. Designers are also worried that a new HTML language will have to be developed in a few years for our ever-growing technological world but the web has always undergone change.

 Drawbacks of Designing with HTML5

A drawback of designing in HTML5 is the fact that not all browsers support HTML5 mark-up. While Mozilla, Chrome and Safari support most features, Internet Explorer doesn’t. HTML5 is still under development, which means it’s also prone to changes, which could push back its initial launch. This is aggravating for designers, mobile device companies, publishing companies and web users because they will constantly wonder what will be next and where to invest the money/what to design for. It puts people on edge. But the main problem is that not all browsers support HTML5.

Site Critique

I also analyzed a site that uses HTML 5. The site is called This Shell, which is an HTML5 experiment. The user puts pieces of a puzzle together while a song is playing and each puzzle piece is a segment from the video associated with it. From a design perspective, it’s quite amazing. If you finish the puzzle before the song runs out, you get to download an mp3. So I mean it’s just a time-waster but with a reward at the end if you decide to keep wasting your time. . . which I attempted several times.

I opened the site in Chrome and everything seemed to be in order and working properly. I think I’d appreciate it more if once you revisited the site the song was different. It seemed to go a bit slower in Firefox but that could also just be my version/computer. This image below shows the time you have to put the pieces together which you can see are fragmented images of the same video.

The site, like I said earlier, is an experiment. It has a few section IDs and uses javascript along with the <video> tags I discussed earlier. Simple and straightforward in terms of design utilizing sans serifs, flat color and a structured grid system. It’s clean and organized and something you could design in HTML4 with the exception of the <video> tags and certain CSS3 properties. The image below is the final product after I completed the puzzle. The song however, was a bit annoying so I opted out of downloading it.

Mood Board – Project #2

For my second project in Advanced Web I’ll be creating an 8 page website based on street art and graffiti. It will illustrate the difference between vandalism and art, the goal of street art and open a debate and offer opinions and different viewpoints on whether it’s a good platform for provoking conversation…or if it just stirs up trouble. I think it’s a very intriguing concept and response to social changes and unlike advertising which is all talking at you, it’s a response that invites you into the conversation. I have found several images of street art which I consider “art” which I’ll have to include in my site to show that some street art is just that: art. Then there is another example by Banksy who makes both a parody of society but brings in some interesting and controversial themes which people don’t necessarily like to talk about. I’m going to make my site reflect a blog since it will have so much of my own opinion and thoughts about the subject and social/political motivations. Blogs are easy to navigate and are meant to be read so that’s why I’m going in that direction. I’ll use lots of imagery but be extremely picky yet objective about which ones I use so my tone wont seem biased in any one direction. I like the idea of using a brick textured background and bright stencil/spraypaint typography for the main logotype or phrase. I think I’ll reflect that same idea in the H1 headings as well to maintain consistency throughout the site. This is a topic I’m very interested in and one that inspires me every day so I’m confident that this site will be successful both in terms of design and content. Below is the mood board I created with some type specimens, images, snapshots of street art sites, colors and graffiti art which will inspire me throughout this project.

 

Javascript Framework

JavaScript Frameworks (or JavaScript) has both advantages and drawbacks, which I’ll look at from the perspective of users, developers, and website owners.

Pros

JavaScript is noted for its improvements that enable better experience for users in terms of fast page loading and less waiting by the user, is it allows for data in fields to be validated as the user types. This makes the user experience more positive, as the website responds to the user’s interaction immediately. This helps makes website more “sticky” as the user experiences more positive feedback and less frustration in engaging with the site. Amazon’s home page is a good example in showing how the automatic field validation works, offering the users possible choices based on the entry of just a few letters in the search box.

Another benefit of JavaScript is that it supports animations that can also make for an interesting and sticky user experience or capture the user’s attention to a particular offer, say on an ecommerce website, or to a particular part of the page. World of Merix is an example with it’s moving background. World of Merix is an example of how JavaScript animations can be used subtly but add to the interest factor of a website.

Cons

While JavaScript has its advantages, particularly in terms of user experience, it also has issues that affect developer and website owner experience. JavaScript code can become very complex and full of workarounds, which makes it difficult to debug, which leads to loss of developer productivity or more time and money in building and debugging websites. JavaScript is also vulnerable to attacks and data theft due to inherent lack of security. Finally, JavaScript is not universally supported on all computers and tablets, so it only enables the user experience for those who do have it.

Using JavaScript

Some plug-ins that support JavaScript include:

http://webdev.stephband.info/parallax.html

jParallax: “Turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.”

http://www.jsanim.com/

jsAnim: “powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.”

http://fx.inetcat.com/

JavaScript animation library: “A compact, lightweight Javascript Library for animation”

http://gx.riccardodegni.net/

GX: “full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property.”

The following screen shots provide an example of some of the simple animation codes provided by GX, with animations showing the result.

http://www.as-int.com/asanim/

ASanim: “Javascript Animation Library – Only 3k (uncompressed!)”

Foldi is a digital design services website that illustrates of the iParallax plug-in: http://www.foldifoldi.com/

A site that uses MooTools (javascript framework) is Pikaboo. Pikaboo specializes in motion graphics, 3D animation and location filming. As far as design goes, this site uses unique javascipt forms and layers of opacity for the images and headings. The column in the middle is the only thing that scrolls so it nice to be able to see the entire page but still have that ability to scroll through the information. There is also some more interesting javascript animations going on in the right corner with the bouncing graphic and bubbles fading in and floating up then disappearing. It’s well organized but I found the center content (the part that scrolls) to get rather annoying after a while. It was also a bit slow probably due to the heavy javascript use.

As I changed the size of my browser window, the drop down menu on the left shifted upward to remain in view. However, the main content in the center did not move so that was completely out of view.

Overall, the site was very unique-looking and fun for the viewer to look at but I grew impatient with the scrolling.

Mood Board

For my first project in advanced web I’m trying to go in a different direction than previous projects. I’m really drawn to illustrations used in web design because it’s refreshing to see something hand drawn on a website which already takes so much time to create. I’m getting a lot of different ideas though and I could go either way: image heavy and minimalistic, postmodern, new wave type design or use something hand rendered. I could also combine the two ideas. I did some research and put together a mood board of art, websites, photographs, patterns and colors that interested me. Out of all this I can find the right direction to go in. I’m also keeping in mind what the best possible design could be for a responsive website. I want the site to reflect the concept of zen, but you can also get in a ‘zen’ state in a chaotic environment. I have a lot to think about for which direction to take this in but the mood board I put together shows where I’m headed.

Blog 1, Semester 2- Responsive Web Design

Last semester in my Introduction to Web Design class, I designed a four page site. The goal was for it to be usable and easy to navigate as well as a crisp design. Although the design part succeeded for the most part, the responsiveness and flexibility of the site was lacking. A few articles on responsive web design that helped me understand what it is exactly is A Beginner’s Guide to Responsive Web Design, Responsive Web Design by Ethan Marcotte, and Smashing Magazine’s Responsive Web Design: What It Is and How to Use It. Below is a screen shot of the site I designed last semester.

Responsive Web Design

In today’s ever expanding technological world, responsive websites are key to a successful website. With the iPhone and other mobile devices and various screen resolutions, it is important to keep flexibility (meaning a fluid grid system and flexible images) and media queries in mind when designing a site. Responsive web design allows the resolution of a site to expand or contract, with the images growing or shrinking in response, as well as the text to wrap a certain way to allow for optimal viewing on any device. This is an example of one of the media querys to utilize for viewing the web on a smartphone resolution of 480px taken from Ethan Marcotte’s article Responsive Web Design.

Changes to Original Site

The changes I would make to my site would be to use a min-width and max-width number in the CSS so my site could grow and shrink in response to the device it’s being viewed on, whether it be an iPad, iPhone, or computer with a huge screen resolution. When I scaled up the size in my browser to view my site, the entire thing, image and text, grew in response. The image lost quality as well as some of the FontFace typefaces I used. My image was set to a certain size and floated to the right to accommodate the space on the right column. This was probably a huge error in thinking right off the bat because I shot myself in the foot in doing so. I did want just a single column of text on the left because it makes readability so much easier and predictable.

When I viewed my site on my iPhone, it looked exactly the same as it did on a computer. Everything was just proportionally smaller in resolution. I had to zoom in and do lots of scrolling in order to read the text. This is because I did not use a flexible grid system nor put a min-width and max-width property in the CSS. The images could grow and shrink in resolution by using media queries but I simply did not know of this when designing the site, much less think about it.

Responsive web design involves a lot of thinking and adapting. You have to know that when you are designing for the web, you’re not doing so for one computer. There is a multitude of devices and screen resolutions that have to be accounted for in today’s society. Instead of pixel dimensions in CSS I’d use percentages to accommodate various screen widths. I’d use media queries to plug in different resolutions for my images so they could expand and contract on any device and computer. Below is an original screen shot of the second page of my site at 960px and a concept for a 480px.

Portfolio Websites

For this next post I was researching various portfolio websites because sooner or later (most likely sooner) I’m going to have to create my own portfolio. I think these sites can be very dynamic and unique because of the flexibility you have for the home page design layout.

Overview 

Usually what I’m attracted to is a site that utilizes white space and big typography with a very pronounced grid system and these are things I’d like to incorporate into my portfolio when I eventually make it. In John Likens portfolio, a motion graphics designer and art director, he uses javascript and jquery to create a unique slideshow of images for his homepage. They have a transparency with diagonal lines going through them which creates an interesting visual effect, almost resembling a Polaroid or some kind of old photograph but still maintains visual clarity.

 Organization

Below the fold his site then divides into two columns of information on the left and right containing links to recent work and current news. Likens uses a 6 column grid system and each block of information has a nice drop shadow behind it. His CSS styling is very clean and well thought out. The images are very eye-catching and make you want to read more about him and see the work he’s done. His site uses white space very well in my opinion and the shadow boxes really enhance the site. I don’t think it would be as successful without the shadows because it might feel too open.

 Highlights

When you click on a link for one of his motion graphics projects, the page turns black and brings up a vimeo video box, which you can click out of and still be on the same site. That makes it easy for the viewer to not get lost. His motion graphics are very interesting and fun to watch as well. He also includes links to sites that have inspired him which I thought was neat because everyone needs to find inspiration somewhere and it was refreshing to see a designer share where they found theirs.

This image to the left is a screen shot of one of his motion graphics projects. In 2009, he was selected as 1 of 4 motion designers to compete on stage in Chicago for the Cut & Paste Digital Design Tournament. Another cool fact about John Likens is that he is self-taught. Ultimately, we all are, but to have this much discipline and keen sense of design and layout to me is pretty impressive.

Overall, John Likens’ portfolio is easy to navigate, visually intriguing and appealing to a person with design sensibilities. The use of javascript and jquery with the transparencies and diagonal lines really is a nice touch and solidifies his approach to his entire website design. One downside to his site (or perhaps my browser) is that the images take a bit long to load up. This could be because of the heavy javascript use or the fact that there are just a lot of images but it didn’t stop me from exploring his site.

I think this is something that every designer or creative person can gain inspiration from because a strong portfolio and well designed website are very important in today’s competitive industry. Web design is one of those things that does not come easy for me but I constantly look for inspiration and unique ways of creating a dynamic site when it comes to portfolio time.

Good Website Design

A site I thought was designed well and visually appealing is the British record label 4AD. Current recording artists on this independent label include Ariel Pink’s Haunted Graffiti, Atlas Sound, Blonde Redhead, Bon Iver, Broken Records, Camera Obscura, Cocteau Twins, Iron and Wine, TV On The Radio, Deerhunter and The National among others.

Overview

The site is extremely organized and utilizes expandable columns with text that adjusts its length based on how big your browser window is. This makes it compatible and viewable on different browsers and window sizes. This website has a lot of pages with information on each band but I’m going to focus on one particular page that caught my eye when I was searching for one to analyze.

Analysis

The Bon Iver page (and the entire site) uses a 24-column grid structure. I’ll start from the top down. The horizontal navigation uses nice rollover techniques and a drop down menu appears when you hover over “artists”. There is a large image of either a painting or some album artwork in the background and when you hover over an element in the navigation, the white background turns transparent so you can see the underlying image. It’s really a nice piece of work. There is another small navigation bar on the lower right of the main graphic that uses javascript. JQuery is also cited so there are some interesting things going on with this site.

The information then breaks into a large column on the left with a lot of text and information and a secondary smaller column on the right for music samples and other links. It has a blog-like feel to it and there is enough white space for the text to breathe without feeling too open. The HTML markup uses span classes to organize the placement of the content and images in the left column. There are countless div tags being used but they are constructed in such a way that the site is sustainable and flexible.

Here is another detail of the navigation to the right. What I could not find anywhere on this site was an “about” section that explained what 4AD was because I had never heard of it before. I guessed it was a record label due to the content but thought it was weird that there was no obvious link to an introductory section of content.

Conclusion

Overall, there’s nothing extremely fancy or overdone on this site. It’s very visually attractive to me because of its cleanliness and seamless construction. A lot of thought went into creating this site and I think it’s quite successful. The javascript and advances styling really polishes the look of the design and made me want to navigate more through it all. The home page and subsequent pages on this site all follow the same rules and styling, with slight changes to accommodate additional information and graphics. It’s easy to see how organized and thoughtful the design is and really makes me appreciate web design more. It’s inspiring to see how much can be achieved on the web in terms of design.

Mood Board and Inspiration for Website

Site Overview and Topic

So to sum it up, everyone knows that underage drinking is a constant battle with today’s youth. This isn’t just in America, although it is more prevalent since the drinking age is 21. It’s the whole “forbidden fruit” idea, which makes it so enticing…and boredom among other reasons. The truth is that underage drinking and alcohol abuse is global. In Russia, 40,000 people die a year due to alcohol abuse. That is a ridiculous number. In America that number varies but it’s significantly lower. These numbers can be greatly reduced by spreading awareness of the detrimental health effects of alcohol abuse. After researching this topic and getting inspiration from various art movements and websites, I’ve decided to create a site to spread awareness about the dangers of alcohol abuse and to urge minors in America (and young people in foreign countries) to consider the consequences before engaging in dangerous drinking habits. Here is a mood board of some of the inspiration I have for the tone of my site.

Website Inspiration

One thing I’d like to convey in my site is the feeling of absolute clarity to get the point across right away. I like the idea of big typography and an image for a “shock and awe” effect. This site is a good example of big typography and good images and something I’d consider for my site.

This next site I came across is actually an alcohol abuse awareness site that engages the viewer. Most sites I visited that discussed alcohol abuse were government sponsored and were strictly informational and not well designed. This site actually has some interaction and makes the viewer want to read on and click on the links because they are visually appealing. That is of utmost importance to make my site interesting enough to be navigated. Parents and minors will be my target audience, as well as any family members of alcoholics or alcohol abusers.

This website’s home page employs big text and no images. This is something I am also considering if I cannot use an image that I think is strong enough. Words are the strongest form of communication and if I choose them right, they will have a huge impact on the viewer and make them want to read on. I don’t want the home page to be very text heavy especially if I decide to make my focal point large text itself.

Most alcohol abuse sites had no design elements and were bland and strictly informational. I want my site to appeal to parents and minors alike without the feeling of an overbearing government sponsored informational site. It will contain important facts about alcohol abuse, how you can help, places to get help, and why people abuse alcohol. I want it to be heavy and serious, yet hopeful because this is a topic that should be discussed with minors. There’s no point walking on eggshells when it comes to something as serious as alcoholism or abuse.

Single-Page Website Design

Single-Page Designs

Single-page design concepts are really a good strategy for sites that want to condense a lot of information onto a single page. Instead of links to multiple pages within the site, they use fragment identifiers instead to stay on the same page. After going through a bunch of different sites I came up with two examples that show the difference between good single-page design and not so good design.

The Good

After browsing through the articles 30 Outstanding Single Page Website Designs and Single Page Website Designs I think the site that best utilizes the single-page concept is the We Shoot Bottles website. It has a horizontal scroll bar and layout which is different from the usual vertical scroll bar.

The images are clean and crisp and the site truly condenses all the important information into a single page. The subtitles are a bright pink, which is pretty eye-catching so there is a sense of hierarchy even with the large images. Though this page is well designed, I think the body copy could be a bit darker in color because the light grey against the white is hard to read. It’s also a smaller font size. I would make those changes if I had to change anything about this site.

Overall, it is easy to navigate, has a clean layout and is aesthetically pleasing.

The Bad 

In my opinion, the site that least exemplifies that single-page concept is The Autumn Film. It has a huge red banner for a red and white sale and the site doesn’t have any common design elements really holding it together. I didn’t even notice the text for “t-shirts $15” because it is white on white with a slight drop shadow, which you can see on the image below. The overall look just reminds me of a pop up ad or something you’d be inclined to just close because ads are annoying. The grid system doesn’t seem to make much sense visually because there is an awkward space open on the bottom right. When I was going through the different sites I skipped over this a few times just because at first glance I had no desire to see more of it. The difference between these two single-page designs is very apparent and it’s easy to see which one utilizes the better concept and executes it.

Incubus Website

After reading these articles and researching one of my favorite bands, Incubus, I decided to start designing a single page site for them just as a project. The Incubus site currently has eight links to different aspects of the band and media forums. The width of the home page is a standard 960 pixels and it is quite long because there is a lot of information and member comments. The grey color palette seems slightly contradictory for the kind of music they produce. I would like to see maybe some illustrations mixed in with the web elements. Incubus could benefit from  single page design because the links take a little long to load to the next page so if they were fragment identifiers instead it could direct the viewer to the desired spot faster. It is already a very clean design but I think I would show less comments from users or have a different site for that completely, as it adds a lot of unnecessary information.