If I could go back in time and give myself some advice, it would probably be to focus on what are the common trends in good web design. Although vertical navigation is the first baby step, I’d heavily suggest looking into incorporating horizontal ones for their versatility. A problem that I seem run into a lot is how to tie the concept of my website with other elements and creating a complete package. Often I see that I have a good direction but I can’t ever seem to push the concept enough to have a successful design. Looking at web pages isn’t enough work. Really look into why it works well together and why each visual element drives the concept home.

Analyzing web pages is something that is a must, but don’t get overly inspired and bite more off than you can chew. Otherwise, you won’t have a finish website or a good grade. I sometimes stumble on good design and am intrigued about how one particular website worked.  After spending about two hours looking into I just started to understand what was happening.

It’s simply not enough to do the bare minimum for these classes. Intro to web is the most crucial class because if you skate your way through, you will not be ready for advanced web. Read the book! Don’t buy it and not use it. You are just wasting your time in the class and your money.

Firebug is indeed your friend. You will use it and it will make your life easier, but don’t rely on it. If you know the code from the top of your head, you most likely know how the code behaves. This leaves you with not having to check firebug for every little mess up you have.

Also, don’t be afraid to do something different. Approach visual styles differently and try to expand your knowledge traits.

Advertisements

These articles discuss a lot of html5 structural and text-level semantics. More importantly, it doesn’t place as much emphasis on the actual markup, but places a high importance as to why using these new html5 technique can make a website more meaningful.Html5 is shifting the way web design is currently functioning. With more techniques and using old ones differently, we can see that html markup is becoming more like a informational language for other web developers.Tags such as the meter tag doesn’t add much to the actual content, however it does add a semantic meaning.

The meter tag is used to markup up scalar measurements (scalar measurements imply that it has a measureable quantity with no direction unlike vectors. For example, how much you weigh).For other web designers we can appreciate this new semantic technique because it adds value to the markup content. Almost like a poet, the author gives meaning through metaphor so that the reader may understand the importance.

With addition of new tags, it may be confusing as to what are their purpose. After further reading I am just starting to understand the applications of these new techniques. A few interesting tags that threw me for a loop were the del and s tag. This article gave me a little more perspective. The way this article was written made me spend a little more time trying to learn it. Unlike other articles, the author uses the tags in his introduction. So, when he explains the uses of these tags, you can see how they are used. The explanation of the why and how gave me more understanding.

 

http://www.vanseodesign.com/web-design/html5-semantic-elements/

http://www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML

http://csswizardry.com/2011/01/html5-and-text-level-semantics/

The canvas addition to html5 seems rather confusing. My interpretation is that by using javascript comands one can draw anything on the canvas. However, this seems rather odd and complex. For me this new addition would be useless seeming since I don’t know anything about javascript. However, looking further into this canvas element I saw some interesting experiments found on this site.

Looking at all of these animations, I was immediately confused because I thought the canvas was strictly for a drawing and never considered including animation in this element. As I was doing more research on the topic, I realized that the canvas addition also played into a topic of html5 web-based applications.

There are now web-based canvas additions that don’t require the creator to use javascript to draw. Devianart Muro has jumped on the band wagon for html5 and created a canvas app. This app is very sophisticated and to me worth more than standard canvas addition. It allows many different brushes and layers can be added almost like photoshop. The best part of this is that there are no third party plugins needed to run this (although a devianart account is required). After looking at the devianart app, I’m most impressed and am disappointed with the html5 canvas.

http://dev.opera.com/articles/view/html-5-canvas-the-basics/

http://www.hongkiat.com/blog/html5-web-applications/#top

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

HTML5 text-level semantic elements/canvas

html5

HTML has not been updated for since 1997 and with the new upcoming html5 comes more usefull features plus some bells and whistles. Although it is not finished and is continually being worked on, I’m sure that once it is out, it will just as exciting to develop websites as it will to view them.

