Blog Post: #5

Advice

This class was really something that blew my mind. As much as I love print it was an extremely satisfying feeling to have created these websites using sometimes only lines of code. To create something out of completely nothing.

However it is by no means easy. Especially for me, I generally have to work at things a bit longer to really get them working which fits with my personality and one of the things I would have liked to tell myself is to make sure I make more time do these projects and fix the small things. Make sure the pages validate and are organized and clean. That files are working and where they should be, double check everything. Also to make sure and a lot a good half a day to blog posts the day before they were due. When I first started doing them I didn’t realize how long they would take. But to really be thorough and get something out of them you need time. They are relevant examples and interesting information and will help immensely. They can also help save your grade in dire situations. Do them and do them well.

I also wish going into this that I had started regularly researching good web design and knowing what it looks like and how it functions. When I got into the web design class I sometimes would have a hard time finding good examples and my work would suffer in turn because there were better and more functional ways to solve my problem. You need to be as familiar and regular with your web inspiration as you are your print inspiration and in a lot of the cases the two do not need to be mutually exclusive. Just make sure that it becomes a priority, and it will help you to recognize and know the standards of design that are out there today.

Responsivity was also a huge thing that I wish I would have thought about prior to the semester. It was never really well developed for me except for the final project and it is a huge part of contemporary web design.

As far as resources, make sure that you read the book, it’s a fantastic resource and very easy to understand. Also make sure that you bookmark or write down all of the links and resource websites Blake gives because they save you incredible amounts of time.

Advertisements

Blog Post #4:

HTML5 Revisited

In this post I will be discussing the HTML5 structural and text level semantic elements that are being introduced as well as the implemented audio and video feature. Both of these elements will be extremely influential on the future of web design.

HTML5 is all about trying to refine and make consistent standards that will be able to withstand the rapid pace at with technology changes without having to create a new set of rules every few years. It’s about making a lasting system that designers can use and work seamlessly to help give users and developers alike to have a better web experience.

Structural and Text Level Semantics

The semantic language of HTML5 is a large part of that. A number of new semantic elements will allow you to do things you have never been able to do before as well as improving the way we approached old ones. One of the newer semantic elements is a location tracking and a time tracking feature that allows you to implement special information in a page.

Tags like the credit tag (similar to cite) are now being added to offer better overall semantics to the page and just make more sense when laying out a web page. Unfortunately not all of this is going to be as easy to grasp…even if it is more practical. They are also reintroducing the tag, as ‘alternative voice’ for foreign words and typographically italicized text. The tag is now used to ‘stylistically offset’ text such as keywords. The last is the now ‘strong importance’ which is basically the same. All of these tags should be used carefully and can now be styled within the CSS.

Video and Audio

Recently video and audio on the web has become increasingly popular. Sites that host these videos are making it increasingly easy for anyone to upload and share video and audio files. Up until now many sites have used external players like flash to play this media , but with HTML5 its now possible to embed and control the multimedia itself because of the new integration.

The new video and audio elements make this really easy. The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Though some video formats support their own poster frame feature, this provides an alternative solution that can work independently of the video format. The standardization of these tools will help to make it even more accessible through browsers and are fairly simple to use.

Write an overview for each of your topics in your own words and include supporting visuals. The goal of this post is help you better understand the new elements being introduced in HTML5 so you may be able to confidently include them in the final project. Your post should also be written to help your fellow students better understand HTML5.

Links

Blog Post #3

HTML 5

HTML 5 is the most recent edition of the HTML that has been in development since the last Hyper Text Markup Language was released. After 10 years and at the rate of progression of technology it isn’t hard to see why the language is getting to be updated. It differs from HTML 4.01 in that most of the plug-ins that make for a more engaging website design had to be created outside of the HTML and then integrated; The same with XHTML 1.0. There are also better, cleaner and more specific semantics being used inside the new HTML including features that will allow for media to be placed inside the website directly without the use of outside/outdated plugins. Other changes include being able to tie location into web applications, using storage on your desktop computer use abilities of desktop computer as storage which will speed up applications in general.

The use of presentational elements in HTML5 vs HTML4.01 also differs. Tables and frames were commonly used as presentation elements on a webpage and it was the web standard to do so. Now it is no longer possible. What you would have done in html has now been determined to be part of the CSS and although the tables can still technically be used, it won’t be for entire website layouts. Instead it will be used for what it was meant for, such as organizing tables of data within a web page.

HTML5 vs XHTML 1.0 strict is a little different. In this the main difference between the two is the set of rules for the way you would generally set up and validate a page. XHTML 1.0 strict is named accordingly. The rules of validation are very detail oriented and specific. Everything must be lowercase and all tags must be closed in order for the page to validate. In HTML5 things are a bit different. Coding can be upper and lowercase and the tags do not necessarily have to be closed to validate and function. I believe that this would be my only drawback at this point to HTML5. Although it allows for more versatility, I think that the idea of having such lax rules might lead to more people being lazy about it and having messy code. Just because it functions shouldn’t mean you should just throw good coding habits out the window.

