Blogging for Business, Resources, Wordpress
The design of your website goes a long way to getting your readers to stick around longer, browse more pages, and return more often. Readability and accessibility can be key in converting readers to customers. So why do so many sites defy simple principles of solid web design?
They don’t know any better. It’s easy to get carried away with a design concept – or lack thereof – and miss out on simple steps to make your site more accessible.
Take a look at your web space. Are you following these principles?
1. What’s your justification?
When it comes to the main content of your blog or website, center justification doesn’t work. It’s hard to read because your eyes need to find the starting point of the next line at a different place every time. When your text is left-justified or fully justified, your eyes go to the same place on the page with each new line.
Center justified also has a habit of looking a bit sloppy. While on your screen, with your settings, it might look pretty good, you have to remember that other computers & browsers will make the text look different.
2. Give me some space!
White space – the empty space in between elements – is an often ignored principle of web design. We have so much to fit into our pages that elements get cramped and confused. I know this from experience because I just can’t seem to get the white space right on Scoutie Girl.
Take a look at your own site. Is there ample space between your content and your sidebar? How about between the items on your sidebar? Is there sufficient space between your images & your text? Are your headers set apart from your text with white space?
Respect each element on your site by giving it the space it deserves.
3. What’s the link?
Since links are the currency of the internet (wait, I thought that was PayPal?), it stands to reason that you should make them look important. Your links need to be readable, prominent, and in keeping with the style of the rest of your site.
If they don’t look different, people won’t know to click on them. If the color is unreadable, people won’t be able to understand what you’re saying. If they’re not prominent, people will ignore them.
4. Size really does matter.
There seems to be a trend on craft & design blogs towards really tiny text. While you may like how the letters look at that size, if people can’t your text, they’re not going to make a habit of visiting your blog. Text should be at least 12px in size – 13 or 14px is even better. 15 or 16px makes your text very readable.
For comparison, the text on this site is 15px in size. The text on Scoutie Girl is 12px.
In an aging population – even an aging internet population – it’s important to make your text big enough to be ready easily. And as a web professional who spends upwards of 12 hours a day on the computer, it’s good for fairly young eyes too.
5. Tell everyone you’re important.
Headers (like the one above) tell people – and search engines – that text is important. They give our eyes a place to stop, rest, and refocus before diving into another piece of information.
Headers are also a great way to carry the design of your site over into the content. Taking the time to style your headers to match your site and look special gives you a more professional look.
They’ll help people read through to the end of articles too. Score.
6. Color me surprised.
Carefully, carefully, consider the colors on your website. You can use all sorts of color theory guidelines to help you pick the colors that will work best for your branding and business; however, you must also consider what kinds of colors work best on the web.
High contrast is important. If your background color is too close to your text color, it’s not easy to read. But you don’t have to go black & white. Check out Dave Navarro‘s site (or really anything designed by Reese) to get a feel for a softer color palette that’s still easily read.
Also, be careful of colors that burn. You know the ones. Used as a highlight here or there, these colors can make your site pop! Used for text or large images, they make your head spin.
The colors you use on your website & in your text not only communicate your brand but are the primary way readers access your information.
As websites replace phone books (does anyone still use those?), it’s up to you to make your site accessible to any number of potential customers who could be visiting you – ready to buy – for the first time. Ensuring that your site is easy on the eyes helps those customers stick around longer, browse more, and complete the sale.
What would you add to this list?
Want to get the whole scope on how to set up a website – from start to finish – using WordPress? My ecourse – Website Kick Start – is launching soon and I want you to be the first to know. Click here to get the scoop.
Code for Crafters, Resources, Wordpress
After a short search, I am flabbergasted to find not a single easy-to-understand explanation of FTP – file transfer protocol. Now you might say, “Maybe that’s cause it’s not easy.” But I beg to differ.
Understanding and using FTP for basic tasks when maintaining and organizing your website is essential. And it’s pretty darn simple.
Why should I learn this FTP nonsense? Working with your site via FTP gives you direct access to what’s under the hood. You can keep your files neatly organized, make quick changes, overwrite existing files so you don’t need to change code, etc… Once you start to understand how FTP & your website works, you have the basic knowledge needed to take things to the next step.
And you can impress all your friends.
How Your Website Works
At the heart of every website is it’s files. While on your browser’s surface, you may jump from page to page, seeing text & images combine seamlessly, underneath everything it’s just a jumble of files. Using HTML, CSS, PHP and all sorts of other crazy letter combinations, these files talk to one another. They figure out amongst themselves how to render into a web page and appear as a cohesive unit.
But just below the surface, you can see these files at work. For instance, right click (or command + click for Macs) on my banner at the top of this page and click “view image.” You’ll see that that image – and that image alone – appears in your browser. You may also notice that the URL in your browser has changed to the specific URL for that image. It’s just a file in a folder in my website. So how did that image get there? How did it get its own URL? How does it get accessed by the other files?
Understanding how these files are organized can be understood by checking out the file manager of your own computer (image above). First, you’ve got a hard drive, then inside your hard drive there are many folders to organize parts of your machine at a very high level, inside those folders are more folders, and inside those folders are files, programs, and applications. At each level, the organization becomes more precise.
Your website’s file organization works exactly the same way. There are top level folders (or directories), then folders inside those folders, and then images & files of all different types within those. Wanna see?
Each file & folder corresponds to a unique url. Everytime you see a “/example/” you can rest assured that “example” is a folder.
http://exampledomain.com/folder/folder/file.html
Accessing those bad boys.
Feel better? I hope so. So how do all those files & folders get there?
First, let’s get connected to your web host‘s server using a FTP client. As I said in my tutorial on backing up your WordPress website, I use Fetch (exclusively for Mac) but there are plenty of other great free or low cost apps out there.
You’ll need some information from your web host: the host name you’re connecting to, the username you need to access it, and your password. Sometimes, this is as simple as your domain name & the information you use to log into your web host with. Other times, it’s a bit more complicated. Your web host should have this information easily available for you – just search for information on how to connect via FTP (example images below).
Back to those pesky files & folders and how they got there.
If you’re using a piece of software like WordPress (don’t forget to get on the list for the early scoop on my Website Kick Start ecourse!), those files & folders are created when you install the software to your web host’s server. If you’re using an application like Dreamweaver to build your website, then the application actually connects with your web host’s server using FTP to upload the appropriate files & folders that you’re creating visually. Either way, you don’t have to stop there.
When I’m creating a website using WordPress, I let WP do its thang creating the core files & folders. Then I create extra folders to store my auxiliary files (images, downloads, etc…) to keep my site neat & tidy – to the surprise of my husband. It goes a little something like this:
- To create a folder, hit “New Folder” – most likely a large button on the main screen of your FTP client.
- To add a file to that folder, simply click on the folder to open it (as you would on your computer’s file manager).
- Then hit “Put” or “Upload” to open your local file manager to select the file. Select your file from your hard drive and save it to the site.
- You can now access that file at it’s unique URL or call it your code.
Some Cautions
Working with your site using FTP is quite a blessing. You can do all sorts of things (like moving your entire website) very very quickly. It’s great for keeping things organized and easy to access.
But it’s also just a little dangerous. You are working with the actual files on your actual site. If you delete one, it’s gone. If you upload a file with the same file name as one on your site, you overwrite it (this is actually handy most of the time!). If you drag & drop something into a different part of the site, its location changes.
When working with your site using FTP, be mindful of what you’re doing. Double-check your work as you go. Always be aware of what folder you’re in and what files you’re working with.
And always, back up your site.
If you find this nifty little piece of tech helpful, don’t forget to sign up to get the first notice of my Website Kick Start ecourse. We’ll be building a WordPress website from start to finish, learning how to import your existing content, and filling in informational pages. You’ll also learn my tips & tricks for styling your site & improving your conversions. It’s likely to sell out (I can only take so many students!) and you’ll get a pretty great discount for being the first to know, too!
