HTML5 Canvas and CSS3 Animations

This is my last blog posting for this course, CR2170. I would like to write about animation using HTML5 canvas and CSS3 Keyframes.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas can draw colorful text, with or without animation, and it has great features for graphical data presentation with an imagery of graphs and charts. Canvas objects can move everything from simple bouncing balls to complex animations. Canvas can respond to JavaScript events and to any user action (key clicks, mouse clicks, button clicks, finger movement). Canvas’ methods for animations, offer a lot of possibilities for HTML gaming applications. (

What are CSS3 Animations?

An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. (

My Examples

I created two animated banners for my Coffee Lounge website: the one uses HTML5 canvas animation (The Newfoundland Gardener), and the other uses CSS3 animation (Origami Competition). The Origami Competition banner is quite simple: the background and the text colors are changed by CSS Keyframes properties over a period of time. If I created the same banner with Flash animation, it would have taken much longer to set the time and the color changes the way I did in CSS animation.

Origami Gardener

Figures 1 and 2: The Origami Competition Banner and The Newfoundland Gardener Banner

Source: Naomi Kobayashi (2015)

The Newfoundland Gardener banner is more complex than the CSS animated banner. This banner has three layers (<div>s), and each layer is controlled by JavaScript functions. The letters, “The Newfoundland Gardener” and  “Subscribe Today!” move slowly from one side to the other. This banner would have been easier to create with Flash animation, since it I would not need to write a code, and stacking the <div>s in the right spot was not so easy, especially for my responsive design site.


HTML5 canvas and CSS Keyframes are quite different. HTML canvas is better used for more complex tasks, such as interactive animation or games, while CSS animation is more suited for providing simpler animated effects for websites. I believe HTML5 and CSS3 are good alternative for Flash animation, since they don’t require any plug-ins and work with any modern browsers. I don’t think Flash would be dead any time soon, but I believe HTML5 and CSS3 would replace some light-weight animations such as banners, since Flash animation does not work well with mobile devices. I’m not certain what would happen if we combine HTML5 canvas and CSS Keyframes together, but I would imagine creating animation would be easier and more fun using these two technologies together.

Thank you very much for reading my blog posts, and I hope you enjoy reading them. 🙂


Responsive Design for Better Mobile User Experience

Problems with Mobile User Experience

As I mentioned the last post, I uploaded the new version of the Coffee Lounge website in February. The site has been responsive since the last summer, but user experience for mobile phone wasn’t good, so I decided to re-design the site.

Here is the list of problems with the old version of the site had.

  1. Connection Speed
    1. Total size of CSS files was too large
    2. Total size of image files was too large
    3. Total size of all files was too large
  2. User Experience
    1. Font size was too small
    2. View point wasn’t set
    3. Tap targets were too small

I would like to hear from you about your experience of the site, so please visit the site. Your comment or suggestion for the site, especially from cell phones, is appreciated. 🙂

Mobile Site Should Design Differently From Desktop Site

Initially I designed the mobile site as a smaller, narrower version of the desktop site, but it didn’t work well. The first problem I encountered was that tables with several columns did not fit well with narrow screens.

I had three tables in the Coffee Lounge website: coffee menu, events calendar and online order form. I ended up making two separate coffee menus and events calendars because the text inside cells was not readable: even one word did not fit inside a cell without corrupting.

I changed the order form from a table to several <div>s with the display setting, table-rows in CSS styling, so it looks like a table, but it rearranges its elements on the screen as the screen width reduces.

Resolving the Problems

The site speed increased by optimizing CSS files and reducing image file size. The site had four CSS files. The two CSS files were almost identical, so I eliminated one. I replaced a large image file with several much smaller image files which are used for image buttons. The image below is the test results from Web Page Analyzer.

Download Times

Image 1: Download Times

Source: Web Page Analyzer

I followed the guidance from Google Developers for improving Mobile UX: increasing font size and line-height, setting a view point for mobile devices and enlarging the target by using a larger font for the text links and adding image buttons.


Image 2: Mobile User Experience (Before)

Source: PageSpeed Insights


Image 3: Mobile User Experience (After)

Source: PageSpeed Insights

Results and Conclusion

The new version of the site looks much better and easier to control with smartphones. The old site was very difficult to view and to navigate from the phones with higher screen resolutions, since the site display was controlled by the number of pixels in the screen width but not the physical size of the device. Once the view point was set, the site displays as I intended for mobile devices, even if I use a smartphone.

As a conclusion, the development of responsive web design is more complicated and challenging, but it can provide reasonably good user experience for mobile phone users by optimizing CSS files, reducing image file size, using larger fonts and line-height, and providing larger tap targets.

Grid Based Layout


As I mentioned the last post, grid and card based layouts have been web design trend for the last few years. Pinterest, Google Now and Digg are the examples. Grid layout is great for responsive websites for the following reasons.

1) It scales to any widths.

2) It does not have fixed numbers of columns.

3) It is defined easily with HTML5 and CSS3.

4) It makes easier to organize the content.

5) Users can find information faster.

(Miller, n.d.)

Grids Are Flexible

Grids are defined by percent but not numbers of pixels, so grid based page can accommodate any screen size, from desktop computers to cell phones. Unlike tables, the numbers of columns are not static: they can be increased or decreased based on screen size. We can arrange multiple screen layouts for different screen sizes in one web application by using Cascading Style Sheet. If a grid seems too narrow for one screen width, we can reduce the numbers of grids for the particular screen resolution without compromising other screen sizes.
(Miller, n.d.)

