Note to self

23 Apr

Dear future self,

You are about to endeavor on 32 weeks of design hell. If there was any advice to give in the foreshadowing of what is to come, it is this:

When it comes to Web Design, do everything, and I mean everything, you possibly can to better understand the content discussed in class and the art of coding. It is not wise to Facebook chat while Blake is teaching the basics in Intro to Web Design, nor is it wise to think about other design issues you are facing in Publication. Actually practice the exercises outside of class that are given in the book, don’t just read the book. Yes, it’s cute to cover the pages with sticky notes to where it looks like a Post-it family was massacred all over your book but the exercises aren’t there just for decoration. They actually help you better understand the material, imagine that! For the love of all that is holy, don’t procrastinate the day away! You aren’t getting anywhere fast and it’ll just make you gossip more with your Facebook lurking endeavors. And finally, remember that patience is a virtue. Take deep breaths!

Sincerely,

failed self

While we all wish that time traveling was a real occurrence, we can only wish that we could have done better in the first place. When starting web design, knowing that this was an option for my future, I wish that I would have known more about designing for the web. I had a taste of this in Corporate Identity however I never imagined that I would not catch on as fast as I would have liked to. Going into web blind as a bat about web design never helped anyone.

In saying this, I have a few sources to share on how you can better prepare yourself for the long haul ahead. Read any and all books that you can about web technicalities and designing for it in general. Go to the library, bookstore or the internet and read what you can; stay in the know. Practice, practice, practice! I can’t reiterate that enough. And finally, save yourself the stress later and do your absolute best on the blog posts because while you learn an unbelievable amount of knowledge about the web, it also can save your grade if you fail epically.

Resources that inspire

You know that awesome book that you get from the bookstore (and for some of us, the government pays for)? Pick it up and use it! Read it front to back, don’t use it for a coaster or food tray (guilty). It helps tremendously on projects, quizzes, and exercises, go figure! The authors of Interact with Web Standards even included little exercises that I mentioned previously that do wonders (or so I’ve heard)!

   The many times in Advanced Web that I spent in Barnes and Noble perusing the web section, I discovered this beauty that was actually very helpful. I always thought that this series was more a gag gift for a loved one but they break down the content in terms that one with little web knowledge can understand. Web Design for Dummies is a good resource to have when you’re first starting out in Intro and can’t exactly follow what’s going on.

   When you’re further along in the class, A Book Apart is a good website to visit for other books on more advanced techniques that you learn about in Advanced Web like Mobile Design and HTML5.

Jerry’s Final Thoughts

Finally, I have this to say to you:

32 weeks of being a coding slave are long and intensive. It will be frustrating and you might loose some hair however it will be worth it in the end. The business of design is turning in a technical direction and it is a skill you should all possess. For me, after 32 weeks, I found what I want to do with my major (among other things) and who knows! The same could apply to you as well. And if you are a technophobe? Man up! Fear is in the eye of the beholder.

 

 

Advertisements

HTML5 Revisited: Audio, Video and the Canvas

8 Apr

Before HTML5, one would have to use the object element used for unknown objects in an HTML document. However, because all browsers aren’t created equal, many versions of an embed element, including parameter tags, would be needed to meet different browser needs. This also included the use of a third party plug-in, like Adobe Flash Player or Quick time, and if the user was unaware of the latest version, the video or audio would not render correctly. HTML5 solves these issues by helping you play audio and video directly from the site without plug-ins. More specifically, the audio and video elements have built in media support that offers the ability to easily embed media into an HTML document.

video URL source

In both audio and video elements, the src can be either from a URL destination or a simple audio/video file saved in a local location. For the audio element, there are four attributes to remember:

audio attributes

The audio attributes in a code example

  1. controls: displays the controls for the audio display
  2. autoplay: plays the audio file automatically when you open that site
  3. loop: the audio file plays on repeat
  4. preload: buffers large audio/video files

The preload attribute includes three different values: none, auto, and metadata. Auto buffers the media file normally while metadata only buffers the metadata file in the audio code.

preload example

Example of the preload element

*In both the video and audio elements, multiple source codes can be used to accommodate different browsers instead of using unnecessary amounts of parameter elements.*

To control playbacks (play, pause, and volume)  for the audio and video, a Javascript element can be added along with this HTML5 element.

The video element is very similar in markup to the audio element but with a few extras. The poster attribute displays a central image while the video is loading or buffering and without this included in your markup, the first frame of the video will display while the rendering process continues.

