livebooks blog

If you’re in the process of building a website for your business or redesigning your website, the homepage is typically the first place you start with.

Your homepage needs to provide visitors with a quick rundown of your business; think of it like your elevator pitch. Who you are, what you do, and why they should be interested. It’s important to sum up the important parts of your business and to “hook” the users so they want to keep scrolling and check out every page.

Need a little guidance? Here’s a brief checklist of the top things every website homepage should include.

Logo

First and foremost, give your website a piece of your brand identity with your logo. Your business logo needs to live at the top of your homepage in order to stay top of mind to your visitors.

Logos let consumers know more about you and gives them something to remember and identify your brand with down the road, so it’s an essential part of your homepage that shouldn’t be overlooked.

Give your brand identity and website some thought to figure out the best placement for your logo — maybe it’s the top corner, maybe it’s front and center. Either way, make sure it leaves a lasting impression on your website visitors.

Introductions

This is your chance to quickly communicate to a new visitor who you are and what you do. While you can save the details and backstory for your About page, the intro on your homepage should hone in on exactly what you want your brand to represent — this is where your tagline or brand statement should go.

Include a heading and a subhead to give consumers a bite-sized idea of what your business is, who it’s for, and what they can get out of it.

Navigation

Your website should provide a good user experience, and this is especially important when designing your navigation menu. The navigation on your homepage should feel intuitive; it should flow easily, guide visitors from page to page and take them where they need to go.

The navigation bar is often the first place users check out so they can get a feel for what the rest of your website has in store for them. Be strategic when thinking about how you want your navigation bar organized.

Products/Services

You will likely have a separate page that lists your products or services and into more detail, but the homepage is your chance to highlight a few of them.

If you have an online shop, this is where you can feature your recent products, a new collection, or seasonal picks. Use this page to draw them in and give them a sneak peek of your product offerings.

If you have a service-based business, use the front page to talk a little bit about each service you offer, and link it to the page that goes into more detail.

Contact Information

Once potential customers or clients have scrolled through your homepage, have a solid idea of what your business is, and are attracted to what you offer, they will be looking for a way to contact you.

Whether you have a brick and mortar address or you solely operate online, include your contact information on your homepage.

As a business, the last thing you want is for a potential client or customer to struggle to find a way to reach you. Make it easy for the user by having a space on the homepage clearly dedicated to your contact information or including a button that links to your contact page.

Start Designing Your Website Today!

liveBooks offers mobile-responsive, customizable website templates for creative professionals and businesses worldwide.

The best part? Our website designs are ready for search engines and look great on any mobile device!

We’ve also got a top-notch support team who’s here to help you every step of the way. Start for free here.

With liveBooks Design Editor, you can make edits to your website easily! With the back up design feature allows you to keep your changes saved and use as you please. Before we go deeper into the array of possibilities this enables, let’s go on a quick tour of these three little buttons that make design experimentation easy.

Go to your design editor. The buttons are located on the bottom of your website preview window.

1. Back up Design: This is your Save button. When you find a design that speaks to you, click that button, give your saved design a name and Save Backup. (Note: Saves do not overwrite. Saving your designs under the same name will result in multiple saves with the same name.)

2. View Backups: This is where you’ll find all your saved designs. Click on the one you want to use and the editor will load all the changes associated with that save.

3. Reset to Published: if all else fails and you are not satisfied with any of your design changes, there’s always the option of switching back to your published design. In order to have full control on your progress, our advice is to publish your website only when you’re completely happy with the outcome.

Best case scenario: You created a design that speaks to your needs and aesthetics. That’s great! All you need to do now is publish your website and start sharing your new look.

Worst case scenario: You’re stuck. Nothing looks like you imagined it would, the colors you chose are not you and wish you could go back to your previous design. There are two ways to go back: 1) Load a previous save of your backup design. 2) Choose to go back to the published version of your website.

There’s plenty room to play around on our design editor: from major layout changes, to different fonts and colors, gallery layouts, text alignment and padding are just a few of the many changes you can make. And while choosing a design and sticking to it is the best approach for a familiar feel that makes your returning visitors comfortable, there comes a time when you feel change is greatly needed for your online presence. It’s a time to experiment with the design editor to see the many features it provides.

We encourage clients to use this feature for marketing campaigns they wish to run on their website. A campaign’s visual appearance might differ from your overall design, depending on your strategy. In this scenario you can adjust all design settings to match those of your campaign. Once the promotional period is over, you can easily go back to your initial design, and the next time you wish to run the same, or similar, campaign, all you need to do is load your saved design and publish it.

Seasonal design is something you might like but weren’t entirely sure how to do without permanently changing your website design. A clean, colorful look with a grid type gallery is very appropriate for summer, while a full bleed home page image and a custom mistletoe background for your navigation bar brings the holiday spirit to everyone who visits your website. All these changes and reverting to your original design are possible on the liveBooks platform thanks to those three little buttons on the bottom of your design screen.

So, go on, take a moment to experiment! Make changes you’ve always wanted or changes you don’t think you need just for the fun of it. You might be surprised at the outcome, you’ll definitely be more confident on knowing how your website design can work for you and will surely give you new ideas of how to use design to grow your business. This playground opens with every new website you create.

