fbpx Skip to main content
Tag

responsive web design Archives - Garrison Everest

responsive web design

10 Secrets to better home page design

10 Secrets To Better Home Page Design

By Web Design

With only 3-5 seconds to capture your website visitor’s attention, your company’s home page is one of your most important pieces of brand real estate.

If you’re a business owner (or marketer), knowing the secrets to effective home page design is critical to success in the realm of inbound marketing. In this article, I’ll give you the recipe that will help you design a better home page that will decrease your bounce rates, improve customer conversions and improve your brand’s digital impression. 

To begin, there are 5 overarching secrets to building a better home page.

1. Cognitive fluency
home page web designCognitive fluency is simply a measure of how easy it is to think about something, and it turns out that people prefer things that are easy to think about to those that are hard.

Google researchers found that users judge a website as “beautiful” within 1/50th – 1/20th of a second. “Visually complex” websites are consistently rated as “less than beautiful” as their simpler counterparts.

Let me an illustrate an example. Have you ever gone on a blind date?

As soon as you open the door — you’re able to within 1/50th of a second determine if the person standing before you is attractive or not. 

Websites work a lot like a blind date. You punch in a keyword not knowing what to expect until the page loads—and when the page finally loads—you either bounce away in horror or you pleasantly choose to stay—gazing at the beautiful layout in front of you. 

When designing your home page, simple = beautiful. 

2. Simple navigation
Simple navigation keeps the home page clean and gets your visitor to where they want to go quickly. Try to keep your navigation to an absolute minimum. Design your website’s architecture in a way that doesn’t detract from your overall goal. Notice the examples in this article. The examples shown have 3-5 navigation topics max.

Website Homepage Design3. Relevant color scheme
Keep your colors appropriate and in context to your industry. Do you need a dark color palette to convey luxury—or a more lighthearted palette to show approachability? Know what colors are used in your industry for maximum appeal. Find out more about your buyer persona to get an understanding of what will resonate with your target audience.

4. Streamlined next steps
What do you want your customer to do when they are on your website? Download an ebook? Contact you? Map out what you want them to do next. Don’t leave your visitor hanging. Think for them and move them through the buyer awareness stage using strong call to actions (CTA’s).

Now that you know the 5 overarching factors for a successful home page design, now you need to know the 5 elements and how they are implemented.

5. Logo

Your logo design serves as the anchor point for your website and communicates your company’s credibility and trust. Eye patterns start from top left and go down toward the right. An interesting and professional logo makes a great first impression. 

Website-Homepage-Design-Saucony6. Main image = main message

Next is your main image with the main idea that you want to communicate. Your message should be short and succinct. Be clear, not clever. Your imagery should position your brand accordingly and be tied to your main message. The image should be creative and eye catching. This is your chance to “stick” your visitor to your site. If someone hits your site and immediately bounces off, it’s because your message was not clear and they found your site unexciting or irrelevant.

7. Service offerings

Scrolling down—you should now tell your visitors what you offer and how you can help them. Make sure the text is written for them. By accurately defining your buyer persona, you’ll be able to talk their language in a way that grabs their attention and presents the impression that you understand them. This works in your favor to convince them you’re the company for the job.

8. Why work with you?
Next, you want to present the reasons why someone would want to work with you. These should be the top 3-4 things that separate you from your competitors and distinguish your brand. Make the reasons compelling enough and link to the areas of your website for more information and to track engagement.


Website-Homepage-Design-Hubspot9. Social proof
People tend to follow people. By showing social proof that people like you on Facebook or follow you on Twitter can lend real validity to your above claims. If possible, showcase real customer testimonials with faces. This is the icing on the cake for presenting a credible narrative by showing others who you’ve helped.

10. Load time & responsiveness
Users want sites that load fast and that are responsive (iPad, iPhone and Desktop). By keeping your content simple and optimizing your images correctly you can decrease load times. If you’ve hired a web design company to build your site—ask them about load times and if they use content distribution networks (CDN), browser caching and if they will minify javascript and CSS for a faster loading home page. Below are some interesting stats on load times according to MOZ.

  • If your site loads in 5 seconds it is faster than approximately 25% of the web
  • If your site loads in 2.9 seconds it is faster than approximately 50% of the web
  • If your site loads in 1.7 seconds it is faster than approximately 75% of the web
  • If your site loads in 0.8 seconds it is faster than approximately 94% of the web