HTML5 will allow for better cross browser compatibility, not only between browsers, but also between devices such as mobile, desktop, and tablet.HTML5 gives web developers new functionality to make for a more dynamic, improved user experience. The language should allow for some performance improvements in page load as the need for additional code in web pages is thinned down a little

Links

http://coding.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

Blog Post #2: jQuery

jQuery: Pros and Cons

jQuery has become ever more popular with web designers because of the wide range of possibilities it offers. It can be used from everything to adding some interactivity to a website to wiring more complicated tasks such as building layouts. In some cases it can also add a level of function that would otherwise be lacking with the basic CSS and HTML. However, designers beware; it can be tempting to overuse jQuery and add all the bells and whistles to your website just to make it look the part. The real challenge and showcase of skill, however, is using jQuery to enhance the web experience you are trying to give the user not ovveride it. We have to ask ourselves how implementing these frameworks will affect the user experience and what their reactions will be.

Positive Aspects:

  • make a site more visually interesting by implementing different effects to enhance and invlove user
  • frameworks are usually pretty small in size
  • large browser compatibility range

Negative Aspects:

  • though compatible across most browsers, the rendering is sometimes different
  • if the user has javascript turned off, it won’t render and might affect the user experience in a big way depending on how heavily you relied on jQuery

5 Useful jQuery Plugins

Isotope

This jQuery plug-in allows you to create dynamic, intelligent layouts that can be rearanged dynamically. Items in the layout can be sorted by: filtering, sorting, infinite scroll, and various layout modes. It can also be used to accomodate multiple different layouts within a page as a form of responsive web design. http://isotope.metafizzy.co/ 

Uniform


Uniform allows you to add form stylization with cusomization for things like drop down menus, radio buttons, and file upload inputs. The form contains the same look and feel between different browsers which case give peace of mind. It works with your form elements already in place to ensure user accessibility and reliable compatibility. http://uniformjs.com/ 

TipTip

Tiptip is an intelligent customizable tooltip jQuery plugin. It is completly customizable via CSS which makes it easily editable and very lightweight in function. As far as responsive web design goes, the tooltip with adjust itself to stay within the current window size and might even change orientation depending on how the user is reacting with the tooltip. http://code.drewwilson.com/entry/tiptip-jquery-plugin 

Flexslider

Flexslider is a responsive jQuery slider plugin that was developed to allow slide animations to be fluid and responzive in a layout. The plugin includes various slide animation and customizable animations for the navigations and even allows you to adjust touchscreen settings for mobile/tablet devices. http://flex.madebymufffin.com/ 

jQuery Banner Rotator/Slider

This last one is one of the many animated rotator plugins that deals with images. It allows a scrolling transition between a slideshow of images that is highly customizable and allows for easy showcasing and navigation of banners and ads. It is also responsive and allows for configuration through the plugins parameters. http://codecanyon.net/item/jquery-banner-rotator-slideshow/full_screen_preview/109046
 

Site Example

Best Before

This is one of the more extreme uses of jQuery in a site, so much so that it could easily be mistaken for a flash website. The site itself turns out not even to be flash or complex programming but a clever synthesis of jQuery and code. The effects primarily used are screen positioning and navigation animation. http://bestbefore.ro/
 

Design Responsively

Design like everything else adapts and adjusts to the conditions surrounding it in order to remain relevant. Web design in particular changes rapidly in accordance to the technology and consumer base on which it relies upon. For many web designers, responsive web design is becoming the standard for building out websites so the average internet surfer can see the information the way it was meant to be on whatever device they choose. The technology would automatically respond to the users preferences and the mix of flexible grids, layouts, images and other CSS media queries would switch automatically to accomodate according to the resolution.

One of the things I would change about my site would be using a grid system that would be adaptable at different resolutions; a fluid grid. Its adjusts to the proportions of the screen or viewable area when certain ones are reached. When the lower resolutions for tablet and smartphone would reach, my page would switch from two columns down to one. It would crop closely around the container for tablet and crop further for smartphone and push the navigation bar to extend across the top.

Responsive images would also be implemented because my site does rely on images for the layout. This would make load times faster for my page and help to streamline the user experience. This would act in the same way that fluid grid does, when the screen reaches a key resolution the site would grab a smaller image intead of downloading the higher resolution for large screens making faster load times. I would use this technique for my header graphic as well as the watercolor splashes and butterfly on the home page.

Blog Post #6 Visual Research

Concept

You forget 90% of your dreams.

Reading this statistic sparked my interest at first because of the personal weight that I put on dreams and the possibility of what they may become. My direction for the site I am building will focus on the importance of remembering your dreams and some ways to help. For my site I really want to create a sort of dreamlike experience that the user as they navigate through the information. When I was looking for sites for visual research I payed special attention to interesting layouts with large imagery and placement. Unique navigation was also something I was keen to again looking at the placement, icon/images, and usablity to get a better idea of what my own site should look like.

