Advice

If I could get my hands on a time machine, and go back two semesters to introduction to web design I would give myself the following advice and hopefully I would listen to my future self. The dialogue would probably go a little something like this,

Future Paula: “Hey Paula, it’s you from the future!”

Past Paula: “WTF! How is this possible?”

Future Paula: “The all powerful web master Blake gave me access to a time machine to come back to give you as much advice before you step into intro to web design.”

Past Paula: “okay AWESOME! So, this is going make my life so much easier, tell me how to do all the coding?”

Future Paula: “Hahah, I am sorry I can not tell you the secrets of html and css, but I am going to give you some advice that might help you in your web design journey.”

Past Paula: “css…?”

Future Paula: “Yeah, anyway, I know you know nothing about web design right now but listen. You end up liking web design a lot and you aren’t too bad at the technical part but, you aren’t that good right now; so you have to change something’s to be better. You get two books in intro to web, an orange one that has all the technical info you need and you need this book everyday and read it multiple times. There is also another book that you haven’t paid much attention to, it’s called ‘Above the Fold,’ It has a lot of information about design and usability. Read that book just as much, because the design and usability is just and even more important than knowing the technical part. Also, practice more Photoshop techniques so your designs can be more visually dynamic. Practice doing the html and css exercises outside of class, because the first two exercises will freak you out! Paula, either practice your illustration skills and get better or choose visual directions that don’t require you to illustrate because you aren’t skilled in illustration. This will save you a lot of headache. Spend more time understanding how to correctly do a repeating background because not being able to do this definitely hurts your design. Research and practice responsive design more, think ahead when designing responsive because your last project fell short in that area. When you are doing your thumbnails and roughs, spend more time on them, because having a good process makes your work better. There is still so much more that I would like to say, but you must figure some things out for yourself, but I will leave you with these words, VALIDATE THAT SHIT!”,

So, that is probably how that conversation, more or less would go.

For the incoming students to web design, the advice I would give you is to:

  • Ask a lot of questions
  • Read both of the books
  • Take notes
  • Be very organized (with your files)
  • Practice at home and study for those exercises
  • Try to problem solve on your own first before immediately asking Blake to tell you what is wrong, it will help you understand the material more.
  • GTS (google that shit). There are many web resources to help you.
  • When you are designing a site, think about the user and what information they would want from the site.

Here are some good web resources to help you when designing and coding.

HTML5 Revisited

In my last blog post I talked generally about HTML5 and the new elements that make marking up content more semantic and other new features. In this post I will be revisiting some of those topics in more detail.

The future is more semantic

If you’re familiar with past versions of HTML, such as HTML 4 and XHTML 1.0 strict you know the semantics of containers, divisions, the 6 levels of headings, lists, forms and footers. HTML5 presents an updated way to mark up this code.

Structural Elements

The structural semantic elements are what we know as block level elements that break up and organize the content on the page. The elements we are used to are the divisions, h1-h6, form, fieldset, table, ul (unordered lists), ol (ordered lists), and dd (definition lists).

Click here for more HTML 4 block level elements.

In HTML5’s attempt to simplify the use of ID’s and classes, new structural elements have been born.

example of HTML5 elements in use

Section
The section element represents a section of a document and would be similar to a division, section is more semantic, but whether you choose a div over a section is dependent on the content.
Header
The header element represents the header of a section. It’s meant to be used as a container for a group of introductory content or set of navigational links. The header can be used multiple times on a page and contain more than one h1 unlike in HTML 4 when there is typically supposed to be one h1 per page.
Footer
The footer represents the footer for a section or document. It should contain information about it’s containing element. It can also be used multiple times per page.
Aside
The aside is an element that is used for content relating to the main text of a document. To know whether if the content goes into an aside, consider if the information can be removed for the document and does not change the meaning. If this is true, then the information can go into an aside.
Nav
The Nav is used to hold a collection of navigational links that usually belong in the header. Note: not all links belong in a nav element.
Article
The article element represents a section of content that forms an independent part of a document or site.

Text-Level Elements

Text-level semantics are what we currently know as inline elements; HTML5 has added some new ones.

Mark
The mark tag is used to to highlight or reference a run of text due to it’s relevance in some other context.
Time
The mark tag is used to to highlight or reference a run of text due to it’s relevance in some other context.
Meter
The meter tag is used to markup measurements, specifically a scalar measurement within a known range.
Progress
The progress tag is used to markup values in the process of changing. For example,