See how your website stacks up at: Pingdom

In conclusion, knowing the secrets for better home page design will ensure lower bounce rates and attention grabbing messaging you need to move your customer further down your sales funnel for customer conversion. These factors when taken into account will turn your website into a revenue generating machine.

Responsive-Website-Planner
FREE DOWNLOAD: Website Design Planner

A time saving guide on how to plan an effective website that meets your online business and branding goals.
In this planning guide, we help you and your team think through the critical points of the website design process that helps you form a specifications document to obtain accurate pricing

Download Now!

 

 

 

Brand Development Inbound Marketing Consultant

By Josh Claflin, Brand Development, Inbound Marketing & Creative Strategy
Josh helps brands who are struggling to develop their brand; grow, stabilize or increase profits through their websites; increase revenue through online channels and enter the digital era of marketing.

 

Responsive Web Design

5 Best Practices for Responsive Website Design

By Responsive Web Design, Web Design

If I had to guess, I would estimate that over half of all U.S. businesses have yet to change their website to a responsive web design format (viewable on smart phone, tablet and desktop).

What most brands don’t know is that 50% of mobile phone users, use mobile as their primary internet source. This statistic will only continue to grow in the years to come. If your business has not made the move to a responsive website design format yet, here are a few best practices and things to keep in mind when you do.

What is Responsive Design?

Responsive means that it fits on three screens: mobile, tablet and desktop. Responsive web design is accomplished by CSS (Cascading Style Sheets). CSS is what developers use to design a webpage. From a marketer’s perspective it’s like a branding guide for your website. It tells the browser how to interpret the HTML that contains the CSS. Why does this matter? It means that if creating a mobile-specific website or app is out of budget — you can still deliver a great experience through responsive design.   

Here are a few key statistics you should know:

  • 91% of all people on earth have a mobile phone
  • 56% of people own a smart phone
  • 80% of time on mobile is spent inside apps
  • 72% of tablet owners purchase online from their tablets each week
  • 50% of mobile phone users, use mobile as their primary Internet source

1. Start with Your Brand

Before any coding takes place — start with your brand. As more and more competition enters the marketplace (domestic and global) it seems darn near impossible to stand out. Having clear brand differentiation in the marketplace will be one of the main ways to attract customers, close leads and delight customers.  When people hit your website, the first impression must reflect your brand’s persona, message and promise to the customer. Your brand must answer these four questions: Who are you? Who needs to know? How will they find you? Why should they care? Read more about brand development here.

2. Create Buyer Personas

Once you have your brand tuned up — begin by creating an architecture based on who your ideal customers are. Get really granular on who they are and write your content for them specifically based on these key points:

  1. How does my product or service solve my customer’s problems?
  2. What can I do to add value to their visit?
  3. How does my brand align with their personalities and expectations?
  4. What is the tone and voice I must take to communicate clearly to them?

By basing your content on your buyer persona your content will keep them engaged and add value. Wrap this content around a clear and intuitive navigation to help them find the information quickly. The old rule in website design: “Don’t make me think.” still rings true today.

3. Content Strategy and Perception

Your brand must provide a credible and authentic impression to your visitors. Today, people want more visuals and less text on the home page and secondary pages. Communicate your offering simply and effectively.  With 60% of the sales cycle over before a visitor even contacts your sales person — your website must engage your visitors and make the sale for you.  According to Google’s Zero Moment of Truth study, consumers consult an average of 10.4 pieces of content prior to making purchase decision. Make your content count.

4. Optimizing for Search Engines

