logo

<< See all posts

Tag: Best practices

08
Jul

What Would Jeff Do?

Jeffrey Haddock is our favorite web designer. Sure, there are a lot of pretenders (haters gotta hate right?). You probably know a guy who used Squarespace to build a page. Well, we know a guy who dipped a Twinkie in coffee and called it tiramisu. Anyway, there’s pretenders, and then there’s Jeff. He’s the cat’s meow, the funky cheese, the top-shelf-gotta-see-it-to-believe-it dawg. Well, at least he is when it comes to web design.

We asked him to talk about design patterns that everyone uses but tend to get wrong. In other words, when it comes to web design, what would Jeff do?


Here are six web design elements you might be using improperly but, with a little Jeffrey-love, could turn right around.

1. Animated Icons

Simple use of animation on a website, whether it be icons, infographics, navigation, can be effective at quickly gaining attention or directing your visitors. Below is an example of how Google creates clean, subtle, sexy icon animations.

Source: Delightful Details

 

2. Repeating Backgrounds

Again, subtlety is what we’re going for. If you need to use a repeating background (which, quite possibly, you don’t), we recommend checking out subtlepatterns.com – a library of free, repeating patterns.

Screen Shot 2015-07-06 at 10.28.37 AM

3. Fixed Nav

Simple, and always there for your convenience.* By fixed nav, we mean as you scroll down the webpage, your navigation doesn’t move, allowing you to always quickly access other pages. If your nav lacks a little spice of life, try fixing it up! (Get it??)
*Keep responsive design in mind.

4. Borders

The keyword in this blog post is going to be “subtlety.” Small doses of these 6 design elements can go a long way in a website design. Today, you’ll see a lot of “Ghost Buttons” on websites. These buttons rather than being a literal button, are created with nothing but a border outline around the text. You can see one here 🙂  thekestrel.co

5. Drop Shadows

No, not orange, teal, blue, yellow, and green drop shadows like your grandma used to use. We’re talking about subtle shadows that create a realistic sense of appropriate depth (when necessary.) Examples below include a clip from Google’s Material Design guide (highly recommend reading the whole guide if you’re into that kind of thing) and of course, Apple.

Google’s Material Design: www.google.com/design/spec/material-design/introduction.html

Screen Shot 2015-07-06 at 2.01.55 AM

Screen Shot 2015-07-06 at 2.17.53 AM
Screen Shot 2015-07-06 at 2.19.09 AMScreen Shot 2015-07-06 at 2.20.42 AM

 

6. Gradients

Saved the best for last. We all know the DOUBLE RAINBOW gradients that our friends used on their logo when they created their own business. But gradients with complimenting colors can set the tone of a website when done right. They can be used to capture particular emotions from your visitors.

Apple frequently uses them well (another beautiful example is a digital agency out of Morocco called Agadir). They use full screen gradually changing gradients as you progress through the site. They won a couple web design awards, so if that’s not a free pass to go (subtle) gradient crazy on your website then what are we even talking about?

Screen Shot 2015-07-06 at 2.27.20 AM
www.symodd.com

 

Most of these improvements can be summed up in the maxim Jeff lives by – “Less is always more.” If you insist on having a go at designing your website, for the love of all things beautiful, please follow Jeff’s basic rules. Even better, give us a holler and let’s talk about getting your new website professionally designed and built by the team at the Kestrel Co. Unless you’re specifically wanting a Looney layout, you’ll be happy you did.

30
Jun

Solve your mobile woes with responsive web design

Picture this: a friend shares a link on your favorite social media platform. Intrigued (or just bored and otherwise doomed to scroll until your thumb falls off), you click. You wait a brief moment for the page to load…and your heart sinks.

Everything is tiny, zoomed out, illegible.

Determined to read whatever it was your friend felt compelled to share, you pinch to zoom in, pan around, then pinch to zoom back out a little. After 10 seconds or so, you’ve got the text centered on screen and big enough to read. Feeling victorious, you plow on.

