Having given my home page another facelift I thought those of you who are also bloggers, or indeed would be bloggers, might be interested in finding out a little more about how I’ve designed my blog without knowing any html coding or one end of a cascading style sheet from another. I’ve also included some tips on checking and improving page speed and whether your site is ready for Google’s mobile friendly update rolling out later this month.
Designing Travel With Kat
When considering how I wanted the homepage of my blog to look, from the previous layout I wanted to retain a full-width slider at the top and the full-width map (click on a maker and then the place name that pops up and it will take you to a feed of all the stories I’ve written about that destination).
I also wanted people to be able to easily find stories by topic as well as destination.
The design needed to be visually exciting, encouraging people to stop a while and explore the site.
So this is how my home page looks now above the fold (the first part you see before scrolling further down the page) at the date of writing this post. I hope you like it AND find it easy to use.
A few words about Wordpress themes
Anyone familiar with WordPress will most likely want to skip this part but I thought I should include it for anyone who isn’t.
Going back in time, long before my blogging journey began, I was a graphic designer and photographer but I had never tried my hand at website design. When I first discovered WordPress.com I was over the moon. I immediately tried it out, building a website for a local charity in one weekend, without any prior knowledge of website design. WordPress is that easy. A little later when I decided to take up travel blogging I set up a second site, Travel With Kat. WordPress.com is free and the simplest way to start blogging, however, I needed to change to WordPress.org when I wanted to take my blog beyond the basics. It is only using the later that you can include any adverts you wish, write about press trips and use a wonderful range of plugins (add ons) that add great new features to your site from spam filters to pop-up windows.
However, whether you use WordPress.com or WordPress.org, unless your design is bespoke, the look of your blog will be determined by the theme you select. It’s like a template that you build your blog in and while many things are customisable within each theme, the look of your site you will be restricted by which one you opt for.
Divi from Elegant Themes
When I came across the theme provider, Elegant Themes, I was immediately impressed with the styling of their designs.
Here’s what they say about their most popular theme, Divi…
“…the smartest and most flexible theme in our collection. Divi is the most powerful theme we have ever built, and quite possibly the only theme you will ever need.”
I’m inclined to agree with them. I have used the theme Divi for a while now, for both Travel With Kat and another site I run, Boutique Travel Blog. I’m sure most people who look at the homepages of these two different sites, wouldn’t notice they were built using the same theme.
Divi’s page builder
Here’s a glimpse at the home page of Boutique Travel Blog and how it is made up using Divi’s page builder.
Divi’s drag and drop page builder, pictured above is a joy to work with. I’ve not come across anything like this with any theme I’d tried before and while I’ve yet to find a theme that does every single thing I want it to do, this comes pretty darn close.
And here’s a look under the hood of Travel With Kat’s home page which I’ve built using a mix of full width sections and standard width sections. The page builder is completely flexible with the arrangement of columns and rows you can use. There is an impressive range of modules (building blocks) that can be inserted into each column or row including side bars, blog feeds, images sliders, portfolios, the list goes on. I have only used a couple of different types of modules in this example but with this degree of flexibility no two websites need look the same despite using the same theme.
I’ve also created pages for every country and various topics that I’ve blogged about and used the ‘blog module’ in the page builder to add the feed to all the latest posts for that particular country or topic. So if you click on the image that says Wildlife on the home page, then a new page with the feed for all posts about wildlife will come up. I’ve still got some work I’d like to do on these pages but the basic navigation is there.
Responsive designs are essential
Later this month Google will be putting more weight on the mobile-friendliness of a website as a ranking signal so it is essential that your site is responsive (changes automatically to suit different devices from mobile phones to widescreen monitors) by 21st April 2015. You can read more about this on Google’s blog. You can test pages of your website here, Google’s Mobile Friendly Test.
Divi is fully responsive and looks pretty good on tablets and mobiles (although please do tell me if you find it otherwise). The only real snag I’ve come across is that on my mobile the gravatas that appear next to each comment are too big and hide part of the comment. Hopefully this will be fixed before too long (and do shout out if you know how I can put this right please!)
Canva – adding text to photographs
I’m sure most of you by now have heard of Canva.com but for anyone new to blogging who may have not, Canva is a fabulous website that is a great aid to designing everything for a business card to a Facebook post. While I used to simply use Photoshop to add text to an image I now nearly always go to Canva.
And this is what I used to make all the images with text on my home page. It breaks a golden rule of design to use so many different typefaces but I rather like it. Of course, by the time you read this I may have updated the home page again (which is partly why I’ve added the screenshots).
Checking and improving your page speed
The only thing I don’t like about Canva is that the images you download are Png files, so before uploading to my site I have to change these to Jpegs, as these are much smaller files and will load quicker when someone visits my site. You can check your loading time and get some insights about how you can improve this with Google’s Page Speed Insights. I’m no expert and my page could be quicker, let’s face it there are a lot of photos, but simply changing all the images on my homepage from Png files to Jpgs made a hell of a difference.
Now it’s over to you
I’d really love to hear what you think.
Do you like my new home page? How easy it is to use? How quickly did it load? And which type of device are you using to look at it – a laptop, mobile or iPad perhaps?
Have you used Elegant Themes?
What are your favourite themes and theme providers?
Loved it? Pin it!
Disclaimer: The links in this post to Elegant Themes are affiliate links so if any purchases are made via these links I will receive a commission to help me keep running Travel With Kat.
Join my 'Behind the Scenes' newsletter
Delivered monthly to your inbox with all my behind the scenes news, latest posts and giveaways exclusive to my subscribers.