John Pape Online Blog

Project Description

This is a website for an author who is self-publishing his book.  He needed a website to help promote and sell the book.  The book is written by Tim W. Turner.  The web site is a place where visitors can learn the book and other item available as well as request Author Visits

Design Process

For this project I got an advanced copy of the book in PDF format.  By browsing through the book I was able to get an understanding of the content as well as the general look and feel of the book.   I was able to design the layout using graphic elements and page layouts to develop the basic web layout.  I was also in communication with the client to get information regarding what they wanted to website to do.

Graphic Design

A logo was provided by the client.  It is basically a question mark.  It was important to include this in the design.

The next point of action was to create an effective web layout that was clean and easy to navigate.  From here Photoshop and Illustrator was opened and began to create the basic layout. Several ideas were created and the best solution was selected.

Building the Site

One the design was approved it was time to built out the site.  For the images, I spliced the Photoshop image to get the header, footer, navigation and page background images.  Using CSS I put together the page elements and place each image as a background for each area.

• Home Page
• About the Author
• Authors Visits
• Questions Stuff (Ordering)
• Contact the Author
• Site Map
• Privacy Policy
• Terms of Use

Because the site has under 20 pages it was build on a static rather than a dynamic platform. A site with under 20 pages can be easily managed without a CMS. However as the site grows it can be converted to a dynamic site that utilizes some kind of CMS.  PHP was used for the form submissions and JQuery was used for form validation.  Once all the pages were created and link through the Navigation system it was time to upload and test the site.

For common elements like the header, footer and navigation.  I stripped the HTML code and created separate files that can be included using PHP.  The primary reason for doing this is the ease of maintenance.  By including the files there is only one file to change or edit rather than going through all the pages.  Make life easier.

The client wanted to have scrolling review and testimonials this was accomplished by using  jQuery. This made for quick and easy implementation of the scrolling function.

You can visit this site at http://www.questionsthebook.com/ to learn more about this organization.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for E-commerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire John Pape Web Designer For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com – 619-593-9483

Technorati Tags: css, jquery, Photoshop, PHP, usability, Web Design, Web Development

In this article I am going to explore two area in web development.  The first is the concept of “Usability“.  The next idea will be “Accessibility“

In the world of web development usability is a major issue.  By usability I am talking about testing websites to make sure that the visitor can quickly, easily and simply navigate a website.  This makes the user experience better.

The idea of Accessibility goes even further than usability in that its goal is to allow access for all people.

A little history

Nearly 1 out 5 individuals in America have some level of disability.  This translate to about 30 million people.  As the population grows older this number is expected to increase as there will be more and more senior citizens.  Do you know that in the past 10 years there was an increase of 25%.  Unfortunately, with age come physical changes.  Some of these can limit a persons ability to do things.  But keep in mind this is not the only segment of the population that suffers disabilities.  And there needs need to be met.

Making the Internet Accessible

The Internet has become an integral part our everyday lifestyle.  It allows us to do things unheard of a decade ago.  The web offers us ways to communicate.  We can obtain information on nearly every subject under the sun and beyond.  We now have social online gatherings.  The opportunities abound will limitless ways to engage cultural activities.  The list could go on.  But the sad reality is that the disabled are sometimes excluded from totally experiencing these benefits.  However there is hope in providing for standard of accessibility that will help these individuals.

Ways to Improve Accessibility

Here is a list of ideas from the Web Content Web Content Accessibility Guidelines 1.0 that was created by the Web Accessibility Initiative of W3C.  These are way to increase the accessibility of web content.

1. Provide alternatives to audio-visual content

Not all people will be able to use different kinds of content. These people may be disabled or may have a lower version of Internet browsers. Movies, sound clips, animations and other contents should be translated into text alternatives so as to provide information to the broadest range of viewers.

2. Developers shouldn’t rely on color alone

Many people are impaired in color differentiation. Developers shouldn’t rely too much on the use of colors to relay information in the websites. Charts that are color-coded should be modified and the background and foreground colors of the websites should have enough contrast to enable people with color differentiation impairment to easily navigate the site.

3. Clarification of the use of natural language

Content developers usually mark up the changes in natural language in their websites. They should be able to identify the dominant language that is used in the site so as to avoid confusion.

4. Control of content changes that are time-sensitive