HTML5 audio and video

Another thing I briefly mentioned in my last blog post, is that with HTML5 you can add video right into the HTML without the need of a plug in, or a non validating embedded tag.

This is possible with a simple video tag. Adding a video tag into HTML5 has simplified the code a lot. For example,

HTML4 video code.

example of HTML5 video code

Another benefit to adding a video tag is that the video is consistent amongst browsers unlike many plug-ins and can also now be styled with CSS.

Although HTML5 video is a very beneficial thing for the web, there are some things that can’t be used with this new feature and creates some issues with copyrighted material. Copy material should not be used as a video tag, because it becomes accessible to the public and can be downloaded just as easily as copying a .jpg to your desktop.

I found video.js when looking for examples of html5 videos and I thought this was a good example of a site built with html5 and showing a video as well. The information under the video is very useful as well when wanting to know more information and how to implement a video using HTML5.

Sources

HTML5

The 5th time around

Hyper Text Markup Language or HTML has been around for awhile and since then it has had many revisions and updates of how to write the code. HTML5 is simply the fifth revision of HTML. With the update of HTML5 although not quite finished yet, has many great features that can be implemented into websites today.

Features

One of the main features of HTML5 is that now you can integrate video right into the code. As opposed to having to download a plug in such as flash to watch a video. This will save time and be safer for your computer with less risk of downloading a virus.

Another feature that shocked me was the ability to access apps that would normally only run with internet, but with html5 could be used offline. This is accomplished with a local storage system where users can store data in the cache and access it at a later time, even without internet. This feature also speeds up loading times because of the information storage.

HTML5 works cross platform so you can do one coding and be consistent cross platform. Also makes it easier to write code for different browsers.

The Difference

The difference between HTML5 and HTML4.01 is the use of presentation elements. In HTML4.01 web developers used tables, frames as presentation elements in HTML. This is no longer possible in HTML5. All of those features can be used in CSS. Tables can still be used in HTML5, but not for laying out an entire website, just for tabular data.

Some differences between HTML5 and what I am learning in class from XHTML 1.0 strict is the validation rules. In xhtml everything must be lowercase and tags must be closed and apparently in html5, coding can be upper, lower and tags do not have to be closed. Although I think it is good practice to always follow the xhtml rules, but the document will still validate in html5. You can also put more than one element inside a link.

From what I have read so far, I feel that some of the drawbacks from using html5 are that for one, the html5 update is not exactly finished and things are still constantly changing. Another really big drawback for me would be the leniency in writing code. Html5 allows certain things that I already spoke about when writing code and I feel that this could lead to a disorganized site.

Development

HTML5 Iphone App

When I saw this article I figured it was relevant since we are just starting to design an iphone app. This article goes through how to use html5 and CSS3 to build an offline tetris app for your iphone.

Some things that I found interesting in this article is that when making an icon for your app. “The iPhone will round the corners of your icon, create a dropshadow, and add a shine to whatever icon you use.”

Other things to take into account are “When you are in app mode, you have a screen size of 320px x 460px. When you are in web mode, it has a screen size of 320px x 356px. This can affect the user interface of your offline HTML5 app.”

HTML READINESS

This site isn’t necessarily an article but does relate to html development. This is a visual display of what html and css3 features are ready to implement and in what browsers.

The only features that are ready for all the broswers down to IE7 is @fontface and contenteditable.

Good Practices

This is an article I found helpful and easy to understand new markup for html5
There are new block level elements, no more div id’s, new inline elements for date and time.
The article also gives tips for good html5 practices.

Critique

Cultural Solutions

When first coming across this site I am very impressed with the visual ascetic and texture of the site. I would classify this site as a one page website, because the navigation works as fragment identifiers and brings the information up above the fold when you click the link. The organization of information is impressive to me.

When viewing the site in firefox everything seems to work perfectly, but when I viewed the site in internet explorer the jquery stopped working, so the circles didn’t follow my mouse and certain hovers did not work anymore. That doesn’t mean that the site wasn’t functional, it just made the site more static and lost some of the user experience.

Here is a markup review by htmlgallery.com:

“Cultural Solutions are an independent arts & cultural consultancy based in Lincoln UK. The site uses several new HTML5 elements. The background circles are created using images but a case could be made for changing them to canvas or SVG.”

