Website Design: Why Wireframes Are Helpful

Posted: Tuesday, November 8th, 2011 by | Filed under: , ,

After your web designing company works with you on developing a sitemap, the next step in the web design process in creating the wireframes. Since you now have an organized page with the content you will be incorporating into your website, it’s important to lay it all out. Wireframes help arrange the content and give you a skeletal framework for your website design.

Wireframes

Wireframes

Wireframes give you a structure and help you specify your pages. They are simple, black and white ‘frames’ to help identify placement of content, features and navigation for your website. A masthead section is usually for your logo and below that you should have enough room for a core messaging area and a photograph. These three important areas are crucial to place above “the fold.” Similar to a newspaper’s “above the fold,” a website’s fold would be what you see before you have to start scrolling. You can insert placeholders for photos, videos or other features you want to include in your wireframes, but be sure you have your company logo, minimal copy to tell what your company does and some image to portray it. You want to have enough above the fold to draw the reader in. Read more …

Web Design and Browser Compatibility

Posted: Friday, September 16th, 2011 by | Filed under: , ,

Designing a website can be challenging and difficult for web designers since not all web browsers support every type of code. Most web designers started building websites back when Microsoft Internet Explorer completely dominated the web browser world. Ever since Mozilla Firefox began to appear, web designers had trouble designing their code to meet all standards. This resulted in websites looking differently in different web browsers.

Since Firefox, Safari and Google Chrome have all added to the competition, standards have been set for web designers to create code compatible for multiple (if not all) web browsers and the make sure their websites work. There are a few different kind of codes, which make designing a website even more difficult.

A website created or designed with HTML of XHTML will most likely work properly in most browsers. Many browsers support XHTML and should display is correctly, but web designers should always check just to make sure.

CSS support can be challenging also since not all browsers support all CSS2 standards. Most newer versions of Firefox, Internet Explorer, Safari, Google Chrome and Opera should view CSS correctly. Although not all features are implemented in each browser, most are working towards it. Read more …

Which is the Best Web Browser?

Posted: Tuesday, September 13th, 2011 by | Filed under: , ,

Internet browsers are your way to the web, where you can search for endless information. There are a few things you should look for when deciding on which web browser to use. Many internet browsers are designed differently and for different purposes. You may decide that you want to use multiple browsers, a different one for research, a different one for games, and so on and so forth.

Some evaluation may take place when reviewing the differences between internet browsers. You should feel safe when searching the internet and the more you know about the product you’re using, the better. A few things to keep in mind:

Security is a very important part of web browsing and something every user should keep in mind, web designer or not. Viruses, spyware, phishing schemes and identity theft are all things to be concerned about. Your main web browser should protect your computer (or other technology device) against viruses, pop-ups and other types of frauds that have the ability of hacking your personal information. It’s important to feel safe when browsing the internet.

Simplicity is important as well. An experienced web designer may be able to maneuver around any web browser due to the familiarity of the internet. Most users aren’t web designers so being user-friendly is important. Browser should be simple and easy for anyone to use, regardless of their knowledge of computers and the web. Anyone should feel comfortable about browsing the Internet. Read more …

Web usability tips, Part IV

Posted: Monday, July 4th, 2011 by | Filed under: , , , , , , , , ,

Below is the final portion of our study on Studio Diatribe’s web usability.

Looking at the main navigation, there are two links that are confusing to me. First, the term “Investment.” Does that mean that they are looking for investors in the company? The title could mean that. No, the page is about Pricing. Why not just call it that? That’s a universally understood term. If they think that “pricing” on a main navigation is too up-front, then I’d suggest moving it under “info” where it is still available through the drop-down. I’d also suggest “About Us” is a more friendly term for “info”. Since most people come to the site wanting to see the work, I’d suggest that the “Imagery” be broken into categories in a main navigation. I don’t have a recommendation as to how at this point but since the images are key, the visitor should have more options of navigating them other than the one “imagery” link.

