Advice

I have learned a lot in the two web classes that I have taken, but I could have learned more had I been able to go back and tell myself a few things.

Practice!

This should be obvious but many of us did not do this enough in intro to web. I don’t know how I expected myself to learn the material when I didn’t practice using it. Those first few exercises did not go very well because I did not know what I was doing. It just doesn’t make sense. If I had simply done the exercises the book had told me to I would have been completely fine. Speaking of the book….

Read it!

Read this from cover to cover.

Again, this should be obvious. Reading through each chapter woud have given me a better understanding of the material we were covering in class. The exercises in the book are actually very useful and will help you out with the class exercises.

It’s ok to Fail

Don’t worry past Robbie, I am not talking about failing the class (you won’t). It is ok to mess up sometimes. If we never ran into issues then we wouldn’t know how to resolve those issues. Not everything is going to be easy at first. Make sure you learn from your past mistakes and use that knowledge to prevent further mistakes from happening.

Validate… all the time

Your best friend.

Just so you know, you will do a lot better on those first exercises if you simply validate the page. No kidding. It is so easy, make sure you do this! A lot of your issues can be solved by validating the page. Make validator.w3.org your best friend.

Welcome to Web Design

First off, the new crop of web designers should definitely read what I just wrote above. Practice, read your book, learn from your mistakes, and validate.  They should know that the next 32 weeks are going to be hard, they are learning a new language (code) and like learning any new language, practice makes perfect. Make sure you like what you are designing. It doesn’t matter how good you are at coding, if your design is bad then your site will be bad.

One of your most valued resources will be google. I know this sounds silly, but google is the easiest and fastest way to find hundreds of web related articles. I found so many helpful articles about almost every topic of web design by using a google search. Google is also a good way to find answers to coding issues when Blake is not available.

Most importantly, stay focused. These next 32 weeks can be a lot of fun if you make sure you stay on task.

Advertisements

HTML 5 Revisited

HTML 5 has a lot to offer, therefore we are reviewing it again. For this blog I will be discussing the HTML 5 audio and video elements because I know my group will need to use these elements in our current project. I will also be talking about the HTML 5 structural and text-level semantic elements because these elements are important and will change the way we structure our HTML. Lets start with Audio and Video.

HTML 5 Audio and Video

The new tag introduced in HTML 5 will allow the user greater control for delivering video on the web. The new open format will allow users to embed video and audio on a page without the need or use of a plugin. Imagine how nice that would be. No longer would the viewer have to download or update the newest version of a plugin just to watch a video. This new open format will save a lot of grief for the viewer.

Users will now be able to manipulate and change playback options. Viewers will be able to play, pause, stop, rewind, and fast forward through the video (fast forward and rewind are only supported by web-kit based browsers at this time). It appears as if each browser will choose to support a different video and audio format. Videos can be easily viewed on mobile devices. net.tutsplus.

The html5video site teaches the viewer about HTML 5 video standards. The site does a great job filling the user in on all of the HTMl 5 standards and even provides some helpful demos. The site also has a forum and blog where users can post and read about HTML 5 related topics.

I found a really cool site that blew my mind, it can be found at thewildernessdowntown. The site is an interactive music video created with HTML 5. I don’t really understand exactly what was technically happening on the site, but it seems to take web design to a new level. The site has you enter in the address of your home town, it then creates a music video based on that location (it looks like it uses google maps). It is just a really cool site that shows the potential of HTML 5.

Check out this site. It has some really cool HTML5 effects going on.

HTML5 structural and text-level semantic elements

The structural and semantic elements will change the way we organize our HTML. These changes are for the better and should simplify our job as coders. Some of the new elements include the header, footer, aside, section, nav, and article. These new changes will help organize the content of the HTML. For instance, you will now be able to place all elements relating to the header inside of the <header> structural element. These new structural elements will cut down on the amount of div’s needed. The new article tag will allow users to represent a self-contained piece of information, vanseodesign.

What the article tag can do.

Learn.shayhowe is a very useful site I stumbled across that does a good explaining the new markup. The following image gives a good example of how the new semantic elements could be used.

New Structural Elements

W3Schools was a very informative site that listed all of the new elements in HTML 5. It also has a list of removed elements, this is also a nice thing to look at. The site does not go in to detail like the others I mentioned, but it is really nice to see a list with descriptions telling you what is new and how it works.

What's New.

HTML 5

What is it?

Html 5 is the newest version of the hyper text markup language (html). This version is still in development and aims to surpass the previous version (html 4.01). Html 4.01 provides the backbone to all sites on the web. The newest version (html5) builds off of 4.01 and adds some new and useful features. Html 5 hopes to decrease the need for flash and other plugins by creating features that will make these applications and add-ons unnecessary. Html 5 will also allow audio and video to be imbedded directly on to a site. This is huge. This means the user would not have to download an add-on just to watch a video or listen to a song.

Html 5 is being built to work with and around webApps. WebApps are applications that can run directly on a browser. BusinessInsider.

"HTML5 promises to make the web as rich and interactive as native apps"

Html 5 will simplify markup. As you can see in the image below div’s have been simplified and now reflect the content of the document. Designzzz.