With every new update comes positive and negative feedback.
Html5 allows websites to be more organized using some tags such as header, footer, and navigation. What was by far more interesting to me was the addition of an offline mode. Google mail is already interested in this and in beta testing for its online/offline email service. Using an offline mode is quite advantageious because it allows a storage system to house user data in the cache to be accessed later even if there is no internet available. One of the interesting bells and whistles of html5 is the addition of integrated audio and video code. This allows for the user to not worry about downloading the neccessary plugins, be less likely to contract a virus, and promotes faster web browsing. The negatives on this may be smaller than all the positives but they still remain. Even though html5 implements very cool and handy features, it is not compatible with all browsers. This is a major problem. This may not seem harmful but it was brought up that if you consider how many people are still using Internet Explorer, then you will realize how had this can turn out.

http://html5test.com/

 

Although this is not an article, it still pertains to html5 and browser support. By visiting this site your current browser is rated to see if it can support the upcoming html5. After you are given your score you can actually see what html portions your browser failed or passed on. I was surprised to see that my browser did not pass the MPEG-4 portion on the video. At the moment it doesn’t test all the features of hmtl5 but that is also because html is ever changing.

http://radar.oreilly.com/2011/07/what-is-html5.html

http://html5readiness.com/

This site shows some of the features available with the different browsers. The front runner for the browser compatibility is google chrome followed by safari. Once again it is noted that Internet explorer seven, eight, and nine are least of all capable of supporting html5.

http://www.mynus.sk/

 

After looking at this portfolio site in two different browsers. I only managed to notice two slight differences from browsers google chrome and internet explorer. Perhaps it is due to a more up to date IE. Even when re-sizing the window not much changed. However, I did manage to find one thing different from the browsers. The strike-through on google chrome retains its font family’s style while internet explorer creates a chunkier version (almost seems as it is a default version).

Javascript

Pros


Large opensource community offers many advantages to the web designer. Designers using this large community to their advantage no longer need to start java projects from scratch and can use what is already out there to either implement or make the jquery better for their own usage. Also, jquery has many tutorials ranging from beginning to advanced skill levels. No matter what your skill level is, it will be possible to integrate jquery into web design.
Another added bonus to jquery is the ability to engage the user past simple css and html. Slideshows, slow scrolls, tips, and animations are just some of the benefits that javascript has to offer. In comparison to css and html, javascript can produce similar and sometimes better outcomes with less code.

Cons

The integration of javascript allows many possibilities for the designer and user. However, javascript may bog down the user’s experience due to longer loading times because the file size is indeed larger. If loading times may be problematic for pc users then the problem only gets worse for mobile device users. With the rise of smart phones, these devices will choke when loading websites. Adding a larger file size will inevitably hurt the user’s experience more than it will help.
Another problem is that it can be turned off, and code can be seen to the user. If not designed properly, a webpage can dramatically lose the user’s interest if javascript is not well thought out.

Conclusion

I think the integration of javascript is wonderful for web design. However, it should not be used to define the website. Jquery is not a crutch! It should only be for polishing and accenting how well the site is designed. As we make considerations for responsive web design, I think we should do the same when it comes to javascript. The use of larger file sized scripts can bog down these devices. Considerations and accommodations need to be made when designing the sites so that every user may have a pleasurable and engaging experience.

Interesting scripts

Jsquare
This is an interesting scripts the allows the user to hover over the image to see a larger version with an added description

Slides

Slides offers a simple solution to presenting slides. Sometimes simple is better.


FitText
“FitText auto updates the font-size according to the width of element so that it can fit to the layout and it promises you a non-breakable layout even if your web page is displayed into a mobile browser or a desktop browser”.


Accordion Multilevel Menu
This menu allows a different option than dropdowns for possible navigation.

Quovolver
This displays and interesting way to portray your quotes on your site.

Jquery Site

FormFiftyFive

FormFiftyFive is a creative showcase of international design. This website uses javascript just about on everything of the webpage. At the top we see a expandable tag underneath each navigation item. Once pressed, a box pushes down the design to allow for content. On the left side of the webpage there is also another tab that showcases relevant content items.