Pref. Vendors? I’m sure these are reciprocal links but a main navigational item devoted to offsite links isn’t a great idea. Better to have this a sub-navigation under “about us” or a footer link. Also, the page should have some descriptive text to explain why these are important and what use they are. Read more …

Web usability tips, Part III

Posted: Friday, July 1st, 2011 by | Filed under: , , , , , , , , ,

Below are some more tips on how to improve Studio Diatribe’s web usability.

Other things that hurt SEO include the lack of search-engine-friendly URLs. Aside from this hurting SEO, it also means that there is no way to give out specific URLs for information on the site. Instead of
http://thestudiophotographers.com/?category_name=addison-park-beautiful-venues
they should be able to tell prospects that want to see photos from Addison Park to go to
thestudiophotographers.com/addison-park <http://thestudiophotographers.com/addison-park>
That is a much better and more convenient URL to give.

The handling of the photos seems to be a bit inconsistent. In some cases, there is a large photo and many thumbnails that open into lightbox images. In other cases, the visitor gets a flat list of large images to scroll through. Ideally, the visitor should be given one user interface for all the galleries so that they’re not guessing about how to interact with the work. But at least the photographs are large and detailed so that the visitor can get a good sense of their quality. Unfortunately, the layout that works for the large photographs is awful for the text on the site. Most pages fill the full width of the site with the text, creating line lengths of 140 characters or so—about double a desirable length. Further, it appears that the CSS contains a call for the font of Century Gothic, which is not a cross-platform compatible font. The 5% of visitors that see the site on the Mac will see it but those on the PC will not. In that case the default font of Arial will load. While not terrible, sites should be designed so that they don’t look considerably different to different visitors. The photographers obviously take great care to make sure that when they photograph an event, the resulting photographs look consistent. They should ask the same of their web designers. Read more …

Web usability tips, Part II

Posted: Monday, June 27th, 2011 by | Filed under: , , , , , , , , ,

Today, we will continue to identify ways for Studio Diatribes to improve its web usability.

The server that hosts the site is fast which, at least on my desktop computer, masks how slowly the site loads. I am loading the homepage on my iPhone using a 3G connection and after three minutes the site has not completed loading. This is unbearably slow and while I still see it trying to load the last of the page, I’m going to stop it from trying.

I tried to print the homepage to see if the theme has provided a print-specific CSS file and it has. The print file creates black type with a white background which is more desirable than wasting the visitor’s ink supply by printing large areas of the dark brown. That’s when I saw that the resulting print would be 72 pages. There is no reason a site—particularly a photo blog—should be this length. A text blog would at least load quickly and be relatively small in size but all these photos take up unnecessary download time.

A quick search shows that the site ranks well with a google organic search for Freehold Photographers but I couldn’t find it while searching for Millburn Photographers or Staten Island Photographers. Part of this can be attributed to the lack of keyword-rich text on their home page. What text there is does not describe the company, but rather, describes the events. I believe this is a mistake in that this approach hinders SEO. Also, in the way that the page is set up, they offer the visitor ten offsite links before they show the first photograph of the first event. That’s an invitation to leave the site when they should be trying to get people deeper into it. Read more …

Web usability tips, Part I

Posted: Friday, June 24th, 2011 by | Filed under: , , , , , , , , ,

The Studio Photographers site is built on a standard WordPress photo blog theme. WordPress is a good blogging software as it is easy to edit and post articles. There are also a number of nice photo blog themes that are available. Unfortunately, this one is problematic, and this week’s post offers various ways in which the Studio Photographers website can improve its web usability.

First of all, there’s the length. If printed, the homepage would require 72 pages to print. This is too much content for any page and particularly for the homepage. While the photography is beautiful, all that I can hope to do is scroll down quickly to glean a bit of what is there. There is simply too much content for me to absorb the whole. It would be better to offer fewer images that represent their different styles and allow the visitor to choose which ones he or she wants to explore. This overabundance is also problematic in the navigation for imagery/beautiful venues which contains 23 sub-level links that would extend below the user’s monitor window on a 17-inch screen. Instead of a drop-down of this length, visitors should be given a page from which to choose venues. I would imagine that most people would not know but 3 or 4 of these, so having a visual reference next to the name on the page would at least clue the visitor in as to what the venue offers.