Drawbacks

There are some shortcomings that should be noted. The main drawback is that, as of now, not all current browsers support the markup. This is likely to change with time, but as of now only certain elements of html 5 are supported. Html 5 is still a work in progress, this means that nothing is set in stone. Some of the language can and will probably change before it is completed. Lexolution.

Lexolution

There are also some issues with media files in html 5. Different video and audio formats will probably have to be used for different browsers. This is not a huge deal, but is still a problem. Hopefully this problem will be resolved and a universal format will be accepted.

Lost Worlds Fairs

I chose to do my critique on the Lost Worlds Fairs website. This is an explorative website that was created to show off WOFF (Web Open Font Format). The content of the site is based on world fairs that never existed. There is one based on El Dorado, one based on Atlantis, and one based on the moon. Each site is well crafted and has its own unique typography approach.

The El Dorado page uses antique typefaces to create an aged feel.

Atlantis uses bright and fun illustrations to bring the underwater city to life.

The moon uses san-serif typefaces to create a futuristic atmosphere.

Each of the three fairs have some really cool effects that can be seen by scaling the browser window. Each of the three fairs are extremely well designed and create their own unique look and feel through imagery and typography.

After viewing the site in Google Chrome, Firefox , and Safari, I did not see any inconsistencies. The page seemed to be the exact same with every browser.

JavaScript Framework

What is JavaScript?

JavaScript is a scripting language used to create interactivity and visual interest. It is a simple way for users to manipulate HTML and perform specific events. Basically JavaScript performs specific user-generated tasks. These tasks can range anywhere from creating a pop up box to counting the amount of views a page gets. JavaScript can be both visually attractive and completely functional. Sites such as jQuery provide a library of scripts for users to browse and download.

jQuery logo

Script library

Benefits and Shortcomings

Lets start by discussing the benefits. One of the most important benefits of JavaScript is that the user does not have to download anything in order to use the JavaScript language. JavaScript is supported by all major browsers and should automatically be turned on. Another benefit is that JavaScript can be used and triggered as soon as the page is loaded, or it can be triggered by creating a specific event. For example a certain script can be triggered when the user hovers or clicks on a certain button or element.
JavaScript has endless possibilities with the ability for users to create their own plugins.

There are some down sides to using JavaScript. Using multiple scripts can damage search engine optimization. If the search engine looks at your page and sees a lot of script then the search engine may not understand the content of your site. Another problem is that Java Script can be turned off. If it is turned off then the page will not be viewed as the designer intended. JavaScript can have security issues. Because of the client side coding scripts can be manipulated and misused by hackers for malicious purposes.

Plugins

Here is a list of some plugins I found creative and useful. Click on the name for more information.

xBreadcrumbs (extended breadcrumbs)

This script is helpful if your site has a large or confusing navigation system. This script creates a breadcrumb list of how you navigated to where you are. I really like this idea. I often find myself backtracking through a site wondering how I got to where I was. This simple script eliminates that problem, think of it as a road map.

Breadcrumbs

A roadmap of where you have been

jSquares

This plugin creates a pop out image with a text description when you hover over a specific image. This script is simple, yet adds interactivity to the page.

jSquares

Creates a pop out image with a description

Sliding Labels

This fun script slides a label from an input field to the left or above the field when the user clicks on it. This little animation is discreet yet effective.

Sliding Labels

The label slides to the left when clicked

Quicksand

Quicksand reorders and shuffles groups of images with the click of a button. It is a lot of fun and adds a lot of visual interest to the page.

Shuffles and rearranges images

ImageFlow

I have seen multiple variations of this plugin before. It creates a carousel slide show of images. You can navigate though these images by sliding your finger left or right on the track pad, using the left and right arrow keys, or by clicking and dragging. The carousel adds a nice seamless effect to the site.

Site Critique

CssMoon

The site I chose to critique was CssMoon.  CssMoon is a site that showcases numerous well designed CSS websites. There are a lot of really cool and well designed sites displayed. This site utilizes and incorporates JavaScript into its design. The main script the site uses is the carousel slide show. This script allows the site to organize and showcase many css sites at once. The carousel provides a nice seamless and clean effect.

Carousel Slide show

There is no written content on this page. The site is all visual. The slide show creates an attractive way to display the image content. The site is well designed and consistently uses a cool color palette. These colors mesh well with the image heavy design. The only real problem I have with the site is that I experienced a long loading time. The carousel took some time to load, which is understandable because there are a lot of images.

Zen Garden Concept

Selecting a Mood

After a lot of research and consideration I have selected a mood for project one. I would like my Zen Garden project to feel dark, surreal, a little playful, and unearthly. I will achieve this effect through heavy photo manipulation in Photoshop. You can see examples of this below.

I chose this style because I love doing this kind of work. I will admit that this style can come off as “cheesy” and just plain silly if not done properly. But when done properly surreal images are a lot of fun and visually engaging. They are always unique and will usually grab the viewers eye, allowing the work to stand out. This style has almost limitless potential, I don’t think I will have trouble thinking of multiple solutions to my design problem.

Color