This issue particularly involves people who have visual or cognitive impairments and those who are not able to read texts that are moving quickly. Movement is seen as an over-all enhancer to the look of the site, but it may pose some problems to people with cognitive impairments.

5. Accessibility of user interfaces that are embedded

Objects that posses their own interfaces should be made accessible, and alternative solutions must be provided if this is not possible.

6. Provision of orientation and context information

The provision of information on how the objects are organized is important to provide people with guidance on how to access information.

This is by no means a comprehensive list but they are some practical tips to make a website more usable.  Careful consideration needs to be taken to make sure that Accessibility is included in the design process and that viable alternatives be provided.

Benefits

There are many benefits to improving accessibility of websites.  These benefit not only help those with disabilities but also improve the entire web community.  Businesses, Service Companies, Organizations and you as well will benefit.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

Technorati Tags: accessibility, information technology, usability, Web Design

Design is one of the defining element that attract Internet user to your a site.  A major deterrent that keeps someone for staying on a site is the lack of appealing graphics.  The challenge for a Web Designer is the create a site that not only is attractive to the user but to keep them interested as well

Just putting graphics on a website isn’t the only factor to consider.  Graphic must be used correctly.  If the graphic cause the user to turn away because they are just plain bad or they are overwhelmed that’s not good at all.

It is important to have an attractive design.  It it the choice of design that needs consideration.  And the main consideration to be concerned with the the final user.  A successful design that is attractive and functional is one that reached its goal.

Graphic on the Web is considered of of the element of multimedia.  When using several design elements like text, sound, animation and graphics your goal is to really a message to the user.  When using multimedia in a web site it is vital that it is integral to the content.  It must reinforce and support the message of the page content.

Using graphic can increase learning in a positive way.  That is only if the image is being used properly.   The concept is to remove all barriers to communication and increase understanding.

To help illustrate this point I’ve put together this short list of things to consider when using graphics on your website.

1. Make sure have to have the graphic

Don’t add a graphic for the sake of having a graphic.  Make sure it serves a positive function to the content.  It is easy to overuse graphics on a page.  The real down side is that large unnecessary graphic slow down page load time.  Remember time is important to your user.  All graphic therefore must support the message and have relevance to its meaning.

2. Repetitiveness

Repeating a message or concept over and over increases retention.   This can be true of graphic elements as well.  A logo used consistently on your site will increase brand identity.   Button with similar graphic elements are useful in usability.

3. Keep it Consistent

Keep thing it their place.  If your logo is located at the top left it needs to be there at the same place on each and every page.  The same with your navigation graphics.  Don’t move things around this will confuse and frustrate your user.  The same goes with the use of color.  Find a theme and stick to it.

4. Media Loading Priority

As a page loads certain elements get loaded as the browser loads the page.  Try to have the markup done is such a way as to load text before graphics.   This will help the user know if the information is pertinent to there quest for information.

5. Page Loading

Keep in mind that graphics load much slower than text.   The goal is less than 5 seconds.  The maximum amount of time should be no more than 15 seconds.   Also, with more people using High Speed Connections this frees you to add more multimedia to your site.  Just make sure that your target users is up to speed.

6. Optimize Speed

Images need to processed to optimize speed.  The web world is much more different than the print world.  In the print world Hi-Res images are the standard.  However Hi-Res does not work on the web.   By optimizing the image you will save time for your visitors.  Here are some thing to consider when optimizing for speed.

• Make the graphic size a small as possible. Don’t use the browser to resize
• Decrease image resolution.  If your image is 600dpi you must reduce it to 72dpi
• Limit the colors that will be used for the images.
• Limit the use of animation in the graphic.

In web design there can be a conflict between total control of the look of the page and the needs allowed by the user.  This is the great balance of design.  A good design accomplishes both ends.  It take a lot of effort to create an attractive and effective web site.  By following the guidelines here the results will be better.   But first is to satisfy the user above anything else.

Need A Web Site?

Custom Web Design for Small Businesses by professional and experienced web designer and developer.

Here is what I can do for you…

• Innovative Web Design
• Graphic Design Logos
• Maintain Your Website
• Data Driven Content
• Flash Applications
• Build Shopping Carts for Ecommerce
• Custom PHP Applications and Programming
• WordPress Installation & Customization

Get an affordable, attractive great website today. Hire Me For Your Web Design Solution. View my portfolio at http://portfolio.mediatunes.com

Technorati Tags: design, graphics, usability