with Lorelle and Brent VanFossen

Our Website Design

By Lorelle VanFossen | Published July 3, 2005
DESIGNERS MUST SEE THIS!
If you are considering designing a web page, or if you have ever designed a web page, check out this wonderful series on the evolution of a website from Webreference. You will learn more about what it takes to create, maintain, and establish a successful web page than you will ever get out of a book. Totally brilliant!

As a long time graphic designer and having worked in the advertising and related marketing industries since I was 16, tackling web page design was a natural step. I’ve designed many web pages, some winning honor and recognition. As the first nature photographer with a regular column on a webzine, I’ve had my hands in quite a few “webs”.

Site History

Taking Your Camera on the Road has had a long history. It began as one of the first personal websites on the World Wide Web in 1994 as Compuserve started offering websites to users. Having been on the Internet in one form or another for many years, it was only natural to expand into this new “Internet billboard” venue.

Soon I was designing sites for others and heading up projects for websites for several non-profit organizations. In 1996, I gave up the majority of that work to hit the road full-time with my husband, creating what would eventually become one of the earliest “weblogs” which we called “Journal Thoughts”. Stories of our adventures on the road were put out by email and on our website. Soon the list of email recipients became to large and in 2001 we began posting them solely on our website.

Our domain name changed from vanfossenpro.com to a better title of cameraontheroad.com took place in 2004 after much too long of a debate and research.

In 2003, after two years of movement in that direction, we officially converted our site to be even more accessible through the use of CSS stylesheets. NO MORE TABLES. That’s right. We took the leap and now all of our layout is table-free, except where tables are appropriate such as providing a chart of numerical or text information, like a spreadsheet. As much work as it was to convert the entire site, it is now easier than ever to make formating changes to the pages, and they load even faster than before.

In 2004, with such a vast amount of resources in web pages, images, and content to manage, we switched the entire static HTML site over to WordPress, a very popular weblog tool that we’ve manipulated into a Content Management System (CMS). It is now MUCH easier to maintain our site and add content even faster.

In making these changes, we’ve also received validation and website awards from a variety of sources that prove our pages are designed with accessibility in mind (for disabled and physically challenged folks) and pass inspection with the HTML inspectors out there. We’ve also passed the PIC Platform for Internet Content Selection) validation which ranks documents for content, such as age-sensitive material. We’ve been validated and rated as totally safe for parents to allow their children to view our pages. YEAH!

Validation Certification

Validation for web page design is serious stuff. It is an honor to get the high score that tells the world that we’ve accomplished something in return for all those long hours of problem-solving, overcoming technical and mental challenges, and the sore eyes, back, and butt that comes with the physical investment of time and energy to create accessible and viable web pages. Here are some of our “awards”.

Valid HTML 4.01!World Wide Web ConsortiumBobby World Wide ApprovedBobby WorldWide Approved 508Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Best Viewed With Any Browser CampaignViewable with LynxBackwards Compatible with Old BrowsersICRA - Internet Content Rating Association Approved

Site Statistics

As of October 2003, this website hosted 428 web pages, 88 javascripts, 4,125 graphics and images, and over 1500 links to external websites. As of July, 2005, it now has over 700 web page articles, over 5,000 graphics and images, and about 3,000 external links. That’s a lot to manage.

Management of all this is made much easier through the use of WordPress.

The average number of unique visitors to our site averages about 22,000 a month. We get an average of 500,000 hits a month, though many of those are from search bots.

While the majority of our visitors are from the United States or using English based operating systems and software, over 20% of our visitors are from non-English speaking countries. People visiting our site are mostly equally divided between those seeking information about photography and web page design.

Web Design Directory

We write a lot about web page design and development, mostly sharing our own experiences and expertise. For information on the various topics we write about concerning web design and the Internet, check out these categories:

For information specific to our web page design:

HTML Instruction