The color palette I selected features muted reds, browns, and greens. I believe these colors will help create the dark atmosphere I wish to convey. These colors will allow me to go dark yet still maintain a somewhat playful atmosphere.

The thumbnail process will be very important in the development of my concept. Implementing this style into a web site will be a challenge, that I am sure of. Although it will be a challenge, I am excited to begin working on my concept.

Responsive Web Design

Dealing With Different Devices

The web has expanded and grown over the years. New devices such as smartphones, tablets and netbooks have changed the way we view the internet. Each device has its own resolution and its own unique way of viewing the web. As web designers we must be aware of how these devices differ and create designs that will accommodate all resolutions and dimensions. In order to achieve this we must learn and practice responsive web design. In this blog I will be using a previous site I designed and describe how I would make it more responsive. The Beginner’s Guide to Responsive Web Design suggests fluid grids and media queries should be used to create responsive design.

Liquid Layout

In order to create a design that can be used for various resolutions a liquid (or fluid) grid must be used. A liquid grid allows content to be scaled proportionally on a page. You can achieve this by using a percentage in the width of a element on the page instead of using pixels. This allows the information on the page to scale proportionally to the size of the browser window. For example, my original site was designed to fit a 960px resolution. The image replacement for the header “The Solar System” was designed to be 575px in width. 

For a responsive design I should instead use a percentage for the width of the image. I can do this by dividing the with of the image (575) by the width of the grid (960). Using a percentage for all of your page elements will make sure all elements scale proportionally to one another when the browsers size is increased or decreased.

How to calculate width percentages

Using Percentages

Media Queries

Media Queries are also an important part of responsive design. Media Queries are used to create separate CSS styles for many individual resolutions. Basically the media queries recognize what type of browser is being used and then apply whichever CSS style has been designated for that browser. This is a vary handy tool. For example, if you are viewing a page on an iphone then the media querie will automatically use the CSS style designed for the iphone’s resolution. If my Solar System site were to be viewed on a mobile device it would not fit correctly in the small browser because it was not designed for such a small browser. The three column design is not desirable for such a small browser, the type would be very small and illegible without the viewer first zooming in. In order for the design to be responsive I would have to create a separate style for the small resolution of the mobile device.

Mobile Image

Responsive Mobile Design Home

This new mobile design creates a one column grid that is easy to read and navigate and the image has been relocated above the navigation. These changes better suit the narrow dimensions of a mobile device.

Mobile Image

Responsive Mobile Design Interior

The interior of the Solar System site would require an extensive redesign for a smaller resolution browser. The majority of the type was removed from the page. To make this page more responsive I would make each planet image a link to the copy information. If all the content were on the page, the page would be cluttered and hard to read.

Web Design Cliches

The web is a vast space filled with many well designed and unique web sites. But for every unique site there are dozens of unoriginal, cookie-cutter pages that all feel the same. After researching the topic I have put together a list of web design cliches that should be considered before designing a page.

Gradients

Although gradients are not inherently bad, great care should be taken before using one. Gradients are often used as the background of a site or even for navigation. Gradients might seem like an easy way to  ad some color and visual interest to a page, but be careful, gradients have a tendency of looking cheesy and unprofessional. An example of this can be found at the Industrial Painterweb site. The site uses gradients throughout their page, but it is particularly noticeable in the navigation

Poorly designed gradient site

Doesn't the gradient make the page look unprofessional?

Stock Photography

The internet is plagued by the overuse of the same stock photos. Stock photography itself is not a problem, it is a quick and easy way to find well photographed images. The problem is that there are a lot of generic stock photos used by countless sites. Examples of these are the business handshake, a group of smiling business people, and the earth or a globe. Stock photography can be a wonderful tool, just be careful when selecting your photos.

Stock photo of a business group.

Have you seen this before?

Flash

Although flash animation may sometimes look pleasing and ad visual interest to your design, it can come off as unprofessional. Unprofessional design will cause the viewer to question the trust of the site. If the viewer does not believe you are credible they will hit the back button and then poof, you have lost a potential client/sale. Poorly designed flash animation will look gimmicky and annoying. The goal of the animation is to communicate with the viewer, not create a distraction or annoyance. Sitting through a flash intro of a  page can be torture, especially when the designer forgot to ad a ‘skip” button. If the flash animation on your page is not carefully designed you should reconsider its use. If for some reason you are interested in bad flash check out this article on Awesomely Bad Flash Intros.

Loading image

We have all seen this screen.

Design Elements

There are many themes and elements that have become overused in web design. I will only name a few of these elements, The first is the page curl. How many times have you seen this concept? It is everywhere! For some reason we are obsessed with the idea of turning a page. It shouldn’t be hard to stay away from this idea.

Page curl

How many times have you seen this?

The same goes for sun rays. The sun ray has been used to death in both web and print design. An example of this can be found at the Jared Campbell site. The site isn’t poorly designed, it is just using an overused design element. If you are looking for originality, keep looking.

Sun Ray

Look familiar?

Using a cliche may seem like the easy way out but it will cause your design to suffer from lack of originality. It may take more time, but being original and unique is what will separate your site from the thousands of cliched sites on the web.