Table of Contents
So, you decided to create a website for yourself or your business. Unfortunately, getting your website online is not a sure way to success in the form of high traffic, daily visits and great rankings in search engines. So, how can you design your site to make it more attractive for your visitors? What are the steps you can take to catch their attention and tie their eyes to the screen? Learn ways to provide visitors with great experience and make them return.
Know your visitors
The first thing you have to know, before putting together some idea about your website, is who your visitor is. Not knowing who your visitor is and what he wants it will be hard, if not impossible, to create a compelling website. So, before starting any work on design or development, you have to create a well-detailed persona of your ideal visitor. The more details you will include, the easier it will be for you to meet the needs of your visitors.
Creating a user persona should be the first step on your list. One of the benefits of having a persona is getting a clear picture of the visitor’s expectations and the way they could use your site. When working on persona, make sure you it as realistic as you can. Meaning, describe the visitor from every angle–personal, professional and also technical. Think about persona as a real person with motivations, interests, needs, wants, fears, family, job, etc.
When you put all these information together and have a clear idea of how your visitor looks like, you are ready to brainstorm various ways to attract him.
Make it visually appealing
A picture is worth a thousand words. If you want to attract more visitors to your website, ditch tons of text and focus on rich visuals. Beautiful hero images will have much bigger effect than any other strategy you can think about. In case you are using your website for business, show don’t tell. Meaning, present your product or service through images instead of plain text. Display it with the best quality, highest standard and from the best light so your visitors can imagine themselves using it.
When it comes to images, forget commonly used stock images. They look cheap no matter how much will you pay for them. To make your website stand out, present your own shots. Today, almost every smartphone have a decent camera able to create beautiful photos. What’s more, with help of dozens of filters available on Instagram or in photo editors you don’t need to have almost any skills in photography or be an artist. Just take a shot with your phone, enhance it with some filter and you are good to go. Be creative.
Visuals 2.0 with parallax scrolling
Why should you stick with basic visual tricks and tips? You can go one step further and create immersive visual experience through technique called parallax scrolling. You probably heard about this technique as this trend has been sweeping the design industry for a while. The reason that parallax has such a success is simple–it provides a unique and eye-catching way to visually deliver your message to visitors.
In the simplest terms, parallax refers to the use of several elements, usually images, that move individually as the visitor scroll down the page. This, as a result, creates a dynamic experience that encourages the visitors of your website to continue scrolling and spending more time there. Implementing eye-catching technique such as parallax can also increase the chances of visitors coming back to your website just to see it again.
Responsive means typography
When you want to check out some interesting website, what device will you use? Currently, more than half of all search is comes from mobile phones. The message is clear … Your website have to be responsive if you want to succeed in 21st century. Now, you may argue that you already covered this issue, but are you one hundred percent sure about it? Responsive web design is about more than just fluid grids, flexible images and media queries. It is about content, too.
To make sure your content is mobile-friendly make sure the text on your website is concise and offers clear calls to action. Your content also needs to be readable without the need to use zooming. Meaning, instead of decreasing the size of text on smaller displays, go the opposite direction and make it bigger. 16 pixels is the lowest point you can go. Never go under. In case of leading (line height), you can decrease it a bit because visitor will have smartphone closer to his eyes than on desktop or tablet. Side margins can be decreased as well.
In case of a font size … No matter what number will you decide to go with, just remember to make the typography respond dynamically because there is no “one solution that fits all.” Next thing you should experiment with is line length (width of paragraph). Let’s be honest … We just don’t like to read wide and long blocks of text. Thanks to research we know that the best reading experience comes from range between 50 and 75 characters. More precisely, the golden way is about 66 characters. Go ahead and have fun with width.
Eliminate website errors
In order to make your website appealing to visitors, removing any website errors is very important. Website bloated with errors, no matter how great its design is, will never have a big chance to succeed and win the hearts of users. One thing to remember is that every error is literally slowing your website down. When browser is loading the page and rendering it, it will always give certain amount of time to every resource that need to be loaded. Only when this time runs out the browser will mark the resource as not available and move to another one.
If you have lots of errors, forget about attracting visitors. Focus on fixing the problems you have. Think about your website and yourself as a brand. If you were selling luxury cars or watches, I bet you would never display it in a crumbling stand. In that way you would hardly get in any visitors, not to mention closing sales. The same principle applies to your website as well. Errors can decrease your branding and people will know that your site is not ready for service, gently speaking. This is sure way to lose traffic.
Remember, great design can build a bridge to new visitors and customers. Errors will make this bridge unstable and after time make it fall. In other words, put extra time and effort into constructing your site and making it stable. Keep your standards high and work with precision to create your site correctly without any glitches, no matter how long it takes.
Make your website load faster
One thing we have that is valuable more than money is our time. Think about it when designing and building your website. The majority of visitors to your website will give it only limited amount of time to load. This window is pretty short, somewhere around four seconds. When your website reach this threshold, the probability of visitor leaving increases significantly. Even if the visitor will sacrifice couple extra seconds and wait, his experience was already impacted and you will a have hard time to fix this. What can you do?
First, if you are not an expert on design and development, hire one. It is much faster and cheaper to start with solid foundation than going backwards and fixing errors and mistakes some rookie did. Second, provide only resources that needs to be served. Meaning, well-done responsive design is not just about grid and media queries. It is also about using appropriate media content, like images, in right resolution.
Forget about having one version of a picture for every device and resolution. This is neither responsive design nor the best practice. It is doing the work only half-way. If you want to do something, give it one hundred percent of your effort and focus, not less. For every bigger image you want to use you should have at least three versions. One, full-size, for desktop. One, smaller, for tablets and netbooks and the last one, the smallest, for mobile phones (smartphones) and phablets. I forgot … One more optimized for retina screens.
Although you created multiple versions of images, your work is not done yet. What you should do now is to optimize these images to reduce their file size and increase the performance of your website furthermore. There are many tools for different platforms available to get this job done. The most commonly used file formats of images in web design are JPG (JPEG), PNG or SVG.
Unfortunately, I haven’t found any tool, at least not for free, capable of working with all these types. If you have, let me know. Anyway, tool I like to use for JPG and JPEG files is JPEGMini. This tool is available for Windows as well as for Mac. In case of PNG files my favorite utility for Windows is PNGoo. For Mac, you can try Pngyu (also for Windows) or some online solution. Lastly, for SVG I use SVGO GUI. For more information and tips about image optimization, check out the Need for Speed post.
Next step, after you deal with media, is to minify the code. Minifying is the process of removing all unnecessary characters (new line characters, comments, etc.) and white space from code without changing or breaking its functionality. This way, you can reduce the size of files, thus increasing the speed and decreasing the time it takes to load your website. Minification is mostly applied to CSS and JavaScript files because here, you can get the most. You can minify HTML as well, but the difference will not be that significant.
The last step to make in order to make your website as fast as possible is to use CDN (Content Delivery Network) to serve either whole site through it or some resources like stylesheet (normalize, reset, grids), JavaScript libraries and plugins and fonts. To explain it, CDN is a system of servers across the Internet used to serve content to users, thus ensuring its availability and high performance of websites.
Another benefit of using CDN to serve content is reducing the amount of request going to your server and increasing the loading speed furthermore if visitor already have the resource loaded in browser’s cache. For example, if you are using some JavaScript library like jQuery and visitor coming to your site already has this library stored in browser’s cache, it will not be requested and downloaded again. Meaning, page will load faster.
Use notifications
The old stereotype of getting visitors informed about news on your website is through the use forms to sign up for email newsletters. Even though this strategy is still popular and working, there is new technology on the horizon aiming to change it. I am talking about browser push notifications. These notifications work the same way like the mobile apps and will allow your visitors to opt-in to timely updates from your website. How does this sound? This technology is experimental and not well supported right now, but we are getting there.
Don’t forget the blog
Another piece of advice to attract more visitors to your website is to start a blog. No, this is not a joke. Although it will require you to do more work, having a blog and posting fresh content on a regular basis will help your website rank better (reach better position) in search engine and also give you more opportunities to get more visitors on your website. Keep in mind that blogs are the most popular pages that people view. In order to get most from your blog, make sure to fill it with interesting topics people can enjoy and learn from.
Filling your blog with thoughtful articles and informative topics is critical. Your blog can serve as a platform where people can learn more about your business and even you through the articles you will post. A nice side-effect of having a blog is establishing yourself as an expert in your industry. If you can share your knowledge comprehensibly through your blog, as the time will go you will build trust with your visitors. This can quickly turn into new clients and various business opportunities.
If you decide to create and maintain a blog, remember those three things. First, be consistent and have patience. Growing an audience takes a lot of time. Before you start, you should have some idea about posting frequency. There is nothing worse than confusing your visitors with irregular posting. Create some schedule that suits you the best and stick to it. Second, be visible. Writing a blog post is not the end. You also have to share it and make it visible to people. Otherwise, they will not be able to find it.
Use websites like Quora, Reddit, StumbleUpon, Digg and similar ones to spread your posts across the web. You can also use Medium and social networks such as LinkedIn to re-post your articles and reach even broader audience. Also, make sure to do a research on websites related to your business or industry and get there as well.
The third and last advice is simple … Write epic shit. You can work your ass off but without great content, nobody will want to visit and read your blog, not to mention your website. So, make sure to write things that make people think. Your content should inspire people and provoke questions and emotions. Every piece of your content must create a value for your visitors. In the end, only things that are interesting and useful will get attention.
Don’t fear the future
The last thing to discuss is whether you should implement the newer, and sometimes experimental, technologies on your website or not. There is no right answer that will fit every situation. The degree in which you can implement newer technologies to enhance your website will largely depend on type of visitors you want to reach and appeal to. You must reckon with the technological and performance level of devices your visitors might use.
For example, if the majority of your visitors is older, say 50+ years, it’s hard to imagine them using the latest model of iPhone or some high-end tablet or computer. The majority of visitors in this age range will probably use a cheaper (if not cheapest) gadgets able to get the basic work done. In this case, even a bit older shiny stuff like canvas, CSS animations and flexbox layout module are not available options.
On the other hand, if majority of your visitors are from younger generation, I see no problem to unleash your creativity and use something more experimental. What’s more, it’s safe to say that this kind of audience might even expect you to do it. Why would they buy these fancy gadgets anyway? However, that does not mean you should forget about the rest of potential visitors. Every time you decide to implement some feature or functionality, always use progressive enhancement.
In other words, make sure that anyone no matter how cheap and old his device is it can still view and use at least the “basic version” of your website. Never turn your back on them. Subsequently, feel free to increase the level of functionalities and effects your website offers. This is, in simplest terms, what progressive enhancement is about. Remember, experimental features are safe until you use appropriate shims and polyfill as fallbacks.
For those of you who are not afraid to get a bit over board with features to stay up-to-date, there is a great feature detection JavaScript library called Modernizr you should try out. What this library does, in short, is it detects the features your browser supports and append appropriate classes to html element. Knowing this, you can prepare additional styles and scripts for these situations. I wrote a post covering the basics of what Modernizr is, how it works and added examples of using it, so make sure to check it out.
Give it away
Even if everything else fail, there is one commonly used strategy among bloggers that always works. This strategy is about giving away free content to your visitors and other websites. This content can be anything from short articles to videos or e-Books. Giving content for free will also help you prove your credibility, establish you as an expert on given subject and build trust. Everything you will give will help spread your name and links to your website across the web. More links mean higher chance of people finding your website.
There is only one downside this strategy. It will take some time and effort to create that content before you will be able to give it away. This might discourage you in the first moment, but you still should consider giving this strategy a shot. To motivate yourself, think about it as a trade. You will now give something away without charging for it. However, in the future, you will be able to reap various benefits like word-of-mouth, virality, links to your website, mentions of your name and business and so on. Give, give, give and then ask.
Closing thoughts on design a website and attracting visitors
Building a website that will work like a magnet and get attention of your visitors is not an easy job. It will take some time and effort. When you will feel your motivation is slipping, just remind yourself that all the energy you put into it will pay off. However, you need to pay attention and avoid falling into the trap of chasing the perfection. Remember that shipped website in passable condition is ten times better then website resting on your hard drive. In the end, make sure to ship it and put your website out to the world.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
