Aesthetics are important. However, aesthetics alone don’t guarantee success on the web. Search is a fundamental channel for acquiring visitors for websites and hence search engine friendliness should be a fundamental element of your web design if you truly want to create something of value.
So, what are some of the things web designers need to keep in mind when it comes to making great designs that are SEO friendly?
Webfont, HTML and CSS Combo
Good designers know that typography is what makes or breaks a web design. However, as much as we’d like to work with all kinds of fancy fonts, its extremely important to keep search engine accessibility in mind. This is where designers need to sway away from using text as images in their web design.
The alternative is to make use of webfonts in combination with HTML and CSS to get the aesthetic appeal that you want yet retain the SEO value of live text. With the aesthetics covered you can also go ahead an make use of H1s for your headlines along with body type and bold text. All these factors combined in design give off positive signals to search engines and effectively boost the value of the design that you create.
Give Space for Optimization
As a web designer, your focus should be on creating something that looks amazing and offers an amazing user experience. But do the company you’re working for a favor and leave some space for basic on-page optimization!
This is particularly true for websites with lots of visuals or product listings. If you don’t want to compromise on the visual appeal of your website, create a mouse over function that hosts live text descriptions of the objects in images. This way you’ll be able to retain the beauty of your design and increase the search engine friendliness of your website by giving search engines something to feed off.
Make use of Expandable Divs
So you absolutely don’t want to compromise on the way your images are appearing on the website. No problem, just make use of expandable divs that pop up on mouse over or a single click hosting a ton of information on the product/service that you are advertising.
Expandable divs are an excellent way to incorporate live text that can easily be indexed by search engines into a minimalistic visual heavy web design. While the images will serve well to catch the users attention, the content in the expandable divs will attract search engines and increase user engagement on your website.
Indexable Calls to Action
In most cases you’ll find all pretty websites to have big, bold call to actions. This is great as it helps direct users to what you want them to do. However, keeping these calls to actions as images limits their effectiveness to only the users that are on your website!
What about users that are looking to do the same on search engines? You’d want to make sure that you’re able to attract users with the intent to buy what you’re selling by keeping those calls to actions in a readable, indexable format. Once again, HTML and CSS are your best friends!
Fast is better than slow
One of the 10 things stated in Google’s “What we’ve learned to be true” page is the very fact that fast is better than slow. But how many designers really think about this aspect when creating their illustrious designs? Heavy graphics, high quality images, dynamic shenanigans all look amazing but can severely impact the load time of your website.
Limiting the use of heavy graphics and images to product/people shots and other things where they are a absolute must is important. For all other elements where you can use an HTML or CSS alternative you need to be doing that. This will allow you to effectively cut down the weight of the website and get an end product that not only looks amazing, but is fast loading and search engine friendly as well.
By all means, this is not meant to be a definitive list of what web designers should or can do in terms of creating better optimized designs. Nonetheless, incorporating the basics above in your web designing process will allow you to deliver greater value to your clients.
I wonder how do you add font face to the website?
Hi Angelina,
Thanks for your question. @font-face is actually very simple to implement and only requires a few lines of CSS and is therefore very easy to use without any third party tools.
Go to your CSS stylesheet and input this code:-
@font-face {
font-family: mycoolfont;
src: url(‘mycoolfont.otf’);
}
Replace the mycoolfont with the chosen font name.
Let me know how you go with it.
Nikita
This seems to make a lot of sense, and none of those dodgy black hat techniques – refreshing !
Hi Michael,
Thanks for your feedback. Great to hear you liked the article.
Nikita
Good reminders, Nikita. As great and eye-catching heavy, image-rich web designs are, they can hurt in terms of SEO. But, you’ve provided some nice suggestions to help accomplish both.
@Touch Point
Great to hear that you found the reminders helpful. It is possible to acheive really great web design and user interfaces without sacrificing SEO and rankings.
Another SEO tip is always check the page load time using Google Page Speed. This is an important factor for rankings. We typically aim for a score higher than 90 out of 100.
Good points Nikita regarding the mouse hover functions to include texts for SEO.
I do believe there are other things that you’ll need to consider before throwing everything into hover functions though. For example, if your audience uses mobile heavily, it might not make sense to put text on hover, since they won’t be able to see it.
If the text is important, it’ll be good to make them part of the design.
Hi Zell,
Thanks for your feedback. You raise a really good point. For compatibility with Mobile devices, it may be best to consider alternatives such as jQuery Mobile.