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 …

Wireframes for Websites

Posted: Wednesday, November 2nd, 2011 by | Filed under: , ,

Once your web design firm completes the information architecture step in the creative design process, you may move on to the next key step: developing wireframes.  A wireframe is helpful is defining what types of technology will be used and which messaging with be displayed on what pages. Although the wireframe doesn’t show creative, colors or and imagery or graphics, it does depict and lay out where content and photographs will be.

 

This step in the process is sometimes called the skeleton. Since there isn’t any colors or images displayed in this step of the web design, the creative design process is still taken place. The wireframes outline content placement areas and core features of the website, such as the masthead, core messaging, content, footer, call-to-actions, side bars utility links, information above and below the fold and more.

  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 …

HTML5 Website Design

Posted: Saturday, September 10th, 2011 by | Filed under: , ,

Any web designer or web developer should have heard about the latest HTML updates, HTML5. HTML5 is the latest form of HTML and will be used across Internet browsers to turn WebPages into readable WebPages for the end user. HTML is constantly being updated to format the latest technology, but HTML5 will be the latest form to created HTML code in. Although it won’t be finalized for years, web designers have already started creating new code from it.

Although HTML5 isn’t finalized and will continue to change before it’s official, many web designers are wondering is they really need to care (or even learn) about HTML5. The answer is yes. HTML5 promises a better web experience across all devices: Smartphones (Android, iPhone), computers and the latest tablets and netbooks. Smartphones have been growing in the number of users accessing the internet and it’s important that devices are able to display WebPages of choice.

Many earlier versions of HTML have limitations for multimedia content. HTML5 will provide an alternative to plugins (such as Flash) in order to add music, video and other multimedia content to websites. Since top web browsers like Google Chrome, Mozilla Firefox, Safari and Opera will support (some already do) the latest features of HTML5, it’s inevitable it will takeover HTML4. 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 …