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 …

Downside of Flash Site Design

Posted: Thursday, September 15th, 2011 by | Filed under: , ,

Flash websites can be very powerful when delivering a visual. Unfortunately, the effects of Flash stop there. From a graphic web design standpoint, Flash is attractive, fun and animated, but is it helping your website? Most likely not.

There are been a number of outstanding problems with Flash, including it’s compatibility with search engines. The internet overall is about text, and Flash doesn’t handle text very well. For whatever text may be included in your Flash (SEO keyword rich or not), most search engines won’t be able to index it anyway. Without an indexed website, your pages will never be found. Web designers can’t stress enough, the importance of content and copy on your website. Flash based websites usually wipeout the option of creating a content-rich website.

Aside from being buried among the millions and millions of other websites, once your page is found it’s not uncommon for it to take an extra few seconds to load. These seconds are worth a lot in the internet search world. Flash development usually takes much longer to load than HTML websites. Users (and potential customers) don’t like to wait. The longer your Flash takes to load, the more risk you take in losing customers.

Typical web design features aren’t included in Flash, making your website less user-friendly. Since Flash is typically all about the presentation, web usability goes out the window. Your typical navigation, contact information and other important pages aren’t in the standard position, making your user look longer for what they’re searching for. Another few worthy seconds you’re losing. Read more …

What is HTML5?

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

Just as you probably guessed, HTML5 is the next evolution of HTML, or Hyper Text Markup Language. Most websites are designed and are created using HTML code, which turns plain text into readable WebPages you can navigate through. The last form of HTML, which was HTML4 was released in 1997 and has been tweaked here and there with the upgrades of the Internet overall. The goal of HTML5 is to improve the code to be able to support the latest multimedia, but still following the code for technology devices to read and understand. Web designers and web developers should learn about the new HTML because it will soon take over the current HTML4.

HTML5 will add a number of features to the functionality of HTML that HTML4 is not compatible with. Many platforms require plugin functionality that HTML4 cannot support, such as Flash. The iPhone and iPad don’t support Flash right now, which becomes problematic for users.

Two major features of HTML5 are media playback and storage offline. It’s common that web designers have to look to Flash for showing videos or playing music. HTML5 will allow sites to embed codes with simple tags that will automatically play the media your website needs. You can now insert images; audio and video directly into any document and easily manipulate them through the coding. The second aspect and new addition to HTML is the idea of being able to create files or draft emails without Internet connection and have them automatically sync next time you’re connected to 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 …