A couple paragraphs in, you see the author has linked to something relevant you’d like to read, so you tap that link…or at least you try. But your fat finger misses, and all of the sudden you’re somewhere else entirely.

You hit the back arrow in your mobile browser, but when the page reloads, you’re right back where you started: tiny, zoomed out, illegible. Frustrated, you give up and head back to the aforementioned social media platform, never to return.

 

Static sites makes for unhappy customers

If you think you’re alone in this experience, you’re certainly not. A recent Google study found that “96% of consumers have encountered sites that weren’t designed with mobile in mind” and “48% reported feeling frustrated and annoyed” when this happens.

headdesk

That frustrating and annoying experience is the result of something called “static web design.” It’s the way most websites were designed for years and years, until the mobile phone came along and tore up the web design handbook.

To be more specific, “A static page layout […] uses a preset page size and does not change based on the browser width.”

Static websites are perfectly fine when viewed on most desktop computers, but the problem arises when you try to view those same pages on a tablet, mobile phone, etc.

In an effort to solve this problem, a few enterprising companies began building mobile-specific versions of their sites (think mobile.nytimes.com, for example). Many of these are still around today, and they do a fine job. However, in most cases, this requires two completely separate code bases and content management systems. With this setup, mistakes are easily made and headaches abound.

So, how do we solve this problem?

 

Responsive web design to the rescue!

Enter responsive web design, or RWD for short. It’s the magic pill you didn’t know you needed until now.

What exactly is this miracle cure? Smashing Magazine defines RWD thusly:

“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.”

In layman’s terms, it means that no matter the size of your device (be it a desktop computer, a tablet, a mobile phone or even a smartwatch), the website will look great. Text is big and legible, photos take up the appropriate amount of space, and there’s no pinching to zoom or panning required. This, folks, is web utopia.

responsive web design yes and no

Not only are responsive web design sites easier to use, they’re good for business.

According to that same Google study referenced above, 74% of users visiting a mobile-friendly site said they were “more likely to return to that site in the future” and 67% of users said “when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service.”

Additionally, if you have a site that isn’t mobile-friendly, you could be sending traffic away from your business and into the waiting arms of your competitors.

dr-evil-crying

To quote Google again:

  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly

 

Google lays down the law

Knowing how deeply frustrating these static sites can be for mobile users, Google has begun penalizing websites that don’t meet its mobile-friendly standards. The search giant announced this change last year, and as of April 21, 2015 is offering priority to mobile-friendly websites when users search on a mobile device.

“A lot of small businesses are going to be really surprised that the number of visitors to their websites has dropped significantly. This is going to affect millions of sites on the web,” Itai Sadan, CEO of website building company Duda, told Business Insider.

Is your current site mobile-friendly? If it wasn’t built (or redesigned) in the past five years or so, I’m guessing not. You can use this tool to find out for certain.

In this new reality, here’s how a mobile-friendly site will appear in Google’s search results:

mobile-friendly

That Mobile-friendly label lets mobile searchers know they will receive a good experience when they load the page, and it also means the page will appear higher in search results.

If you’re a business owner trying to drive traffic to your product, this matters quite a bit.

According to an Advanced Web Ranking study, 71.33% of searchers click a link from the first page of Google’s search results, whereas only 5.59% click links on pages two and three.

Additionally, “the first 5 results account for 67.60% of all the clicks and the results from 6 to 10 account for only 3.73%.” That’s a HUGE gap. You want, nay, you need to be among the top results.

ranking-position-CTR-2

 

How we can help

When you choose the Kestrel Co, you’re guaranteed not only a beautiful, hand-crafted website, but also one that is built from the ground up using responsive web design priciples. No tiny text, no pinching or panning. Everything just works. Desktop, tablet, mobile and beyond.

For your customers, this means a better experience across all devices. For your business, this means happier customers, better search position, more clicks and more revenue.

Coupled with the SEM strategies Warren mentioned last week and the fresh content on the blog Ryan goaded you into starting, you’ll be at the top of Google’s search results in no time. Your customers will thank you, and you can feel better knowing that there’s one less frustrating static site floating around the internet.

thumbs up