While I think having a series of images on the homepage is a great idea, users should be able to interact with and control the sequence. If a visitor finds an image interesting, then he or she should be able to pause the slideshow and examine the photo. If they want more information, they should be able to click through to a series of similar images. Further, these images are created using Flash which means that the slideshow will not load on the iPhone or iPad. Fortunately, they do have a static image that loads if the flash does not and the site does not look broken. Still, other technologies exist to animate photographs that will work on multiple platforms and browsers. Read more …

Enhancing user experience design, Part III

Posted: Monday, June 20th, 2011 by | Filed under: , , , , , , , , ,

Below is the rest of our segment on user experience design on the Sahara Sam website.

In fact, it is the issue of “standing out” that is a concern. While I do think it is appropriate to keep a fun and playful vernacular language for a site such as this, overall, it feels like everything on the page is trying to communicate at the same level. The final effect is one that is a disjointed where everything competes with everything else. Special promotions, breaking news, navigation. The logo, animated banner and other links have very similar weights and contrast and thus create activity without creating a clear message for the user. While this may be considered the intent of the design, it is possible to retain a vernacular design while helping guide the user through the site. For example, the 360° tour is more effective at conveying a sense of the space than anything else on the site yet it contains almost no information. It is a pity that the only sense of this view is through the button below the masthead. With all else going on, it could be easily missed. Also, one note on the 360° view‚ it would be infinitely more interesting to see the place in use rather than empty. In comparing it to the Disneyland site to see how Disney promotes its parks, the one constant throughout all photographs is people. And not just documentary photographs but photographs showing a multi-age, multi-cultural mix of visitors having a great time. Even on pages like Birthday Parties, where we should be able to see smiling happy kids enjoying the time of their lives, all we see is a wall of text. All of the fun photos seem relegated to the attractions page. Where I have seen pictures, though the quality is not great. For example, compare the following from Sahara Sam and Disney (shown at actual size). Which is more inviting?

Read more …

Enhancing user design experience, Part II

Posted: Friday, June 17th, 2011 by | Filed under: , , , , , , , , ,

Welcome to the second part of our study on the user experience design of saharasams.com.

The split navigation is a bit confusing. Similar items should be treated in a similar manner so I would expect that if there are two systems of navigation, each would correspond to a particular function. Perhaps the upper navigation contains general links while the left navigation contains specific attractions but this is not the case. Admissions & Hours and At the Park make sense to be grouped together but Groups would seem to be better organized near Birthday Parties or Corporate login since these will appeal to different user groups.

The main area of the site is appropriately reserved for rotating promotional messaging. Users can navigate through the various promotions. However, the promotions cycle through only once leaving the visitor with only the World’s Tallest Ropes course promotion visible after a while. While the promotions are bold, the calls to action on them are inconsistent. It is also odd that the rotating promotions would use flash instead of javascript or css since a similar affect to be achieved while allowing for the page to be edited through a CMS (content management system). Read more …

Enhancing user experience design, Part I

Posted: Monday, June 13th, 2011 by | Filed under: , , , , , , , , ,

In today’s blog, we will discuss tips on how to improve user experience design by using Sahara Sam’s site as a case study.

In checking out the Sahara Sam’s site, I see that the performance for search terms of water park NJ and the like is actually pretty good despite much of the site using Flash and minimal text on the page for the search engines to read. A plus for the site is the ability to load optional graphics when browsers don’t support Flash. This is key on the homepage where the top navigation, left navigation, main image and lower banner are all in Flash. But having main navigation in Flash can limit a search engine’s ability to catalog the site, which also limits SEO, especially when you can achieve similar results with other types of programming. Plus, adding or deleting pages from the site can be difficult and expensive since it means that the Flash files may need to be recoded each and every time.

The most notable prominent omission from the masthead is a telephone number and direct link for a map. These are most likely the most important points of contact for visitors—by calling or by stepping into the facility. Read more …