JQUERY

J…What?

JQuery is something that I encounter everyday when I surf the web, but know very little about. As an aspiring web designer, I need to educate myself about the techniques used to create websites. JQuery is a form Javascript technique used to create interesting and interactive websites.

The Pros

Jquery is a simpler, faster way to write javascript. The file size is small, it supports css one to three selectors and works crossbrowser with Firefox, Internet Explorer, Safari, Opera, and Chrome. The best part is that jquery has plug ins that add cool effects to your websites.

The Cons

Although adding some JQuery to your site sounds awesome, there are some things to take into account when designing. Even though jquery is crossbroswer there are some known problems with some older browsers that some people still use. Such as Mozilla Firefox 1.0x, Internet Explorer 1.0-5.x, Safari 1.0-2.0, Opera 1.0-9.x and Konqueror. For people who use Internet Explorer, which a lot of people still do, when a website uses jquery, it converts relative urls into absolute links and in 5.5 the use of simple classes fail.

Plug Ins

Jquery plug ins are pre-scripted code that can be customized or used as is to enhance a website.

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.

Auto tab is a great tool to use in a site that requires forms, since a lot of paperwork is now being done paperless and online, more people also order products online and sign up for services. All of these things require forms. Having an auto tab feature benefits the user when filling out information by making it quicker when it tabs down, and provides reassurance knowing they typed the correct amount of numbers for a SSN, address or telephone number.

Galleriffic is a jQuery plugin for rendering fast-performing photo galleries.

This plug in a site could be helpful to a user who may be searching for a photo or product and is looking at many images at once and wants to quickly view a larger version of this image. This plug in allows the user to view a larger version of the photo without having to open a new window or cover up the other thumbnail photos.

Featured Content Slider Using jQuery UI

This plug in is a technique to show off featured items, articles or information in a site. It’s a good way to save space on a site while still being user friendly. Because of the layout the user can easily identify that it is a featured section of a site and is user friendly by working as another form of navigation through the site.

Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.

This can benefit users who are reading long pieces of information or articles. This Plug in basically shows a scroll meter next to the scroll bar showing the reader when they will get to new sections of information. This is user friendly because it lets the reader know where they are on the page. It also breaks up the information into sections to make it seem like less information.

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

I personally like this plug in because it reminds me of the visual thesaurus which I constantly use because it is fun, interactive and serves the purpose I need it to. Although I can’t exactly think of another use for this plug in other than the visual thesaurus I am referencing. It can be a fun interactive tool that serves it purpose it the right conditions.

Website

Of the five jquery plug ins, the one I think is the most useful is the featured content slider. A site that utilizes this technique is NBC. NBC has a lot of information to show on their site because they are a news station and are a network for a lot of hit tv shows. Although the NBC site isn’t exactly the most exciting site with crazy Jquery techniques they do use one that is very beneficial to them to maximize the space on their site and show their featured content within every page. I think they do a good job with organizing their information and displaying the types of information that visitors to their site would be searching for. Such as featuring their hit shows in a content slider above the fold.

nbc features
the biggest loser page on nbc

CSS Zen Garden Moodboard

Process

I decided to start my process by thinking of some themes that might be interesting for a css zen garden design. My thought process while in thumbnail phase is to try and create a unique web environment. I have a few different ideas in mind which might call for a different style or color palette than other ideas.

Mood board

moodboard

My mood board is a basically a visual representation of some of the themes, textures, colors, and styles that I’m thinking about using for my css zen garden site. I was aiming to do something with more of a feminine touch for this project because it isn’t something I normally do, and I think that idea is shown for the most part with my visual research. Each of my possible themes focuses on a certain skill to challenge me, from Illustration, Photoshop effects and photography.

Responsive Web Design

The Response

The creation of responsive web design is due to the invention of the smartphones, ipads, and wide variety of monitor resolutions available to the public. Everyone uses the internet and with today’s advancing technology people expect to have a flawless web experience no matter what device they are using to surf the web with.

Responsive web design is a way for web designers to adjust their design to fit various screen resolutions without having to create a whole new site to work on a cellphone or ipad. There are various techniques available to web designers to create a responsive web design such as using media queries, Javascript, fluid grids and images.

Applying the Techniques

