Which of these flowers would you rather buy? Website imagery (Source) If you even saw the image on the right, you’d probably leave and never come back. The middle image is better, but still not great. The one on the left makes you trust the website. Just be careful, because bad images actually reduce readership. Remember design principle #1: Great design has a purpose in mind. Any image that doesn’t have a purpose is a bad image. Period. If you needed more incentive, page load speed (which I discuss in section two), is extremely important to SEO and usability. Having too many big images slows your site down.
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
ProblemsAccording 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.
Here 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.
Hosting services can cost anywhere between $2 to $100+ per month, depending on the kind of technology and support you choose. You can usually get a discount if you purchase a yearly plan as opposed to a monthly plan. Here are some guidelines for choosing a good website hosting plan: Although you can get a “shared server” hosting plan for as little as $2 per month, I would typically advise against this. Shared hosting means you are sharing a server and its resources with other customers, which can make the performance of your site suffer. Also, if one of the other websites on your shared server is hacked, it is possible for your website to also be infected. A “dedicated server” hosting plan is the most expensive option—cost can range from around $100 to $2,000 per month—but it would make your website perform the most optimally. Having a dedicated server plan means that the physical server machine is entirely dedicated to your site; therefore, all the resources are yours and it is more secure than a shared hosting plan, as long as the technology is optimal. However, it is much more expensive than what most small businesses usually are willing to pay. Once you have a very high-performing site, this may be what you need, but it is overkill for most early stage and small businesses.
The compromise I typically recommend is a “virtual private server” (VPS) hosting plan which offers the best of both worlds. The cost ranges from around $20 to $50 per month, which is affordable for the hosting services you will receive. A VPS is one machine that is partitioned to act as multiple machines, which gives it a similar affordability to shared hosting, with similar security and performance potential as a dedicated server hosting plan. Make sure your hosting company has phone and/or chat support so you can be helped quickly if you have a problem. Email support can often take too long and become frustrating when a problem needs to be resolved immediately. Phone support is best, but chatting works well, too. There needs to be an easy to use server interface like cPanel to access your server. You do not want to have to use terminal commands to view your server contents and make changes, unless you can afford to hire a professional server administrator to help you. Check to see what kind of server security is in place on the server you are considering. You will want to be able to access your server via Secure File Transfer Protocol (SFTP). There should be daily backups being made of your server contents. There should also be an easy, one or two-click method to install Secure Sockets Layer (SSL) certificates. Make sure the hosting company performs regular security maintenance. Ideally your hosting company has a published security protocol you can review so you know how they keep their servers safe. Some popular website hosting companies include:
GoDaddy DreamHost Bluehost InMotion SiteGround Prominently display a clear description of your business It is important to let people know who you are and what you do right away so they don’t feel confused when they visit your small business website. Make sure your main homepage banner (also known as a “hero image”) and subsequent banners are visual representations of your services, and also that you have an introductory text blurb near the top of the page that describes who you are and what you do. Additionally, make sure both your main and footer navigation menus have "About Us" page links easily accessible so people can click them and read more about your business in depth. Implement the best content management system A content management system (CMS) is a software program or application that is used to create and manage digital content. A good CMS will help you maintain your site, and you don’t need much technical knowledge to use it. You should choose a CMS that is designed for your unique needs; different systems are used for different reasons, such as user-friendliness, extensibility, and budget.
The following are some popular systems with descriptions of their strengths and weaknesses. WordPress: WordPress is the world’s most popular CMS. It has a vast, active support community and many useful plugins to extend the functionality of your site. (And if you cannot find a plugin that does what you want, it is easy to find a WordPress developer who can make one for you!) WordPress is also free and relatively simple to install. Most website developers are familiar with it so it is not hard to find an individual or agency that can work on your site. I normally recommend that small businesses use WordPress to create their websites, due to its flexibility and extensibility. It must be noted, however, that WordPress's biggest weakness is security—because it is so popular, hackers target it the most. Your WordPress site needs to be regularly maintained and secured so it is not hacked. Also, it is difficult to secure every single third-party plugin, so keeping your WordPress site secure must be an ongoing commitment through various best practices (checking to see if your plugins have been updated within the past few months, making sure it is a plugin provided in the official WordPress repository, deleting unused plugins immediately, etc.).
ProblemsDrupal: Drupal is another popular CMS. It offers many of the same benefits as WordPress, including flexibility, ease of use, and a large support community. Notably it is a more secure CMS than WordPress (safer from malicious activity); however, it doesn’t have as many plugin or theme options, which makes it less extensible. For many years, the White House website (Whitehouse.gov) was run with Drupal, but has since switched to WordPress, which it still uses today. Joomla!: Another popular CMS is Joomla! Out of the box, it has better SEO, security, and multilingual capabilities than WordPress; however, with the help of a few plugins, WordPress surpasses Joomla!’s capabilities. Squarespace: Squarespace is a service you subscribe to monthly or annually that makes website and blog creation an easy “drag and drop” experience. It includes website design, development, software maintenance, metrics, domain name with annual purchase, SSL security, 24/7 support, and unlimited bandwidth and storage hosting all in one package. It is especially suitable for creatives and provides you with top-notch design templates. If you are on a tight budget, need a simple and beautiful site, but cannot afford a website designer, this is a great service for you. There is a much smaller learning curve with Squarespace than with WordPress, Drupal, and Joomla!, but it doesn’t have nearly as many extensibility options. However, if you have little or no technical knowledge and are looking for a quick and easy way to put up a website, Squarespace is an excellent option for you.
Wix: Wix is very similar to Squarespace, but it is a bit more user-friendly. It offers a monthly, but not annual, subscription and includes similar features. Wix is also a drag-and-drop builder—you can freely drag and drop elements anywhere on the page; in comparison, Squarespace is more structured in where you can drag and drop on the page. The learning curve to using Wix is even shorter than Squarespace, so if you need to publish a site quickly, this may be your best option. Wix has a lot more templates than Squarespace to choose from, but once you choose a template, you must stick with it or be forced to completely rebuild your site. With Squarespace, you can change your template anytime without having to rebuild the entire site. Choose a good e-commerce platform If you plan on selling goods and/or services through your website, you will need the right technology to do so. (If you do not currently sell anything, you may want to consider doing so since e-commerce could potentially increase your profits.) If you decide to allow users to financially transact with you online, you will need to choose the right platform for your business model. Here are some popular small business e-commerce platforms:
WooCommerce: WooCommerce is one of the world’s most popular e-commerce platforms—it can turn your WordPress website into an online store. Like WordPress, there are many plugins available, and it attaches to WordPress, which makes it extremely flexible. There are many free and premium themes pre-built for WooCommerce. (As a rule, it is better to use a premium theme from a reputable developer because it will offer better security and support.) If you are not tech-savvy, you will most likely need a WordPress developer to help you set it up and use it. WooCommerce also offers a very high amount of capabilities and scalability that your small business might need. Shopify: Shopify is a cloud based e-commerce platform that allows you to create and customize an online store, and to manage products, inventory, payments, and shipping. It is not a WordPress extension like WooCommerce—it is a standalone platform that is hosted on the Shopify server—so if you have a main website, your e-commerce site would technically be separate from that. You can link to your Shopify account from your regular website built with WordPress, Drupal, Wix, etc., unless your main website has a Shopify integration plugin. Features include unlimited products, unlimited bandwidth, fraud analysis, discount codes, reports, and much more. The key benefits of Shopify are that you do not need a developer to set up a store, and everything on the backend is already set up for you when you subscribe. The downside is you do not have as much control or flexibility over your store as you would with WooCommerce.
Shopify Plus: Shopify Plus is Shopify, but with a higher level of customization, more staff accounts, and international e-commerce options. It also has a higher level of support. However, all of this obviously comes with a higher subscription cost, and it still does not have all the flexibility and customization abilities as WooCommerce. Business Squarespace: Squarespace has an e-commerce subscription option, so if you chose Squarespace to build your site and have very simple e-commerce needs, you can choose this route. Business Squarespace charges a transaction fee, but this can be bypassed by upgrading your subscription to a basic online store. It includes a free domain, SSL security, SEO, abandoned cart recovery, discounts, real-time carrier shipping, and more. However, it has been noted it is not as user-friendly as Shopify. And like Shopify, it is simply not as flexible as WooCommerce. Wix: Wix actually has a Shopify extension which is very user friendly. You will have to upgrade your Wix account and subscribe to Shopify in order to use it.