Ready to check out the liveBooks editor? Sign up for a free 2-week trial today!

Within the last few months, Google has announced that it will be changing its algorithm to rank mobile-optimized websites higher than ones that aren’t as mobile-friendly. This will be taking effect next month, and if your business’ website isn’t prepared, you could see a significant drop in website traffic.

And this isn’t just a big issue for SEO: more than half of all web users today are browsing websites on mobile devices. This means your overall user experience for your online customers matters now more than ever before.

If you aren’t sure if your website is up to the proper standards, here’s how to check for mobile-responsiveness.

First: Understanding Mobile-Friendly Design

Have you ever stumbled across a website on your phone or tablet that looks like a tiny version of what it looks like on desktop? Many websites that are not mobile-friendly require users to “zoom in” (as if you were expanding an image on your phone) in order to read information or make the buttons appear big enough to click on with a finger.

In contrast, websites that are mobile-friendly or responsive have a unique design that fits well on smaller devices. The text will appear at an appropriate size, the buttons are big enough to select, and the navigation menu is clear and easy to use without you having to search for it.

Using Google’s Test

One of the easiest tools available out there is the Mobile-Friendly Test provided by Google. Simply enter your website’s URL and the test will be completed within a minute or two.

Then you’ll see “a screenshot of how the page looks to Google on a mobile device, as well as a list of any mobile usability problems that it finds.”

If your results say that it has no loading issues and is mobile-friendly, you’re good to go!

Or Try it For Yourself

Another way to test for mobile-responsiveness is to visit the website on your own mobile device(s).

Try loading your website on your iPhone or Android device and see how it functions. Can you explore the website easily? Does it load quickly? Is the text legible?

You might even double-check by borrowing phones or tablets from friends or family to see how your website appears on different devices and browsers.

What to Do if Your Website Isn’t Responsive

Whether you had less-than-stellar results on Google’s mobile test or you saw for yourself that your website is indeed not mobile-friendly, no need to panic!

Instead, work on tackling the problem at the source. Start your free trial on liveBooks today! liveBooks offers mobile-responsive, customizable website templates for creative professionals and businesses worldwide.

The best part? Our website designs are ready for search engines and look great on any mobile device!

We’ve also got a top-notch support team who’s here to help you every step of the way. Start for free here.

Piracy and image theft can be an issue among content creators and most of the time it’s only one right-click away. One way of ensuring ownership on your images is adding watermarks on each item before uploading it online. While this is a common practice among some artists, we understand you may be hesitant to use them. Here are the pros and cons of using watermarks on your online portfolios.

The easiest way for someone to take your photograph is to right-click on it and save the image on their computer or to right-click and copy the image address. But what if we could disable right-clicking on all your images?

The way to disable right-clicking on liveBooks requires utilizing the HTML content block feature. And it’s easy! All you have to do is copy and paste a HTML snippet that will be provided in this article into a HTML block from your content editor and publish that new change. You can disable right-clicking on images on your entire website or on specific pages.

Follow these instructions to disable right-click on images throughout your entire website:

1. In your Content editor, under Global Content, select Footer. 
2. Create an HTML content block within the footer.
3. Copy and paste this HTML snippet to the HTML content block you created: <script type=”text/javascript”>
   //<![CDATA[
   /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   Disable context menu on images by GreenLava (BloggerSentral.com)
   Version 1.0
   You are free to copy and share this code but please do not remove this credit notice.
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
   function nocontext(e) {
   var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
   if (clickedTag == “IMG”) {
   alert(alertMsg);
   return false;
   }
   }
   var alertMsg = “Image context menu is disabled”;
   document.oncontextmenu = nocontext;
   //]]>
   </script>
4. Save, publish and you’re done!

If you wish to only add this feature to a specific page, follow these instructions:

1. In the Content editor, click into the Page you wish to add this feature to.
2. Create an HTML content block to this page. 
3. Add the following HTML snippet to the HTML content block you created: <script type=”text/javascript”>
   //<![CDATA[
   /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   Disable context menu on images by GreenLava (BloggerSentral.com)
   Version 1.0
   You are free to copy and share this code but please do not remove this credit notice.
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
   function nocontext(e) {
   var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
   if (clickedTag == “IMG”) {
   alert(alertMsg);
   return false;
   }
   }
   var alertMsg = “Image context menu is disabled”;
   document.oncontextmenu = nocontext;
   //]]>
   </script>
4. Save, publish and you’re done!

Now when you or anyone else will right-click your images, a notification pop-up will show up instead. It will look something like this, depending on the operating system installed on the visitor’s computer, phone or tablet. (For phone or tablets, these chances affect the action generated by long pressing on your images.)

The default message when trying to right-click an image is ‘Image context menu is disabled’, but you can replace it to whatever you like in the code above. If you prefer not to show the alert box at all, just delete this portion of the code:

alert(alertMsg);

return false;

}

}

var alertMsg = “Image context menu is disabled”;  

Our support specialists are happy to help you make any changes you want on your liveBooks website. Book a call, send an email or chat directly from our website!