Blog
Archive for ‘Web Design’
A Redefined Website
I’ve spent many many hours (lumped as best as I could into one very solid week) rewriting my entire website into WordPress. I’ve been creating almost all of my client sites these days in WordPress. They love the relative ease of it and, as I’ve grown more and more familiar with it, I appreciate it’s functionality. I also appreciate all the work many many people have given to the continued evolution of it’s core source code and all the many many plugins that make my life so much easier. In any case, after seeing all the nifty things I could do and spending many moments looking into space (yeah, I’m not just spacing out…) visualizing just how I could manipulate it to do what I wanted it to do, I decided I was ready to roll up my sleeves and dive in. There were a few requirements:
- Easy gallery management, with varying templates for types of galleries that would seamlessly replace my current gallery layout
- Fully integrated ecommerce solution
- Easier ‘sharing’ capabilities.
- All the usual perks that come with database driven websites.
- I also had the intention of paring down and focusing the site, removing what I felt was ultimately auxiliary information that detracted from the focus of the artwork.
To accomplish this I kept the general design the same, although many aspects received subtle improvements for readability and ease of use, and I focused on tweaking some main plugins and adapting my site design to the theme-based template system of WordPress. After my theme was created, with appropriate sidebars, specific page templates, some nifty jquery stuff, etc, I utilized the following plugins. Some of these have fairly poor documentation, tho I don’t fault their creators. It just takes a bit of searching and experimenting to get it to do what you want.
NextGen-Gallery by Alex Rabe for the gallery system. While I use WordPress’ media library for general blog or page images, this plugin is essential for creating an easily managed gallery system. I tweaked it in many aspects to work and display as I wanted it to, doing my best to trim extra code off along the way. I also integrated the NextGen Custom Fields plugin for extra info with some of the images. However, this, along with the templates, allows for all of the image galleries – fine art, murals, design – to function cleanly and independently of each other.
WP e-Commerce from GetShopped.com is a great plugin for ecommerce with a semi-intuitive backend. It took a bit to figure it all out but such is the nature of code. I then did my best to integrate it into the site. One nice feature it the sidebar widget shopping cart. Someone adds an item from the store, then goes and looks elesewhere on the site, and the widget gets displayed with the item in the cart. The user has the option of emptying the cart, at which point the widget disappears. So, I don’t know, buy something and let me know that it works ok.
cFormsII is just a great – and possibly the best – form management plugin. I’ve used it with many clients – even making huge fifteen page multi-part forms – and it never fails to impress me with it’s ease (although that fifteen pager got tedious). I highly recommend it. It, like most plugins, is also fairly easy to customize and tweak. Pretty soon spam comments will start flooding in because I didn’t set up the whole isHuman part, something that is essential for any blog. I used it on my old blog though and it worked perfectly.
From there, I also use the following plugins:
- All-in-One SEO pack which just works great for SEO stuff.
- WP-Minify nicely packs JS and CSS files to reduce load time
- WP-Cache also helps increase load time. This and Minify should be turned off tho if you are editing the site.
In the admin area:
- Fluency Admin – this is just a really nice admin skin. Easy to look at. Well organized.
- My Page Order – drag and drop page ordering that ought to be standard in the next version of WP
- TinyMCE Advanced - TinyMCE editor with better options, tho I still prefer just writing things in raw HTML.
- Exclude Pages – small plugin that allows you to keep pages out of the main navigation. Very useful.
I’ve yet to add a “Links” page. If i do, I’ll use My Link Order – another drag and drop ordering system. I’ve yet to go in and write descriptions for my Blog Categories. But now the site is underway.
O yeah: I also added some new paintings. Or new Old paintings. In any case – there is new work here and there on the site.
Presenting Information on the Web
To begin with, people use the internet because:
- they need information
- they want to be entertained
- they want to buy something
- they want to connect with others
When someone visits your site they need to be able to, in about four seconds or less, answer this question: Where am I? Where am I going to? How do I get there? How do I get back? If the user cannot answer this then, chances are, you have lost a potential customer/visitor/fan. So we make our navigation simple with terms that are easy to understand rather than vague "concepts". For example, on my site, I could call "Fine Art" "Mirrors" instead, because that is how I feel about them. That is all well and good but the visitor won’t get it right off the bat. So I want to make it easy – I call it Fine Art. By using more obtuse concepts in the navigation we are subjecting ourselves to the imagination of the visitor. We need to be able to step outside of our own point of view and look at our site from the eyes of a potential visitor. If you had never seen this site before, does that navigation bar actually make any sense?
This leads us to another challenge. Once we’ve determined that we at least have some fairly straightforward terms to work with, in regards to our page titles, we decide how to lay them out. Some people opt for as minimal as possible – in fact, they decide to lose the words all together and rely instead on symbols or, worse yet, all the same symbol. This symbol-speak might work well on the freeway with merging signs, etc. but as website navigation – with symbols that seem rather arbitrary to others but have meaning to you – this sort of navigation attempt ends up being vague and doesn’t help to immediately answer the visitor’s question – how do i get to where i want to go? This is known as a mystery meat navigation set-up because you never know what you are going to get. Symbols and/or vague titles that don’t directly point to where the visitor wants to go will lead to confusion and life is confusing enough without adding more confusion to the pile.
Creating a functional navigation area can be a challenge if you want to do something different. There are a lot of great navigation techniques but most of them rely on some standard functions – navigation bars and drop down menus. This is the de facto navigation technique not just of the internet but the whole computer world. I look at the top of my Mac desktop and there it is: a navigation menu – for TextEdit it is File/Edit/Format/Window/Help – very straightforward! Easy to use! If your site is straight-forward and easy to use then the message that it tells your potential customer/visitor/fan is that, chances are, YOU WILL BE TOO!
So, the challenge is that you want to stand out and be different but sometimes it’s difficult to do that without alienating your visitors. One way to stand out is, rally, to be straight-forward and easy to use. The web is filled with complicated jumbles of websites and then there are some that tell us exactly what we want to know – EASILY. The main component, however, that will make you stand out – that will bring people back time and again and the thing that people sometimes forget – is the CONTENT. Content is everything. Walk through a grocery store – lots of flashy packaging, little content. Lots of names for things that don’t seem to equate to the actual quality of the product inside. More often than not, in any Vons or Ralphs or whatever, the actual product inside is empty of actual nourishment. So a lot of fancy graphics do not mean a lot of great content. And a difficult to decipher navigation structure won’t make it easy for your visitor to access your content.
So, if you are the type who is looking for discerning visitors – ie, people who want something meaty – then you need to:
- Make your site easy to navigate
- Make the site easy on the eyes
- Provide regularly updated quality content
- Provide a readily accessed source of other related content.
Ultimately, this means some compromising on your loftier concepts around "naming things" and having flashy layouts and being pretty down to earth with the basic structure and formatting.
HTML Style Guide
So you have a website and a content management system and don’t have a clue about HTML (hypertext mark-up language). Knowing a bit of HTML will help you style your pages a little nicer. I have created, for clients, a fairly basic HTML text styling guide. it doesn’t get into the nuts and bolts of more complex styling – like how your site got to look the way it does right now anyhow but it will let you look at the source code (by clicking that little button in the editor that says "Source") and know what you are looking at.