Hyper Text Markup Language (HTML) is the code behind the visual presentation of a web page. Created in the 1980s, this “universal language” talks to Internet Browser software giving instructions on how the page should look. In 2004, we moved up to the “modern” HTML to XHTML. Here are some links to help you better understand how HMTL works:

Cascading Style Sheets

A well designed web page consists of two “pages”. The structural page called “HTML” and the presentation style called “CSS” (Cascading Style Sheets). While the html pages hold the content of the page, the CSS holds the coding controls the size, style, and color of fonts, design elements on boxes and other graphic elements, and the page’s design overall. Here are some sites to help create CSS for your website:

Grahpics

JavaScript

Javascripts are “programs” that function on web pages. They come in all shapes and sizes and help the web designer create interactive web pages, and they help the user get more information, fun, and control as they browse. We rarely use Javascript in our pages today, having many of these features replaced by PHP scripts. But these still are extremely helpful. If you would like to use Javascripts in WordPress, we have an article to help you out.

Web Design for Accessibility

If you are designing a web page or work with web page designers, please insist on making web pages accessible for everyone. Simple steps include labeling all graphic images in a way that describes them instead of using a vague caption, and putting a “title” tag in every link which describes the link, and making sure that all of the tag definitions, the text that defines a tag such as font size=”+2″ go into quote marks, whether needed or not. This helps text readers define what is readable and what is not. Incorporating these easy changes allows screen reading software to describe what is on the screen and to not just read the coding as “link here http://www.something.long. and/undescribe/able”. More than 25% of internet and web users are physically and visually challenged, and the number is growing as software becomes more available and reasonably priced. If one in four of your customers had specific needs, wouldn’t you want to meet them?

You can learn about our accessibility policy on our Accessibility Policy.

Web Design Elements

It’s the details that make a page interesting. Here are some sites dealing with a few of those design details:

Designed with help from the W3C organization HTML 4.0

Graphic Programs

The magic of web pages comes from the graphics and here are a few of the programs we enjoy using to create our pages:

Our Web Page Design Credits

In college, my professor in Advertising told me that there was no such thing as a new idea, just new ways of using old ideas. After 25 years in the business, I have to agree with them. We all get our inspiration from somewhere and here here are some of the resources for the inspiration that created these pages:

  • WordPress: We’ve turned this weblog software into a Content Management System (CMS) and we love it. It is easy to use and very powerful, allowing us to do so MUCH more with our website.
  • WordPress Plugins: We use a lot of WordPress Plugins on our site and are externally grateful to the volunteers who create these wonderful extensions to WordPress.
  • Javascript Maker: While we don’t use this any more, having this technique replaced with WordPress and PHP, we still recommend this software. From Byte-Size Software, we use this wonderful software to take redundant text and code within our pages and create javascript “text” from it. For example, all the text, links, and the photograph at the bottom of every page comes from one script file that “writes” the code for that section on every page. If I need to make a change to the content, I can change the script file and not all 400+ pages on our site. It’s a sweet and easy to use program.
  • BladePro: a great plug-in for PaintShop Pro that creates instant wonderful graphic effects on text or anything else.
  • Paint Shop Pro by Jasc: PhotoShop is good but we keep using Paint Shop Pro. Check out their unique BROWSE feature for thumbnail preview images.
  • No Right Click on Images: After ages of fighting the paranoia that comes with displaying images on websites (theft and copyright violations), I found this great javascript from Dynamic Drive Javascripts that allows the user to easily right-click all over our pages but NOT right-click on our images. Excellent!!
  • WordPerfect: If you are into power writing or publishing, nothing can beat WordPerfect.

Other Resources

Help and resources for business, life, and writing

Special Thanks

Everyone works at their own pace and with their own beat. These artists helped Lorelle find her own rhythmn as she wrote.

Software We Use

Favorite Games for the down-time on the road

We all need some time wasters to get through our life on the computer and on the road. Here are a few of ours.

This article was posted in About and tagged , , , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.