Regarding the images, those also have jquery. When hovering over an image, a description box appears to introduce the visual content.

I have mixed feelings on this website. I think the overall aesthetic is visually interesting, but I think the layout could improve the user experience. I feel that the javascript on the navigation and content are appropriate. However, I think the image descriptions make all of the images rather boring, especially since they are all jam-packed into the left hand portion of the screen. I’m viewing this FiftyFortyFive on a pc and half of my screen is the background color. Furthermore, A responsive layout would surely benefit this webpage since there is none. I feel that the content and the concept are pretty strong. However, this website’s detrimental error is its layout and how it presents these compelling images.

CSS Zen Garden Mood Board

This mood board displays some of the themes that I am considering for my CSS Zen Garden Website. While brainstorming for new ideas and sketching thumbnails, I soon realized that my stronger sketches were a bit more feminine. With this idea in mind, I gave thought in doing something feminine and gave myself a backup idea that was more masculine for variety purposes. With that said, my themes are; Vogue Red Riding Hood, Pastel Marionette, and a Nuclear Mask theme. I believe that Vogue Red Riding Hood is the strongest concept and should be illustrated with washed/water colors to give a more feminine and appropriate feel to the concept.

clear

Responsive Web Design

Since the invention and implentation of new devices such as tablets, netbooks, and smart phones, responsive wed design allows web developers to create a single website targeted for all of these devices. No longer are PCs the main use of internet. Using key web developing techniques can allow us to create our sites with a more flexible infrastructure that allow us to properly deliver our vision to most devices adequately. This is purely an ingenious use of css and html. This trend is on the move and taking off so much that it is clearly becoming the norm and less of a trend. With this is mind, planning out websites will be more difficult. However, they offer more functionality for everyone which clearly makes them more valuable despite an increased difficulty.

Planning For Flexibility

After reading these articles about responsive web design, I decided to look at one of my most recent websites. This website was intended for PCs and was given no thought to other devices. Since responsive web design is our topic, I thought I may consider the idea of flexibility and possibly understanding that I may have to change my layout to compensate for other screen resolutions.

Home Page

Compensating For other devices

By changing the original two column grid into a one column grid provides better use of the small space on a 480px screen. By moving the navigation to the top and utilizing a horizontal navigation, this allows text to take up most of the width of the screen that enables the text to be the same size or can allow the text to be larger if need be. When looking at this layout, I definitely see that my original webpage needs to be altered to accommodate the fluid grid layout I am desiring.

Statistics Page

Compensating For other devices

Like the home page, the interior pages needed to be changed. Most of the changes are inherited from the parent page, but as you can see the interior pages need to be changed more dramatically than the home page due to an offset two column grid. This posed a problem because only one content box can be shown for aesthetics. I chose to keep the white content box for a little variety to differentiate the home page from the interior pages.

Considerations

After doing this exercise, I’ve reached the conclusion that my site would have to go through some reconstruction to accommodate smaller screen resolutions. Changes to the navigation, column structure, and the reconstruction of my html and css to use media queries and fluid images, would have to be changed. From this, I realize that planning my with this notion of responsive web design is a lot easier than fixing a site to be more responsive.

Blog Post 8

Headlines are a good way to lure in visitors to your website. In essence, the headline represents what your website is all about. Depending on your headline, it will decide whether visitors should stay or go. I found a few tips from around these websites to keep in mind when writing headlines.

http://www.4syllables.com.au/2011/08/accessibility-web-writers-part-10/

http://www.excessvoice.com/article42.htm

http://www.google.com/support/conversionuniversity/bin/answer.py?answer=77157

  • Use great typography
  • consider and describe the purpose of the headline clearly
  • use subheads to help summarize the article/site
  • use keywords and key phrases
  • avoid tacky catch phrases or acronyms

Of course these are akk uo to intterpretation. Some may be broken only when needed to, but we’ll leave that to the proffessionals.