For more in depth details about audio and video elements, visit Mozilla.org, Net-tuts, and Tutorials Point.

HTML5 Canvas

canvas tag

HTML5 Canvas element standard markup

The HTML5 canvas element is used to draw graphics using scripting such as Javascript, draw graphics, create photo composites, and animation. The downfall is that this element is only supported in a select number of browsers:

  • Firefox 1.5+
  • Opera 9+
  • Newer Safari/Chrome
  • Internet Explorer 9 ONLY

The semantic markup is similar to the img tag however it does not need the alt tag or src code to render. The two main attributes of the canvas element are width and height. Without a width or height specified, the canvas takes on the default size of 300px X 150px. With styles added, this perimeter will not affect the drawing on the canvas itself.

Because HTML5 canvas is fairly new, fallback content is never optional. Normally, this entails text describing what is missing or a static image that shows the completed graphic missing from the space. An example of fallback content is pictured below:

fallback content

HTML5 canvas fallback content

For detailed information on HTML5 canvas and tutorials, visit Mozilla.org, Dev.opera, and HTML5 canvas tutorials.

The Gamits

The Gamits, a punk band stationed out of Denver, Colorado, teamed up with Legwork, a design studio also based in Denver, to create this clever way to promote their new single, “This Shell” and to also introduce an experimental project that utilizes two new features of HTML5: canvas and video. When you navigate to the actual page, it brings you to an intro section, where it explains the rules of the game, how to play, and the prize: a free download of their new single. The red bar at first indicates your buffering status and the buffer time only takes a few seconds. Once finished, it gives you the button option to play the game.

The Shell home page

The Shell buffer home page

game page

The Gamits game page

Once you click the start button, it dissolves into the game page where the video automatically starts up as well as the timer (length of video). You must immediately begin dragging and dropping squares into the cells. Because they work on a sensor, you must drag and drop every square and the right cell will orient and lock the square into place once in contact with the right square. This utilizes Javascript and the canvas element while the video element is nested inside the canvas squares. Below displays a sample of one of the many canvas cells used for the drag and drop squares.

canvas markup

Sample of the canvas markup

partially finished game page

Once you partially complete the puzzle, the video begins to come into view.

sound button

The audio element is also present in this page with a small sound button that regulates the sound of the video. With newer versions of your internet browser, this project is a great use of the canvas and video elements together as one piece; a unique approach to a new technology.

Blog #11: HTML5

25 Mar


What exactly is HTML5?
According to research found on Focus.com, HTML5 is defined as the latest version of the up-to-date standards for HTML, utilizing advanced features such as video, audio and canvas element tags. While HTML is viewable in most browsers, HTML5 has certain rules to allow text formatting, video and audio on a web page. New tags such as “section” and “article” improve page performance; no flash plug-ins required. Below is an enlarged version of the chart displayed above, explaining in detail how HTML5 works.
“What is HTML5?” informative chart

HTML4 vs XHTML vs HTML5
While HTML5 may seem like an extreme difference from the HTML we know and love, there are many similarities to how they all work.

HTML4

  • consists of a very loose syntax and does not require closing tags at the end of an opening tag
  • While it is easy to adopt by html new comers, HTML4 is very browser specific.
  • harder for browsers to interpret coding, a direct affect of no closing tags.

XHTML

  • With the start of XHTML, then came the closing tag.
  • The downfall: tag restriction when nesting occurs between different tags.

“The main difference between XHTML and HTML4 is that all tags, once opened, must be closed.”

– siliconbeachtraining.co.uk

HTML5

  • defined as the latest standards for the mobile web mecca!
  • supported by the latest versions of Google Chrome, Firefox, Safari and some of the newest versions of IE.
  • stores your data and files offline, even without an internet or wifi connection.

“The best of HTML4 with added extra tags.” – siliconbeachtraining.co.uk

  • Some of the newest tags for HTML5 include:

 -Video: allowing users to embed video without a Flash plug-in required. The content is now viewable on Apple products.

– Geolocation: ables the site to locate the user via GPS, IP Address, or WIFI/Bluetooth capabilities.

 – Canvas: allows manipulation of images using Javascript.

HTML5: The Drawbacks

HTML5 has shed light on many new and amazing features to help internet viewing easier and better but, like every new age technology, it does have some skeletons in the closet. Because we are still picturing HTML5 as a child, it is not yet compatible with all browsers. As you can see on the chart at the beginning of this article, it is most compatible with Google Chrome with some compatibly with Firefox, Safari and Opera. Internet Explorer is still struggling to catch up (go figure) and this may be detrimental to your viewer base because many are still using IE as a means of internet. This also means that because it is underdeveloped, it is also subject to changes.

