mobile responsive Archives - Nancy Fields Graphic Design

Does your website banner extend across the top of each page?

Sorry to break the bad news, but they just look old and outdated. That’s because long, horizontal website banners don’t look good on a mobile device, and mobile is what’s driving design these days.

Quick and easy web header banner check

To see what your website header banner looks like on an iPhone 5 — without leaving your desktop…

Enter your URL in Chrome browser. If you don’t have Chrome installed click here to download.
Right-Click (Mac = Control + Click) anywhere on the web page
Choose Inspect
Near the top left click on the little phone/tablet screen icon
View your site in the browser window

Reuse & Recycle

Still love your web header banner? You don’t have to abandon it. Instead…

Tip One

Use it at the top of your e-newsletter to build your brand like Lacey did

Tip Two

Replace your current WordPress theme with a mobile-friendly version that has a banner on the home page. Here are three examples of themes from StudioPress that accommodate a long, horizontal header banner and still pass the mobile-friendly test, plus look fresh and modern.

When viewed on a mobile phone or a tablet, does your website look exactly like the desktop version, only smaller?

Or does it look different on each device, like this theme from StudioPress?

If your site looks identical on each device it’s time to change!

Over 50% of all online searches are done on a phone or tablet. If visitors can’t easily read your site, they will be gone…for ever. All the work you put into your site, and all the hours you spent creating your free offer and setting up your forms for list building will go down the drain.

Your time is important. Besides, your perfect customers need you, and you need to give them a good user experience so they’ll want to read your content and keep coming back.

Is your website is mobile-friendly?

It’s easy to check. Click on the link below and enter your URL (i.e. http://www.yoursitenamehere.com). You’ll learn if it’s mobile friendly, plus receive tips on how to fix it, if your site failed the test.

https://www.google.com/webmasters/tools/mobile-friendly/

How to make your site mobile responsive

The Easy Way

If you have a WordPress site you can simply change the theme to one the is already mobile responsive.

How to choose a mobile responsive theme through your WordPress Dashboard:

Dashboard —> Appearance —> Themes —> WordPress.org Themes (1-4 below)

Click Feature Filter button (5 below)

Under Features choose Accessibility Ready and Flexible Header (6-7 below)
Click Apply Filters (8 below)
Choose a theme you like!

Easier Way

Chose any theme by StudioPress. That’s what I do.

StudioPress themes are perfect for business, plus they’re all mobile responsive.

The Harder, More Expensive Way

Call your website developer, or the person who built your site, and ask them to make your site mobile responsive.

Depending upon how your website was built, your developer may need to create 3 new designs:

one for mobile
one for tablets
one for desktops

Your web developer will also be adding code “under the hood” of your website, called a media query. It will tell your website to display your web page in different screen resolutions. The version your visitor sees will depend on whether they are using a mobile phone, tablet, or desktop.

That’s a lot of work…and a big expense.

My recommendation

If you’re in business get a mobile responsive WordPress website. They’re economical plus you can maintain them yourself, which will save you lots of money in the long run.

Are Website Header Banners Dead?