To be indexed by Google, Yahoo! and Bing — use the following criteria to create your page structure:

  1. Accurate keyword titles and descriptions
    Use the Google Trends tool or MOZ to target the right keywords.
  2. Fast loading pages
    Optimize your images and use CSS to speed your site’s visual elements. Your website must load less than 2 seconds or people will abandon your site.
  3. A flow of fresh and relevant content via blog
    77% of all Internet users read blogs. By blogging on a regular basis you will receive 55% more website visitors. By creating interesting content, you increase your chances of getting back links from other credible websites which passes on “link juice” to your site, increasing your rankings. You also will have your content tweeted, shared or liked.
  4. Low bounce rates
    If you’ve done the above 3 points, you should see lower bounce rates. 50% or less is excellent, 60-70% is typical, 70-80% is poor, 80%+ is very bad. When Google sees sites with high bounce rates, it typically means the site loads slow, is a spam site or the keywords are not representative to what the site is about.
  5. Social proof
    If you haven’t embraced Facebook, Twitter, LinkedIn or Google+ now is the time. Consider the following shocking statistics:
  • 4.2 billion people use their mobile device to access social media sites
  • The population of the United States is 313M
    • There are 245M internet users in the United States
    • 56% of Americans have a profile on a social networking site
    • 166M or 52.9% of all internet users are on Facebook
    • 47% say Facebook has the greatest impact on purchase behavior
    • 54% of Facebook members have used the social network via a phone
    • 22% of Americans use social networking sites several times per day
    • Facebook is the most addicting of the social networks
    • 76% of Twitter users now post status updates

By adding social proof to your site you humanize your brand and allow your users to share its content far and wide.

Professional Responsive Web Design Company5. Design for Responsiveness

Now that you have some directions on how to go about planning your responsive website design here are a few things to keep in mind when design and coding time comes.

The screen size is the diagonal measurement of the physical screen in inches, while the resolution is the number of pixels on the screen. The resolution is displayed as width by height (i.e., 1024×768). Also, while desktop and laptop displays are in landscape (wider than tall), many mobile devices can be rotated to show websites in both landscape and portrait (taller than wide) orientations. This means that designers and developers, in some cases, must design for these differences. Make sure to design each view to see the differences in each and adjust accordingly:

  • Your website accomplishes responsiveness by scaling the images and text by percentages of the screen instead of fixed widths
  • Create 10px margins on each side so that the design doesn’t look crowded
  • web designImages should fill the whole screen and scroll evenly down the screen
  • Remove any non-essential content
  • Watch for breakpoints. As the site scales, make sure the screen adjusts at  the right resolution to keep the design and layout in tact
  • Allow compression of your scripts and CSS to make the site load faster on mobile devices that are often on a 3G or low-speed connections
  • Create an Apple touch icon (129 x 129) so people can save to their home screen
  • Most people prefer landscape (59.8%) over portrait (41.2%) (Source: Apple Insider)

Google announced starting April 21st, 2015—your website’s mobile-friendliness will now be a ranking factor. (Source: SEMPOST) This means if your website is not responsive and mobile friendly, you will loose out on potential ranking factors. Find out if your website is mobile-friendly.

  • Desktops & laptops 1024×768 and higher
  • iPhone 5: 1136×640 4S: 640×960 3GS: 320×480
  • iPad First & second generations: 1024×768
    Third generation: 2048×1536
  • iPad mini 1024×768

Android phones & tablets
Most phones are 320px wide or 360px wide, and most tablets are 800px wide. When designing for them, however, it is typical for developers to break them into the following groups based on their Density-independent pixel (dp), which is the minimum screen size.

  • Small screens: 426dp x 320dp
  • Normal screens: 470dp x 320dp
  • Large screens: 640dp x 480dp
  • Extra-large screens: 960dp x 720dp

In conclusion, by making your site responsive, you now have the ability to tap into mobile traffic that you otherwise were missing out on. As companies like Google, Apple and Microsoft continue to innovate new devices — businesses will need to keep up to speed on the latest trends to ensure they are maximizing their online potential.  

Responsive Website Design Company Planner
FREE DOWNLOAD: Responsive Website Design Planner

A time-saving guide on how to plan an effective website that meets your online business and branding goals.
In this planning guide we help you and your team think through the critical points of the website design process that helps you form a specifications document to obtain accurate pricing.

 

 

 


Brand Development Inbound Marketing Consultant

By Josh Claflin, Brand Development, Inbound Marketing & Creative Strategy
Josh helps brands who are struggling to develop their brand; grow, stabilize or increase profits through their websites; increase revenue through online channels and enter the digital era of marketing.