Most people who use Excel (other spreadsheets available.. just not as good) for a living will have gotten used to hitting the return key on their keyboard to go to the next row down in their sheet. On a website this is obviously has a different action. In fact it’s immensely frustrating when you hit return and accidentally submit a form then have to press the back button and hope your browser has cached your input values. I just wrote a few lines of jQuery which you can drop into your site head section or JS include which will pick up your input fields when encapsulated in a span with an ID of step_X (where X is the step number). Also I have defined an end point so you can break your page into several sections of form. Just add ‘last_step’ as a class to the encapsulating span.
Archive for the ‘Usability’ category
I recently had a conversation with someone who had decided to come to WordPress to take advantage of a plugin or two and wanted to know how to get an existing site into the correct theme structure as required. It took a lengthy email or two to explain but it struck me that lots of people must be asking the same questions over and over. So in this post i shall try to explain how to get a theme together, or rather where to start
So… first, a bit of logic
Logically speaking a standard layout web page can be split into four distinct areas as follows:
And as such WordPress uses different theme files to render the appropriate sections. We need to split our HTML page into those different files. There are, however, lines of code that WordPress needs you to put into each of these files and so tbe best way todo this without missing anything is to recycle another theme. So… go to your WordPress install and visit /wp-content/themes/ and…
- Duplicate the directory called ‘default‘
- Open style.css in a text editor and edit the name of the theme and any other information you feel like
- Either remove or replace screenshot.jpg from the theme directory so it looks different in the theme menu
That’s it, you now have a skeleton to work from and it’s time to make it look like your site. Let’s assume you have a simple brochureware site and, therefore, don’t need any blog type pages. Largely these sites have a standard consistent layout on each page (often except the home page but that difference is for another tutorial) and WordPress uses this consistency to slot in the appropriate information for each page. We do this by…
- Choose a short yet typical page from your site and view the HTML source
- Open 4 separate text files from the new theme directory in your favourite text editor. They are: header.php, footer.php, sidebar.php and page.php
- From the HTML source take the top section of code (usually as far as the content and sidebar code inclusive of a menu assuming you are using a top horizontal bar navigation) and place it into header.php making sure to preserve the obvious dynamic sections of code (anything between <?php and ?> can be assumed to be dynamic)
- Do the same with the footer into footer.php (the section below the content and sidebar that often contains SEO links and copyright notices)
- The remaining block should contain the content and sidebar code… simply cut out the sidebar code into sidebar.php
- Finally split the content code into the bit before the text and the bit after the text (ie: layout code stripping out the text itself). Then paste these sections around the ‘while’ loop within page.php.
- (optional) copy your stylesheet into style.css making sure to preserve the comment at the top of the file as this is used by WordPress to define the theme and without which will not pick up any of the code.
Step 6 will likely be the most difficult to do as there are three or four important lines of PHP code in there. Firstly the line that reads <?php get_header(); ?> is the code that calls header.php. Likewise <?php get_footer(); ?> and <?php get_sidebar(); ?> call their appropriate namesakes. Make sure that they are in the correct logical positions for the page to render in the right order.
The hardest section is what is called ‘the loop’ by WordPress bods. This is the section of code that shows the post(s) from the database relative to the page you are looking at. The Loop often falls into the following form:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <div> <?php the_content('<p>Read the rest of this page »</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> </div> <?php endwhile; endif; ?>
You shouldn’t really need to change any of the code itself but you might need to edit the encapsulating HTML to make your styles fit in. For example if your page titles are not in H2 tags then you need to change it to suit etc etc…
This will always be a case of trial and error until you know what you are doing so don’t worry if it all goes pear shaped. That’s what the undo button is for!
To test that your theme is working properly then you need to visit your sites back end at /wp-admin and click the link on the left hand side called ‘appearance‘. The themes page will appear and to activate your theme you simply find it in the list and click ‘activate’. Then view the front end of the site and see what it looks like.
At this stage you might be confused because the home page looks different to the rest of the site. This is because, by default, WordPress uses the index.php file from your theme directory to generate the home page. To change this visit the settings -> reading page from the left menu and use the dropdown box to choose an appropriate page to be used for the home page.
Ok so your theme looks like it did before you spent hours making the them for the WordPress site… why on earth are we using WordPress at all you ask! Well if you were to create a new page for your old site then you would have to duplicate an HTML file, trawl through code (or look at Dreamweaver or another WYSIWYG) to find the sections to replace before uploading to your site and updating the links in the various menus as appropriate. With WordPress you just add a ‘page‘ using the nice admin system and it’s all done for you.
I always tell my clients to go and have a look at the WordPress plugins directory for ideas and things to ad to their site. A word of warning though, some plugins conflict with others and too many plugins might slow your site down considerably. Over time you will get used to a core few you know and trust.
Feel free to ask me any questions about WordPress, PHP or other and hopefully I will be able to help you decide what’s the best direction for your site to take. Expect a lecture about how good WordPress is though!
I have been thinking a great deal recently about the work I do and how much of it is purely functional before someone else goes away and ruins it with their bad design choices. I attended ThinkVisibility 2 last September and it was a real eye opener with regard to the talks I was subjected to. One was to do with eye tracking and we were shown an example of a number of users’ browsing patterns for different sites. I never realised how predictable users can be with the way they look at some sites.
However, one of the sites we were shown was Amazon and it shows the users having trouble getting around. I have to ask myself exactly how on earth Amazon makes money at all when people are obviously struggling to find what they want, or worse, find what they want but can’t work out how to pay for the thing!
I have started looking at websites in a new light now and often refuse to buy anything from a site that I deem to be unworthy of my custom. It sounds a little bit odd for me to say that but I honestly do think twice about getting out my wallet if it takes me longer than I want to spend finding the items in the first place.
I would almost be inclined to start a black list of sites that, in my opinion, were badly designed but before long it would be unmaintainable
What, however, I will do is comment on a few sites that I do get along with and tell you why…
I was introduced to Google in 2001 when I was at college and my lecturers suggested they use it because of the distinct lack of advertising. This, of course, has now changed and Google has a colossal advertising network. Let me ask you this though… does it get in the way of your browsing? I say no it doesn’t and the clean cut and fast interface they provide is exactly what I want to see.
#2 eBay & Paypal
I have been using eBay and Paypal for years as I am sure most of Europe and the US have been as well. I find the interface on eBay inkeeping with the ‘fun’ theme of the dutch auction and the clean lines of Paypal when you come to actually hand over your money a refreshing contrast. Would you really want to hand over your card details on a site that looks like a child has written it? eBay offers a good and intuitive search functionality but also excellent browsing and viewing product pages.
I may be criticised for saying this but I think that apple also have the right idea with regard to their site design. Design, of course, is something that Apple have grown up with and have continued to excel at through the ages. I find the homepage to be a no nonsense view of what they want you to see (which at the moment is the new iPad (a big iPod in my opinion.. not a great deal of product design elaboration there!)). The shop is non contentional but you always manage to find your product and get it into your shopping cart with no problems.
I don’t use the search engine at all to be honest as I am firmly a Google man (stubborn really if anything else) however, one has to appreciate the front page of Bing. Instead of going the Google route and showing nothing or the Yahoo route and showing everything they have shown interesting bits of information about random things. The picture in the background changes frequently (much like Googles header image) and the hotspots on the image give interesting information about the scene and it’s contents. I like this method of not being forced to swallow news (or worse, wait for it to load!) that I don’t want to see but providing me with an interesting picture with the opportunity to easily get more information. Well done Microsoft on your first half decent search engine page!
The list could go on and on but I have things to do. Please do feel free to add your own likes and dislikes to my list. The point was to highlight the fact that design and placement of a website is often not as important to some people as it should be. These examples are sites whom I think have done it properly. Copying them is not the best thing to do at all but use them as an inspiration to guide you in making the right decisions for your own homepages.