So, how do you find, design, and use images on your website? We wrote about some tools to make great images in this post. Go check it out. But to give you some inspiration, here are a few examples of good images you can use: Charts and graphs of data points Screenshots High-quality stock photography (choose wisely) Custom designs and vector graphics Professional (or at least well-done) photography Key Takeaway: Use images, but do so with a purpose in mind. 3 Examples of Beautiful Websites Knowing what makes a good website is easier when you see real-life examples.
Here are a few I love: KlientBoost is completely devoted to amazing website design. Their site oozes beautiful visuals. Klientboost Website Design CoSchedule is a site I look up to as well. Their whole site is based on great formatting and consistent branding. CoSchedule design example Expedia: Visit Britain received a developer award for its design. expedia-great-britain You can also see more examples that actually won awards for great design at Awwwards and Webby Awards. (Note: I also give a list of website templates with great visuals in the next section on responsive design, in case you’re like me and can’t code.) Enough about visuals. Let’s get a little geekier.
Technical Website Design (AKA “Geeky Stuff”) Technical web design includes things like: Responsive design and mobile-friendliness Fast load speeds Search engine optimization (SEO) SSL encryption Site architecture & navigation If any of these things made you say “What?”, don’t worry. I’ll explain them all in laymen’s terms. Responsive Design and Mobile-Friendliness
According to Smashing Magazine’s post Responsive Web Design: What It Is And How To Use It: “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.” Responsive Web Design In other words, a responsive site is one that plays well on all screens and devices. It’s mobile-friendly and caters to the device you’re viewing it on. If you think that sounds complicated… it is. But it’s important. In fact, smartphones now account for over 51% of all online traffic, and tablets came in at just over 12%. And that number is growing. Also, Google cares a lot about mobile-friendliness. In fact, they now place a priority on ranking mobile-friendly sites (an update called “Mobilegeddon“).
Finally, mobile-friendly makes for a better user experience. And ultimately, it’s all about the user. They’re the ones opening their wallets to keep your business afloat. So what’s a non-designer to do? First, see if your site is considered mobile-friendly by Google with their mobile-friendly test. It’s also a good idea to check it yourself by going to your site on your phone. If it doesn’t score well or look good, you have some work to do. Mobile-friendly test Yay, we’re mobile-friendly! Besides hiring a designer, your best bet is to change your site’s template. This is the easiest and most affordable way to make your site mobile-friendly and responsive.
Squarespace website templatesHere are some mobile-friendly templates for popular site builders: Mobile-friendly WordPress templates Mobile-friendly Shopify templates Mobile-friendly BigCommerce templates Mobile-friendly Magento templates Template Monster for multiple platforms Fast Website Load Speed According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded in 3 seconds! That doesn’t give you much wiggle room. But if you’re still not convinced, get this: Roughly 79% of online shoppers who have trouble with website performance say they won’t return to the site to buy again, and around 44% of them would tell a friend if they had a poor experience shopping online. In other words, if your site speed sucks, you lose. Big Time. So how do you ensure a fast load speed? Try this: Like the mobile-friendly test, Google also has a page speed test. However, some believe it’s not very accurate, so it can’t hurt to also try Pingdom and GT Metrix.
All three will give you an idea of what’s hurting your load speeds, with suggestions to improve. Page speed test As you can see, there are a lot of ways to improve your site load speed, like browser caching and making above-the-fold content load first (the content you see without scrolling down the page). However, one of the easiest ways is optimizing and compressing your images. As I said in the visual section, images take up a lot of bandwidth. Which is why it’s important to only use images that are highly valuable. You can use a tool like Gimp to compress your images for free. (Here is a tutorial to do just that.) Pre- and post-Gimp image file sizes Search Engine Optimization (SEO) SEO means optimizing your site to show up in search engines like Google. It’s the bread and butter of what makes a good website.