In orded for a headline to be successful, it must accomplish a few things….

  • Matching what the reader expects to see on the site from reading the headline is very important. A lot of times readers are frustrated because what they thought would return an expected result or answer to their question, becomes something not at all what they were expecting. This connection between the headline, user, and website, is probably the most important.
  • Sell your headline to the reader. if the reader is not at all interested or satisfied, they will not be inclined to venture further into the site.
  • Take advantage of search engines. Search engines are so popular now that it’s important to make sure your website gets the most “bang out of your buck”.

Looking further into headlines, I found a site showcasing some examples of good headlines.

http://www.1stwebdesigner.com/inspiration/20-great-headline-copy/

seven

http://danjoedesign.com/

The Website I chose is a portfolio website that showcases the work of graphic designer, Joe Nyaggah. I first came across this site because of my love of owls and fancy the illustration style of the owl. However, when looking further into the html and CSS, there were things that I thought were interesting, such as the navigation. Overall it’s a very clean website that strays away from extra drop-shadows and textures.
Wireframe/Layout

The wireframe is divided into four simple sections, the header, footer, navigation, and content. The body is divided into two main divisions (“page” and “footer”).  The page division holds most of the website’s information for the homepage. Within the “page” division, there are three nested divisions called “header”, “sidebar”, “content”. The “header” holds some minor information such as the home link and page number.  The “sidebar” contains the navigation, a search bar, and an advertisement for the website. The “content” holds the main picture for the home page. There are a total of nine divisions in the site. For some visual effects, Javascript is contained in the body. The width of the actual webpage is 1035px with a margin of zero. The background for the page is a repeatable element that is very simple. Simple is efficient!

Navigation

After looking into the navigation, I found that there was no image replacement techniques used when looking at the numbered links. The only images used were directly above the navigation and that’s for the ribbon with the RSS feed icon placed inside.  The developer of the site simply used CSS and HTML to create his non- image based navigation.  The manipulation of text placement and font size allowed for the exclusion of an image based navigation. The font-family that is used to create the navigation is Helvetica,Arial,Geneva,sans-serif.

Content

The content in this case is just an image of the owl illustration, which was saved as a png because it had some levels of transparency. However, I could imagine that with this particular layout, there would be no problems with having more textual content as long as the user doesn’t have to scroll very far from the navigation.

CSS

There are actually three linked style sheets called style.css, calendar.css, and cforms.css. The calendar and cforms style sheets don’t have anything to do with the styling of the home page from what I can tell. However, they seem to indicate that they may have something to do with the Javascript that is used for this website.

 

 

 

 

 

 

 

 

 

POST 6

After our presentations and taking into consideration all the feedback I had received, I changed my statistic so I could have a more solid standpoint on the issue. My new statistic is “about 50% of marriages end up in divorce”.

With this statistic, I can then split up the content into four sections that discus the reasons for divorce, cohabitation increases divorce rates, couples of the same religion have higher success rates, and waiting until later in life yields a more successful marriage.

Most of the websites that have to do with this topic are jam packed with information that is not very appealing. I found myself skimming to find something that was relevant or interesting. Also, none of these sites has well-organized appealing grids. I intend for my website to have a cleaner look about it and make it feel less constricted. My color palette will be quite limited, and hopefully this will contribute to the spacious quality that I’m looking to achieve.

Arcade Creative

This website uses a minimal color palette and well organized grids to make this home page seem very spacious. I think what I liked about most on this website was that there wasn’t much scrolling involved . Nothing on this page is fancy.

It is just well-designed. Even when looking at the navigation bar, it’s very straight forward and to the point. When thinking about this design and how it could benefit my website, I think about how this design would be useful for more image heavy content. Although this design doesn’t take into account much scrolling, more content could be added so that the designer end up with having a nice compromise between the two. Not that many bells and whistles to this page, but it sure is pleasing to look at.

Forever Heavy