Imagery & Overall Effect

There were a couple of sites that I found were interesting in terms of overall effect that used image as a central focus in their websites, Go to China being one that won me over with its simplicity and easy usability.

The central navigation is stationary at the bottom and every hyperlink contained down below leads you to a new main page with a new image and depending on the content will sometimes be broken up in to different columns as well as provides a more familiar containers of information.

Another site I found worth noting as far as the feel of a website was Teagan White: Design & Illustration a student illustrator that is relativly well accomplished in her field. The site contains fixed imagery on the top, right, and left sides while the content in the center contains a scrollbar to accomadate for the amount of information displayed. None of the imagery really moves but the effect of the overlapping textures and imagery really gives you a solid idea of what to expect from her work and is visually captivating because there is so much of it.

Some other interesting sites include:
Mellow Mushroom
MAD Architecture

Organization

One site I thought was organized well was 70 Folk Studio. The site opens with a very simple background and uses images with subhead-hyperlinks as navigation to lead you around the site. The logo in the center acts as a way to ground the user back to the homepage whenever necessary. The hovers over the image hyperlinks I also thought were an interesting touch and helpful on the mainpage as far as making sure the user knows it is being selected and interactive; something I hope to achieve on my own site.

Other interesting sites include:
Draft JP
Dress Code Studios

Navigation

For navigation I was looking for something unique, whether it be in layout or effect. http://inmotionmassage.co.uk/ “In Motion: London Mobile Massage” has a very strong visual navigaigation using image and color to unify the content. Though the location changes from the inital page you have no trouble finding the icons and makes navigating the site enjoyable.

Another site I found that organized a large amount of content in a interesting way was Moment Skis website. Main navigation is located at the top and depending on the link clicked it will drop down another menu; each time becoming more and more specific. Images are used for the links verses regular text which is more interesting visually and a strong selling tool for them. There is also secondary navigation to a different set of links below the fold.

Also Online
Bethesda Portfolio
New Gotham
Zoo Advertising

Blog Post #4 Navigation & Usability

Why Use Breadcrumbs?

One of the most important elements in association to web design is the sites navigation and usability. Because of this, a great deal of thought should be used to consider and making sure your website is efficent and easy to navigate for the user. If users cannot easily get around a web site chances are that they won’t stay for long and that could cost the site revenue. It is up to the designer to streamline the usability of the site and make sure that the user experience is an enjoyable one.

I initially did some additional research about breadcrumb navigation in web design having read over the topic in out Above the Fold book Chapter 7. Reading about it gave me a good idea of what to look for and reasons why but I thought it would be helpful to see what other sources had to say about breadcrumb navigation and just the nav in general. Breadcrumbs are used as a kind of secondary navigation to help ground users and help them establish where they are on a site. Instead of having to go back through the initial navigation, this allows the user to follow the ‘breadcrumb’ trail of links and leads the user back through the site and puts them back at the spot they choose to be without having to go through unnecessary links.

There are 3 main types of breadcrumb navigation: path, location and attribute. Each have an appropriate time and place to be used on a website but for my site I will be demonstrating a path breadcrumb. Path breadcrumbs indicate a series of steps that the user has taken to arrive at the current page. Included in this path are links back to the original page as well as links to the pages in between. It is useful because it provides a similar function to a forward and back button with better functionality.

Other reasons to use breadcrumbs include:

  • better usability
  • easy to backtrack
  • eliminate additional clicks
  • shows users heiarchy
  • visually pleasing
  • provides additional help
  • lower bounce rates
  • builds interest

Ebay

The site I chose to analyze based on the navigation and how well it works is one of the online powerhouses: Ebay. Ebay is no stranger to most online shoppers. Like amazon.com it has become a huge platform for buying and selling wares online and works exclusivly online to make it’s sales. Because of this, Ebay’s site navigation is very important to keep users on task and makes it easy for someone to navigate through the plethora of information the site has to offer.

The main site setup is very clean and organized. The left-hand side draws your attention first with the large ebay logo and the also rather large search bar. The header contains the main logo which remains as a static icon for users to find their way back to the main page and also has a navigation bar on the top right corner of the header aimed at people who use the site more regularly.

Below it on the left you find your first main navigation menu with flyout unordered lists that list more specific information in the category you have chosen. When you do click on a more specific area of interest, you are linked to that page and immediatly the navigation is slightly shuffled and is placed according to needs of the new page.

Below the search bar are the categories, familiar from before in a more condensed and traditional navigation bar. You will also see that where those categories once were on the left has been replaced with an even more specific set of categories pertaining to the subject although it contains the same structure as before.

A new form of navigation (breadcrumb navigation) is also introduced here. Below the search bar and other horizontal navigation we see a list of preceding pages that brought us here and allows us to easily jump back to those pages.

Overall the site does a good job of keeping the user grounded in the interface without confusing them on where to go so that they can do what they want more efficently. Utilizing the different types of navigation make the user experience a better one and speaks to the overall success of the website.