We live in a time where a website is pretty much a requirement to be seen as legitimate. Any business without a website is less likely to be trusted and will usually lose out on business to a company that has one. But just having a website isn’t enough anymore. A website has to impress a visitor, and it must do it right away. First impressions are important, but more so on the world wide web. Visitors to your site will make a snap judgement within 50 milliseconds of seeing it, and you want to make sure that judgement isn’t a bad one.
But how do you do that? It’s pretty easy to find a great looking theme and some plugins and install them on your WordPress site, (you are using WordPress, right?) but there’s nothing worse than a canned website. You need to customize it, make it yours, own it. To do that, you’re going to have to get your hands a little dirty, but I’ve got some resources that will make the task a lot easier.
I spend my days using these tools, and I know from experience how beneficial they are to the task of making a website beautiful and functional, both of which are necessary for a good user experience and return visitors to your site.
So what are these resources, and how can you use them?
Without a doubt, Firebug is my most commonly used tool everyday. I use it to troubleshoot, design, repair, add, and delete from websites. It allows me to see my changes in real-time and fine tune my code without having to load and re-load and re-load again my files. The console allows me to check for errors, and changing the HTML and CSS is as easy as working in a text editor (actually, it’s easier).
So far, my only issue with Firebug is that it’s only available for Firefox. There are other tools out there for other browsers, but I prefer Firebug over the other options, so I’ll stick with Firefox for it.
As I mentioned earlier, it’s easy to find a great theme, or template for your site, but to make it your own, you’ll need to customize it. Using graphics, stock images, icons, and patterns is a sure way to give your site exactly what it needs. Creative Market is relatively new in the stock design world, but it has quickly become my favorite source.
Every week there are 3 freebies for download, and they range from fonts to graphics, to patterns to themes. I check the freebies each week and have a huge folder full of resources that I didn’t have to pay a single penny to acquire. However, I’m a regular shopper of Creative Market and love to be able to financially support those artists who have worked so hard. The prices are very reasonable and the quality of design that you get is superior.
ColorZilla Gradient Generator
Colors are a hard thing to get just right. Ask any graphic designer and they will tell you that getting just the right hue, shade, or tint is probably harder than the actual design itself. But once you get it just right, adding a gradient can give you that extra “pop” that will make everything just right.
Enter the ColorZilla Gradient Generator. This handy tool will create an infinite number of gradient combinations, you just pick your colors (at least 2, but as many as you want), chose what type of gradient you want (vertical, horizontal, diagonal, or radiant) and the generator will pop out all the CSS you need to make your beautiful gradient work in all browsers. No more extra work on your part to make sure your colors display correctly across all platforms, ColorZilla has done all the work for you.
Google & Adobe Webfonts
Just imagine for a moment, that you’ve done all this work using the tools mentioned above, and you have this great looking website, but you’re still using the default Times New Roman or Arial as your text for the entire site. Sticking with a standard font for everything will just drag your beautiful website through the mud. Fonts are just as important as color, design, and functionality, so you’ve got to make sure you pick the right ones. Combining different styles of font (for example: serif and sans-serif, block and script) can be visually stimulating, if done right.
But getting these pretty new fonts on your site can be a little difficult. Google Webfonts and Adobe Webfonts allow you to easily pick fonts from their servers and use them on your site. But I’ll give you a little bonus tip. If you’re using WordPress (and I think we’ve already established that you should be), you can use the FontPress plugin to make installing these webfonts even easier.
Media Query Snippets
So you’ve taken my advice and used all these great resources to create a stunning website that people just can’t pull themselves away from, but the problem is that it only looks good on their computers. When they view your site on a tablet or mobile phone, there is much to be desired in regards to design and user experience. You can quickly fix that little problem with a few media queries.
Media Query Snippets has a list of common device screen sizes and will give you the media query code to copy into your stylesheet and customize to your hearts desire. Don’t want that slider showing up on mobile phones? Easy, just paste the @media screen and (max-width: 360px) query into your stylesheet and set that div to be hidden.
Although media queries are great, they are actually a temporary solution to the responsive needs of websites. As code evolves, there will be new options to create beautifully responsive websites, including element queries. But until that day comes, media queries work great to get the look you need to make your site easy to navigate and use on all devices.