This website is very different from the previous however, it does have the same clean tendencies. Its color palette doesn’t stray off to far from the tints of blues and only few hints of orange and brown are used in the illustrations and some accents around the page. What interests me most about this site is the header that is combined with the navigation. For this website it works well because it is not image heavy and rather content heavy.  However, Seeing the same header/nav on every page gets annoying because there isn’t much variety in imagery.

Helen & Hard

Helen and Hard’s website provides the compromise between image and content. While utilizing a clean, simple, and horizontal navigation, it allows for more space to be dedicated to imagery right below the navigation. Also, the proportions allow the user to see some of the content as as indication to scroll down to view more. This website and arcade creative both share similar color palettes and clean lines, which I’m very much drawn to. I will most likely implement a color scheme something similar to that of this website, but I may add an additional color or two.

Between Helen & Hard and Arcade Creative, I think that my design will be inspired by these horizontal navigations and spacious designs. These designs offer the happy medium between imagery and content.

Post 5: Single Page Websites

The idea of single-page websites is a wonderful way to convey smaller amounts of information. These layouts may seem rather unusual compared to multi-page websites, however single-page sites have the upper hand on aesthetics. It’s interactive and pleasing to go. When browsing through one of these well designed sites, the user may find themselves going through more information than they typically would on a regular website.  This is the ultimate goal! Keep the user interested and win them over. This way of designing websites is best suited for smaller amounts of information, otherwise the user may be forced to scroll over large amounts or may forced to view large amounts of clutter.  When not designed well, these sites can become annoying and a complete turn-off.

The Visually Pleasing, Fully Functioning, Designed, Website

http://www.moaa.co.nz/

MOAA architects site is well designed and thought out. From the color scheme to the functionality of the website, I’d have to say this webpage is well thought out.  When first visiting the webpage, the user is greeted with a vertical navigation that is divided into five sections. When hovering over these sections, the section name is replaced with words that describe the section.

Once the user clicks on the section, the section expands below showing picture content. Additionally, the user can hover over the content to see what sub-section is named.  After clicking the sub-section, the page expands and reveals the content. An added bonus to these fully revealed sections is that the beginning sub-section remains just below so the user can navigate to another topic within the sub-section.

Also, a collapse button is featured so that the user can quickly return to the beginning navigation menu, and choose another section of the site.

The Confusing, Dysfunctional, Crappy Website

http://www.designedbydave.ca/

Designed by Dave is a site that doesn’t utilize important and key techniques in web design. The biggest qualm that I have with this site is its lack of organization. Which as we all know, is the most important part in design. The website maybe aesthetically pleasing to some, its lack of organization and functionality make this website a poor model for single page websites. When first visiting this page, the user is greeted with large text greeting that goes through some more slides of large text introducing Dave, the designer of the page. The page is divided in five sections that start from the mid-top of the page to the bottom. Right underneath the greeting is a section called work. It is here where the content is placed in a three-column by three-row grid. There is no indication that there maybe more sections down below, which is a major flaw in the design of the website. The whole point of single page website is that they are easily navigated and organized very well. This site doesn’t seem to accomplish either of those key techniques in web design. The user must scroll all the way to the bottom to see all of the content. This is an annoyance, but what is more annoying is that once the user reaches the bottom, there is no way to get back to the top of the webpage except by scrolling. All in all, this site is by no means a role model for the successful single page websites.

The Amazing, Beegie Adair

http://www.beegieadair.com/music.php

For exercise five I am choosing a jazz inspired pianist for my band.  I would like to redesign her website. Her current page utilizes a horizontal navigation and is divided into 10 sections, which is quite plain. The color scheme is not something I’m in love with, but I can sort of understand what the designer is going for. The site is either one box or sometimes an additional skinnier column on the left for additional navigation in the section about her music. I think this webpage may benefit from a single page website due to the functionality with interactive tendencies single page sites have. This site is consistent and organized, but I think it lacks design. The content isn’t over bearing and this site could use a definitely use a face-lift.