For this blog post I am going to take the final project for my intro to web class and plan out how I am going to apply a responsive web design to it. To be honest, when designing this website I did not think about responsive web design or really even know the concept.

My final project and first website is called ReCreate, this is a website about recycling and re-purposing recyclable materials.

Recreate

Fluid Grids

Using fluid grids is a technique used to scale your design proportionately when a site is viewed on a tiny mobile device or even a very large screen. In order to do this, take the pixel width of a page element and divide it by the full width of the page. I designed my site within the 960 grid so if I take the width of one of my daily boxes, which is 460px. So I divide 460/960 = 47.91%

Media Queries

As stated in Beginner’s Guide to Responsive Web Design Media Queries,”basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles.” So, when changing my site to fit a mobile device I would add media queries in my css for a smaller pixel width such as 480px. For the specific browser size, I would adjust my css to fit that pixel width. In my design I am having my daily tip and fact float below each other and move my mission to the bottom. To simplify my design for a mobile device, I would also hide my second set of picture navigation.

responsive design

Responsive Mobile Design for ReCreate Homepage


Responsive Design for inside page

When thinking about changing my inside pages, there really wasn’t much to change except make it from a two collumn to a one collumn. For the site, I would have to use fluid images and css3 media queries for my images. Another issue I thought about with my site is the hover effect for my navigation, this effect would not be visible on a smartphone or ipad. Adding a selected state to my pages would probably fix my issue if I want touchscreen users to also be able to see the icons.

Blog Post #8 | File Organization

Photoshop Organization

In class we talked a lot about the importance of file organization and recently how to design our websites in Photoshop. Not only is it important that our files in Dreamweaver are organized, it’s important that our Photoshop files are organized as well. I guess I would call myself a hypocrite for talking about the importance of file organization, especially in Photoshop because I am very guilty of not giving my layers unique names and even putting them in folders sometimes. Which is why the website called the Photoshop etiquette for web designers site would be perfect to talk about in the last blogpost because we are all designing our final project sites and using our Photoshop comps as our main tool to do so. This well designed one page website reinforces all the tips we learned in class not only about file organization but design tips and practices as well.

The Photoshop Etiquette Manifesto for Web Designers
One of the things I like about this site is the side navigation that works as the facebook and twitter links that looks like the Photoshop tool bar. It’s really creative and sticks with the Photoshop theme of the site.

The site is broken up into eight different categories: External File Organization, Internal File Organization, Type, Images, Filters, Design Practices, Before Exporting, and Exporting.

The section I want to focus on is Internal File Organization. This section is broken up into five main tips.

internal file organization

  1. Name layers and name them appropriately
  2. Use Folders
  3. Delete unnecessary layers
  4. Globalize common elements
  5. Use layer comps and smart objects
naming-layers

example of how to properly name your layers

These tips seem easy enough to follow, but if actually done, can make working so much easier.

I would definitely recommend that everyone in class take a look at this site and bookmark it because having these tips in mind will help you be more productive and make building your site easier in the long run.

Blog Post #7 | Website Dissection

The Site

emotions by Mike

The website I chose to dissect is a freelance portfolio website called Emotions. I like the use of whitespace in the site and the format is really interesting to me because most content for websites that I see are centered and this one is off centered by a graphic and by leaving a lot of open space on the left side of the screen.

HTML

wireframe

organization

The homepage of this site is built using nine divisions.

  • The wrapper that holds all the information of the site.
  • A division nested inside called “all” that holds the main graphic, all the pictures and content.
  • A separate division just for the main graphic that is styled in css.
  • The division for the content that holds an unordered list for the navigation, the header, and a division for the text content.
  • The text division which is nested inside the content division contains the about the site, the divisions for the line graphics and the thumbnails for examples of work. The examples of work are listed as definition lists and use javascript for pop-up windows.
  • A division called empty which doesn’t have any content inside
  • The footer

CSS

backgrounds

The green background for the website is made using two different images. There is one small repeating background image to make the two shades of green that you see for the background and the navigation. That image is placed in the body and repeated along the x-axis. To create all the shadowing for the website, there is a large background image placed in the wrapper with a transparency to get that shadow effect.

To create the feet that you also see in the background a seperate image was created and placed as a background image in it’s own division that is floated to the left. The same technique is used for the background in the content. Although it seems like one seamless background it’s broken up into sections to get that depth and shadow.

navigation


When first looking at the site I assumed that the navigation was built using sprites. When looking into the css of the document, each list item for the navigation are different classes and the image replacement for the navigation are different images instead of one sprite image.

content

Basically all the titles and headers and the footer use the image replacement technique except for the written content using the Tahoma,Arial,Helvetica,sans-serif font family.

The rest of the site pages use the same organization and techniques

Blog Post #6 | Final Project Visual Research

THE STAT

106,000 aluminum cans are used every 30 seconds. Reading this statistic really got me thinking about how much we use items that are recyclable materials and don’t actually recycle. It also got me thinking about alternative ways we can recycle things such as cans and bottles without even throwing them into the trash or recycling bin.

MOOD BOARD

INSPIRATION

navigation

When looking at websites for design inspiration, I was paying a lot of attention to the navigation. After quickly glancing at the homepage, the next thing the user does is look at the navigation. The navigation I was most attracted to was navigation that included icons and text either together or just showing he text and then an icon in the hover.
For example, The website HelloGiggles has horizontal navigation that has both text and icons. HelloGiggles website
Another website that does a similar thing with their navigation is carsonified.com carsonified-grow

This website has horizontal navigation in the top right corner. When just looking at the site the links are just white text but when you hover over them, there is an icon that appears above the text and that same icon has a selected state that stays active when you’re on that page. The reason I chose to show this site is because I would like to try something like this for my site about recycling. I also like the aesthetic, typography and illustration in the site.

organization

When I first thought about how I wanted my site organized it looked a lot like the One site when I pictured it in my head. I still like this organization and I feel that it would be easy to use by my viewer. with the logo up top horizontal navigation, large image relating to topic and smaller sections with picture links.

When trying to find some other websites for some inspiration on how I would go about other options for organizing my content, I came across a website called Tommy. I thought they had a visually interesting style as well as an interesting way of displaying their information with use of grid, color, type, photos, and hover effects.

Both these sites are very different, but I think they both display very good ways of organizing information on a website and show good hierarchy.

Blog Post #5 | Single page web sites

The Concept

The concept of a single page web page is to communicate information to the viewer and easily navigate them through the page without having to take them to another page. Single web page designs are a great way to creatively display or advertise a specific product or service, show a portfolio, or even communicate a small amount of information. There are many creative examples of single page web pages that are fun, interactive, highly effective and usable. There are also some that can look really cool but be confusing as well.

Thumbs up!

MOAA site
After looking at many impressive single web page designs I came across MOAA Architects. I thought this site best utilized the single page concept. When you enter the site there are only five large links to navigate you to the rest of the information. A really interesting feature about this site is that the hover for each link is unique because when you hover, new words appear that describe what each section has to offer before you click. When you do click on one of the links, a new section appears below. For example, when I click the projects section more information appears showing picture links of various projects. When you click on a picture more information appears above about that project. The MOAA site may not be colorful, or have flash animation but the way MOAA organizes and displays their information into a one page site really impressed me.

Thumbs down

It was really hard to find a one page site that I didn’t really like, but there was one in particular that didn’t seem to impress me and didn’t really utilize the one page site to their advantage. The site I am talking about is Cubamoon Creative. This one page site is separated into four small sections and you can already see two above the fold. The overall aesthetic of the site is weak to me. The colors chosen for the site are dark and have limited contrast from the backgrounds and the text making it hard to read. The vector graphic for the site isn’t really helping either, it makes the site look rather amateur. Even though the site is short enough to just scroll down, I thought it would better to have some fragment identifier navigation at the top, instead they chose to just have an arrow for each section to direct them back to the top of the page. Although having the arrow in the first two sections is unnecessary because they are already above the fold, so clicking the arrow doesn’t do anything. To make this site a little bit better I would add some more contrast to the site and I wouldn’t use condensed text. I would also add links for fragment identifiers for each section and make the first section take up the entire above the fold.

The Blow

The band I want to design a one page site for is called “The Blow.” The blow is an electro pop indie band. Aside from liking their music, the blow doesn’t really have an official site. They have a myspace, and a bio through their record company and on the indie music database. All of which are not really designed well at all, in a sense that they don’t really show the spirit of the band. The myspace site is organized well with a side navigation for the different sections for the band, but again does not give the band any kind of personality. I can picture doing a really fun site that embodies the spirit of their music.

The Blow on Myspace


The Blow on K records