Category Archives: Advanced Web Design

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.