Good HTML5 Resources

Here’s a unique site dedicated to the production of a default build script for HTML5 based on user’s choice and catered specifically to your needs. HTML5 Boilerplate allows for customizable features based on what you need to utilize such as your choice of three options: a down loadable script with tips and tricks to HTML5, script without tips or a customizable script with options to include Javascript or server configurations. Also featured are different documents with script ready for the using in case you know specifically what you are looking for.

HTML5 Boilerplate homepage

Three download choices

Custom script menu

HTML5 Webworks by Blackberry is a developer’s website but on a different scale. This site is dedicated to the development of HTML5 apps, with tutorials and articles to help developers transform their HTML5 document into a usable application.

HTML5 Webworks homepage

This site consists of multiple sections including downloading the software called Ripple Emulator which converts HTML5 into an app as well as a testing software for Blackberry mobile devices.

HTML5 documentation

HTML5 Critique: The Lost World’s Fair

The Lost World’s Fair is an experimental website created as a spin off of The World’s Fair, only it showcases three excavations that are of popular topic, myth or reality. They separated the website into the three different sections dedicated to each “trip” in the form of an interactive poster. While others were somewhat successful, I found that the exhibition entitled Atlantis was the most interesting use of HTML5. To see El Dorado and The Moon, visit these links: El Dorado and The Moon

The Lost Worlds' Fair homepage

Atlantis

Atlantis start point

Immediately, you are drawn into the design of Atlantis. Your starting point is at the top of the ocean where you are introduced to a man in an air tube, a ship and dock are in the environment. As you see you on the left, there is a ruler of sorts with a bubble that marks your measure on the journey to Atlantis.

The start of the poster portion begins at 1K league under the sea, noted on the left. The designer uses a vast amount of fonts that all mesh with the theme of a 1960s art poster. Remember the man in the tube? Well he follows you through your journey because the user is in fact watching him journey down to the lost city. Along with eye catching informative sections, to keep the viewer engaged in the poster, little blurbs are present in “dead areas” of the space, introducing “Did you knows” to the composition.

No illustration is the same and keeps the eye moving to the next section of the poster in a consistent manner.

At one point, 10K leagues to be exact, you descend into “The Dark Zone” where small illustrations of the lochness monster and deep sea trench creatures are placed to liven the space, including humorous blurbs like this ad space available sign.

Towards the end of the poster, the type-heavy poster sets appear again, reassuring you that you are almost to your destination. A countdown even appears, used to sike the user into the rapid approaching destination.

Finally, you reach your destination of Atlantis, where the designer cleverly drops the man in the tube into an air bubble at the bottom sea floor. At 20k leagues under the sea, a reminiscence of the Seattle skyline sits with a welcoming "Hi" sign to greet you.

*Viewer’s note: While it clearly states that this site is now compatible with IE9, it takes about 20 minutes to load in IE. Other browsers such as Chrome and Safari are safe havens but beware of impossible load time.*

Javascript Frameworks

8 Feb

In today’s generation, technology has come a long way and when plain CSS websites used to be the latest innovation, they are now somewhat obsolete without today’s latest technological trend: Javascript. To improve your website’s functionality and overall design, numerous Javascript frameworks have been created to provide better load time for webpages and unique customization for information in a world where there is information overload. However, there are pros and cons to the Javascript framework system. While most enhance user interface for your web browsing experience, there’s a catch to the overall technical setup. In systems such as JQuery and MooTools, the order of the coding is key to load time. With JQuery, many make the mistake of adding the Javascript with this code:

generic page start-up code

This code is activated when you immediately navigate to that page. Because Javascript isn’t typically ran until all images are loaded first, this causes a delay in the run time of the document.
MooTools provides a framework called Ape or Ajax Push Engine that utilizes real time data streaming to a browser with no installation and its’ own web server. With its’ usability spanning to all versions of web browsers, in a world of varying technology, you’re guaranteed to reach your target audience.
Searching through a vast listing of different plug-ins associated with Javascript, I’ve narrowed down a list of five plug-ins that I feel are beneficial not only to the designer of the site but more importantly, the consumer of the site.
1. Meerkat
The plug-in called Meerkat is useful for banner advertising and even website navigation. This allows your navigation or banner to slide from the top or bottom of the window when you first navigate to the page and as you explore more into the site, it stays with you with a fixed position. You have the option to close it out all together or only close it temporarily until the browser is reloaded. Best used for one page extensive sites, it helps the user not stray too far away from the navigation bar to dive deeper into the information and with advertising, it keeps your product with them. An example can be found at Tijuana Flats‘ website. Keep your eye on the floating head and the navigation!

Tijuana Flats home page

Tijuana Flats secondary page

To see a demo of Meerkat, click here for more information.
2. TipTip
With the JQuery TipTip plug-in, you are able to add tool tips to any web page as well as being able to customize the CSS. It detects the browser window edge so to keep the tip from disappearing out of sight. This is beneficial to users who aren’t tech savvy and constant visitors to the site’s help menu. Simply roll over the word highlighted to see a useful tip to your visit.

Rollover capable words are in purple

For a demo on JQuery TipTip, click here for information.
3. JQuery Form Wizard
This plug-in is a good technique for optimizing form loading and ultimately faster load time for your entire site. It turns your ordinary form into a step by step without having to reload the page when you decide to move to the next step. By creating a flow between steps, it personalizes your experience by creating a route based on the history of previous users. To see an example/demo of the form wizard, visit this tutorial.
4. jsquares
Jsquares is a useful plug-in for various portfolio sites and sites utilizing image and information together. You can place images in an organized grid with less information around the image. However, when you roll over the image, it gives you the information for the image chosen. You take up less space and simplifies your site without simplifying the information, making it easier on the user’s eyes and guarantees them to explore the information more.

At first glance, you see the image and the headline

But when you hover, you find the article link and more.

To see a demo of jsquares, visit boedesign.
5. Gmaps

The last helpful plug-in discovered in called Gmaps: a Google map plug-in. Gmaps lets you embedded a Google map for the address of your business without creating lag. Only 2KB, it creates ease with your users that are trying to locate your place of business. It helps to keep users in your domain for a longer period of time instead of sending them else where to find your location. For example, Starbucks is a popular coffee brand that utilizes the map plug-in to help its’ consumers find a location near them.

For a demo on Gmaps, visit this site.

I was able to find a good example of a website using Javascript plug-ins and not just any plug-ins, but a few of the ones discussed above. CarrotCreative is a marketing agency based in New York that specializes in social media design and development. The main structure of the website is a horizontal layout with navigation at the top and scroll plug-in capabilities when you navigate to a different page. Many of the design features utilize natural characteristics to match the company feel like the wood texture in the body background and dirt/carrot imagery framing the active space. Once you navigate to a different page, vertical scrolling is possible on that page and while you scroll down, the navigation bar at the top goes where you go, a feature of the Meerkat plug-in.

CarrotCreative clients page

Moving on to the Staff section of the site, they feature the TipTip plug-in. It is used in a different context than the example given above however it still works the same. Once you position your cursor over the main image, the name of the designer pops up.

Staff page

TipTip hover

While the overall design is easily functional and works well with their brand, their contact section is a good example of sheer creativity. While their location map doesn’t work like Gmaps, they have an image-based directions map for every mode of transportation, whether it’s on foot, by car, subway or even dinosaur. They embed links to a Google map ready for your use so it’s usability is still on point while being a little humorous to the user.

Directions page

CSS Zen Garden

10 Jan

For the first project, CSS Zen Garden, I am concentrating on a concept that is taken to the past. Because CSS, and web design in general, is a new age form of design, I chose the theme of antiquity for the page design. As you can see on my moodboard, I have two general directions that fall under antiquity, both different time periods and styles. The left side of my moodboard focuses around 1960s and 80s comic art and pop art. A bright color palette floating around the primary colors of blue, red and yellow and a vector style with bold strokes and print registration dot patterns. The right side of the board focuses around early 1900s antiquity with a concentration on botanical scientific drawings on aged paper and ink sketches. The same color palette is used only the colors are more neutral to match the tones in the drawings. I plan to take aspects from both styles to create the theme, the best example being the book cover with Superman shown in the middle of the board, designed by Chip Kidd.

Responsive Design

9 Jan

Because of the development of mobile web browsing on Iphones, Ipads and smart phones, consumers expect to browse the internet as easily and comfortably as if they were on their home desktop computer.

Branching from a concept theorized by Ethan Marcotte of A List Apart, Responsive Web Design uses scripts, media queries and and fluid grids to efficiently flow a website from a desktop to a mobile device without complications. It’s most related to architectural design; because “architects don’t design a building for each group size and type that passes through it” — Knight.

Fluid Grids and Media Queries

Responsive design focuses on the usage of the fluid grid, which helps the website design flow between different resolutions and screen sizes.

I will demonstrate with the screen size 480px by 320px. To show an example of responsive design with various mobile device sizes, I am using the final project created for Introduction to Web Design from Fall 2011. In the desktop version, the images are large and detailed with the introduction paragraph underneath the horizontal navigation bar.

"Unexplained Mysteries" homepage, 768px desktop

"Unexplained Mysteries" homepage, 768px standard

In the 320x480px version, simulated for an Iphone 4 screen resolution, the upper section of the site has been downsized, using a single saucer image as well as the title becoming smaller to fit the screen size and centered. The navigation transitioned from a complete horizontal structure to a horizontal-block formation, large enough to become the focal point of the home page. The content as disappeared and in its place, the quote to summarize the previous content: Fact or fiction? It’s up to you to decide.

"Unexplained Mysteries" homepage, Iphone resolution

"Unexplained Mysteries" homepage, 320x480px

As you dive deeper into the website, there is a significant amount of information, more than what you see on the home page. To accommodate for this, the title on the interior pages is smaller in comparison to the title on the home page. The navigation stays in the same position, also decreasing in size to make way for the content heavy section of the page. At first glance, the default font size is set to .938 em or 11 pt because any larger will compete with the size of the other elements on the page.

"Unexplained Mysteries" interior page, desktop version

"Unexplained Mysteries" interior page, 768px


"Unexplained Mysteries" interior page, Iphone resolution

"Unexplained Mysteries" interior page, 320x480px

Media queries come into play in the interior pages because of the two-column grid structure in the desktop version. Notice how the quote is no longer visible on the Iphone resolution version. Using media queries, the quote has a float right property attached to it and with a min-width set to 480px, all the content is floated to the left. This ensures that the quote will now be at the bottom of the page, along with the secondary navigation links.

Blog Post Finale

30 Nov

Usability is one of the most important factors in a website design. If the user doesn’t feel comfortable with their time using your site, it falls to the way side and becomes unnoticeable and unused in the future. In saying this, I came across a website called The Creative Project that discusses usability and how beneficial it is to your design and the do’s and don’ts of website usability. The author lists fourteen tips to keep in mind, all beneficial to beginning designers.

The first tip targets navigation and how important the placement and readability is to your design. The purpose of a navigational menu is to direct the viewer from one page to another, showcasing your information as they take it all in. Always make it large enough to read and if using icons and sprites, make them appropriate for the link. The example used was a house for the home link. Their helpful tip suggests that the upper half of the website is good placement for the navigation.

The second discusses the contact links or contact page, suggesting that instead of using a mail:to link like most sites, a simple contact page listing appropriate email addresses for the site is best. If you are looking for a different approach, a contact form is also noted, with a section for an email address and a section to type a short message.

Next, you must ensure that your site is properly displayed on all browsers. Not all internet users are up-to-date with the newest versions of the latest browsers and you must always design for new and ancient editions. When touching on website constructional design, you should always design your pages in a consistent format. Your audience likes order and familiarity, setting a comfort level that equips them to stay longer and explore deeper into your design.

Keeping in tune with your site viewer, many users still like to print off information from your website however they don’t enjoy the hassle of printing your design too, wasting their time and their paper. Creating printable style sheets is beneficial to you because it will ensure that user to come back for your convenient information. When it comes to your content, you should also design it, structurally, so it is easy to quickly read over and gather the key points they are looking for. Designing your information in head tags ensures order and easy reading. Your content should also sound natural flowing once it’s read out loud. Remember that you are designing for a website and not a search engine. Keep a personal feel to your words.

To better your design, try not to overcrowd the space you have to work with. Design conceptually and keeping in mind that less is always more. If your site contains too much fluff, the information you are trying to convey will become lost in the design. Remember why the user is there: for the content. Your design should also include breadcrumbs in the navigation because this lets the user know exactly where they are. If they can easily navigate through your site, they’ll always explore more.

Always check for broken links in the final stages because no one likes to be welcomed to your website by a 404 error page. Remember your footer, never leave it as a footnote. How you utilize this space can go a long way by adding useful content like additional links, a search bar or a newsletter link. In the beginning stages of your design, your use of wire frames helps visualize your concept and helps organize the important aspects as well. Having a set plan helps the execution flow smoothly. With all of these tips in mind, this is a helpful site when it comes to creating functionality and usability fit for the best website design.