Grids Look Neat and Organized

I created a website for a fictional coffee bar, Coffee Lounge last spring. This site was developed for PR1100 – Website Project I and is not fully functional. I decided to use this website again for the first project of this course, CR2170 – Trends in Web Development to make the site fully working, including code-behind in ASP.NET and C#. One of the issues I found the last semester was that the text links were too small for mobile users to click, although the site was meant to be fluid enough to fit all devices. I think this is a good time to re-design the website in order to improve the user experience, especially for small screens.

I wanted to apply some of the web design trends to my websites, so I choose to use grid layout for the new version of the Coffee Lounge website. I had implemented the site in HTML5 for the structure and CSS3 for styling already, so it was painless to apply grids. It turns out to be faster and easier to find the information, it fits and looks better, especially with mobile devices and it looks more attractive. Figure 1 is the current design, and figure 2 is the new version of the site, which is under construction, and hopefully it will be uploaded in mid-February.


Figure 1: Current Coffee Lounge Home page

Source: Naomi Kobayashi (2014)


Figure 2: New Coffee Lounge Home page

Source: Naomi Kobayashi (2015)

With the current site, the user has to read from the top to find the information he or she is looking for. The user can find the information faster and can point at icons or text links easier with the new design because the targets become bigger. I also find re-arranging the information easier since everything is in individual containers, <div>.


Grid layout is gaining popularity due to its flexible structure and its well-formed format. The structure also makes easier to arrange and to search the information. The new layout will improve the user experience of my website as well.


Figure 3: Current Site Map for Mobile Devices

Source: Naomi Kobayashi (2014)


Figure 4: New Site Map for Mobile Devices

Source: Naomi Kobayashi (2015)


Miller, G. (n.d.). Responsive Grid System. Retrieved from Spectacularly Easy Responsive Design:

Moveable Online. (2014, February 14). Web design trends that will be popular in 2014. Retrieved from

Most Current Web Design and Development Trends

About Myself and This Blog

As some of you already know me, my name is Naomi Kobayashi, and I’m a second year Web Development program student at College of the North Atlantic, Newfoundland, Canada. While I’m taking this program, I have developed several websites, including prototypes, and I would like to make my websites adaptive, highly functional and attractive.

I’m currently taking CR2170, Trends in Web Development course, and this blog is a part of the course requirements. I’m going to discuss about web design and development trends in the last few years for the next four postings. Today I would like to write about the overview of the current web development and design movements.

Web Design Trend Overview

Simple, Effective and Visually Attractive

Web design is getting simpler, adaptive and more eye-catching in the past few years. If you search for “best website design”, you will see many websites with full screen background images and bare minimum messages: often they have only headers and several global links. Full screen background photograph or video are very popular among stylish companies and individuals. Minimalist landing design is simple yet effective way to communicate with the users. Full screen background photograph or video makes a website attractive and easily adapted with minimal design. Minimalist landing page with full screen image or video is also very adaptive and suited for smaller screens. Another technique to get the users’ attention is full screen typography by enlarging fonts using CSS3 properties. Full screen typography is also used with minimalist design. Designed typography with unique font is also gaining popularity.


Figure 1: Full Screen Video Background

Source: Y.Co Yachts (n.d.)

Adaptive Design for Mobile Phones and Tablets

Responsive layout has become popular in the recent years, since one website will serve for all devices. Fixed position header bars and infinite scrolling are also related to adaptive design: scrolling makes easier for Smartphone and tablet users to navigate. Fixed position header with horizontal navigation or other type of navigation system would reduce scrolling up and down on the same page. Card design is also hot in web design, since they fit nicely inside portable screens. Flat UI design, which is similar to Windows 8, is a very new trend of web design, and Google’s new material design guideline will be the new direction for this year. Card design, Flat design and material design are all suited for mobile and are simple and quick to use.


Figure 2: Pinterest (above left) and Discover feature on Spotify (above right)

Source: Cass, J. (2015, January 2)

Advanced Technologies Influence the Web Design Trends

HTML5, CSS3 and JavaScript allow web designers and web developers to create animations and games without 3rd party plug-ins, websites with grid design and responsive layout and landing pages with a full screen photograph or video in the background. Increasing numbers of Smartphone and tablet users make websites more responsive and requiring less reading, clicking and typing. High speed Internet and mobile network let users download more applications, music and video clips and image files and let developers and designers create multimedia rich websites and mobile applications.


Website design uses more adaptive, simplistic and graphical approaches to satisfy all needs and demands of all devices and users. Advanced web technologies and superior network connection support the recent web design trends.



Adams, P. (n.d.). Why Cards are the Future of the Web. Retrieved from Inside Intercom:
Cass, J. (2015, January 2). Ultimate 2015 Web Design Trends Guide (+Predictions). Retrieved from JUST CREATIVE:
Kucheriavy, A. (2012, December 18). 2013 Web Design Trends You Can’t Afford to Ignore. Retrieved from intechnic:
Rocheleau, J. (n.d.). Web Design: 20 Hottest Trends To Watch Out For in 2013. Retrieved from HONGKIAT.COM:
Web Design Trends for 2013. (n.d.). Retrieved from 87PIXELS:
Webydo. (2014, November 11). WDL. Retrieved from 7 Crucial Web Design Trends For 2015:
Weller, N. B. (2014, September 17). Web Design Trends To Look Out For In 2015. Retrieved from elegant themes: