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.
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.
Done right, it can drive thousands in traffic to your site every month without any extra effort. Done poorly, not a soul will find you on Google. According to Jon Rognerud, there are four steps to SEO. Here are some of Jon’s actionable takeaways: Know who you’re targeting and perform keyword research. Optimize your site pages with on-page SEO targeting those keywords. Create a strong sitemap for Google and Bing to index your site. This is highly simplified and there are a lot of other SEO factors, but these three tactics will get you well on your way to showing up in search results. This next piece of web design advice helps with both SEO and building trust with your visitors. Securing Your Site with SSL Encryption
You’ve probably seen the little green lock in your address bar next to a website. SSL Encryption This is called SSL encryption. Google gives encrypted sites a small SEO boost. But perhaps more important than that is the trust factor it gives your visitors. This is especially true if you sell anything on your website. People want to know their information is safe before they open their wallet. Migrating to SSL is a delicate process. Here’s a guide to migrate your site to SSL without hurting your search rankings. Site Architecture & Navigation Remember design principle #4: Have a clear site navigation. Navigation is important for two main reasons: Better SEO (because it makes it easier for Google to index your site). Better usability (because it’s easier for visitors to find their way around). Remember to use the “three click rule”: Every page on your site should be within three clicks of any other page on your site. To help you with this, consider mapping out your website. You can do it with a tool like Slickplan or just use pen and paper. They look like this:
Site Architecture Map Example Creating a physical map helps you see where you’re missing out on linking pages together, and keeps things organized. You should also keep your most important calls-to-action at the top of the page. This is where the most people see, so it’s a great place for a “shop now” button, a “contact us” tab, or a “learn more” button. Website Tools (AKA “Useful Stuff to Make Your Website Better”) Website tools are mentioned last because they can’t fix a broken website, but they can enhance an already good website. Here are a few of our favorite tools: Live Chat live-chat-widget Live chat is an essential part of a business website. Or at least, we like to think it is. We do offer it as a service, after all. 😊
But in all seriousness, live chat can help you provide excellent customer service, close customers who are on the edge and learn more about your target market. In fact, in this post, we detail how to use live chat to survey your customers so you can improve your marketing. You can also receive notifications when visitors arrive on your site even before a chat conversation! Conversio Cart Abandonment Recovery Cart Abandonment Recovery Email If we wrote “What makes a good eCommerce website”, Conversio would top our list. It automatically sends emails like the one above to try to recover abandoned carts. (Side Note: The advice in this article does apply to eCommerce sites as well. So if you have an online shop, rest assured you’re not wasting your time by reading this.)
Anyway, with 69% of people abandoning their carts on average, you’ll be taking full advantage of this tool. They also offer services like newsletter sending, product recommendations, and a stronger site search bar. MailChimp Email Opt-in Forms Have you ever seen an in line opt-in form like the one below, and wondered how to get one on your site? Free Bonus: Enter your email to get a free website redesign checklist, along with a PDF version of this post. Enter your email address SEND ME THE CHECKLIST Well, we use MailChimp and a premium MailChimp WordPress plugin to do it. Here’s a 60-second explainer video:
Squarespace Website TemplatesAddThis Social Sharing Buttons See the sharing buttons to the left of the screen? They’re from a plugin called AddThis. AddThis also has a few other features like a follow button and a related posts widget. Yoast SEO We talked about how SEO is important for a modern website. Yoast SEO makes on-page SEO super easy. It gives you a checklist to show you what you need to add/edit to optimize your page for the keyword you choose: Yoast SEO WordPress PluginW3 Total Cache Load speed is critical for SEO and usability. One of the ways to increase site load speed is with browser caching. W3 Total Cache makes caching super easy.
Here’s a guide to help you set it up. Google Analytics What’s free, easy to install, and highly beneficial? Google analytics. Google analytics can give you SO much insight on where your traffic is coming from, going, and stopping. And since it’s free, there’s no excuse not to use it. Here’s a guide to installing and using Google analytics. Real-time Visitor Monitoring: Frequently Asked Questions Conclusion We’ve come to the end of our journey. Give yourself a pat on the back. So what did we learn? Basically, your website is your business card. It’s the thing everyone – your customers, shareholders, friends, family, and cat – sees when they think of doing business with you.
By keeping your website looking sharp, you ensure everyone who visits it views you as trustworthy, professional, and worthy of doing business with. Plus, a strong website pulls in traffic through Google, gets links from authoritative sites, and is shared more often. We’re in 2020. A great website is no longer a “nice to have”. It’s an absolute must. Did you redesign or launch your site after reading this guide? Please share it with us in the comments below! And, as always, feel free to ask questions. In today’s digitally connected world, it’s not enough to just provide a service well—you also have to market. No matter what type of business you’re in, having a strong online presence can help increase the weight of your brand.
A strong online presence can grow your audience, engage existing customers and help you sell more easily. All of this begins with having a website that speaks to your business’s unique offerings and message. Creating a website can seem daunting, but you don’t have to do it alone! has hundreds of skilled independent professionals with extensive experience in web development that can partner with you in building your website. If you decide that building a website is something you want to do on your own, there are many tools at your disposal to make this process easier. This step-by-step guide will show you how to: Define your vision for your website Purchase a domain name Choose a hosting provider Pick a website builder Select a website theme Plan and produce page content
Add functionality for your business Start measuring key metrics Test for bugs and compatibility issues Adapt to keep up with customers Build your website with the world’s best Define your vision for your website Before you can dive into website building, you’ll need to do a little bit of homework. You’ll want to begin planning what you want your site to accomplish. Is your goal to drive more readers to your blog? Do you want visitors to make a purchase? Once users hit your site, what do you want them to do? Asking yourself these key questions will help you define your website’s purpose. From there, you’ll also need to consider the website’s function, design and content. Function
Here, you’ll decide the main objective of your website. Maybe you provide a service, like consulting, and want to encourage users to reach out via a contact form. Perhaps you plan to sell products in an online store and need an e-commerce platform that allows users to view specific product pages. Or maybe your objective is to educate and create readership. Take some time to think about how your website can best serve your business and keep this function in mind as you begin to build. For example, suppose you’re a photographer and need to showcase your skill set. In this case, the main function of your website would be to display your work. On the other hand, if you run a communications agency, the main objective of your website would be the specific services you provide (public relations, content development and marketing, etc.). Join the world's work marketplace Find Talent
Design It’s important to have an idea about what you want your website to look like. Perhaps you’re looking to create conversations by showing users a portfolio of work. In that case, you might want a grid-like layout with templates that are easily repeatable to showcase new work. You might decide on-brand colors, logos, and specific imagery that ties into the overall look you’re hoping to achieve. Whatever web design you choose, make sure it’s flexible enough to serve your function and simple enough to maintain. It should also align with your brand’s personality. Content What type of content will you need to live on your new website? Creating a quick sitemap of the pages that you’re hoping to create and what needs to be on each is a great way to get organized. You can easily do this in Google Sheets or Excel. Once you’ve chosen your pages (for example, “Home,” “Blog,” “Testimonials,” “Portfolio,” and “Contact”), decide what information you want to put on each page. If it needs to be created, make that a priority. If you already have content, start compiling it.
