Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, 20 November 2015

How to Safely Redesign Your Website Without Destroying Your Business

Website redesigns are a scary thought for many marketers and executives. Propose a website redesign to your CEO and you may get a response like:
“Why do we need a redesign? What we have now works great for prospects and customers. Best not to fool around with it.”
“If it ain’t broke don’t fix it.”
“Our conversions are through the roof right now. Why jeopardize that just for the sake of a refresh?”
Or perhaps, you’re the one saying that to the HiPPO (Highest Paid Person’s Opinion) who is eager to get a website refresh.
No matter which side of the table you’re on, your hair stands on the back of your neck when designing and launching a redesign. A few of your concerns may be:
  • What about bugs?
  • Will this work in all browsers?
  • How will this affect page load speed?
  • What’s the impact on conversions?
  • How will this affect our SEO?
  • What if conversions stay the same, but we send the wrong message and bring in the wrong leads?
Putting these worries aside, brands need to stay modern and relevant. Redesigns have to be done (imagine if Facebook didn’t change their design – would they still be as popular?) and they should be executed carefully.
Here’s a few steps to ensure your redesign goes smoothly:
  • Know Your Audience – Who is your target market and who are your customers? Are they salespeople? C-Level executives? High schoolers? Figure that out and create a website for them. This is a lot of work. You have to know how these people work, what their lives are like, understand their culture, know what appeals to them, etc.
  • Take Advantage of User Testing – Tools like UserTesting.com provide a lot of solid feedback. You’ll hear from someone outside your own company and they will not hold back on honest feedback. You can even get five minutes for free with Peek. Try it – there is no excuse.
  • Post-launch Announcement – Your loyal visitors may come back after the redesign and wondered what happened. Let people know of the redesign and give a little backstory about why you did this. Make the story exciting, avoid being bland. “It was time for a redesign” is boring. Tell people what’s new with the design, any UX changes, and how it benefits them. When oDesk changed their name to UpWork, the CEO of the company wrote a blog post explaining everything and they even held a webinar where they explained the changes and answered any questions. You can use an Engagement to notify all users and link to your announcement.
  • Gather Post-launch Feedback – Never stop gathering feedback. UseQualaroo and UserTesting to gather feedback. Iterate (if necessary) on your new design. Make sure any future A/B tests don’t impact the consistency of the new design.
Today’s infographic comes from Neil Patel of Quick Sprout. It outlines how you can redesign a site without losing traffic or conversions. Let us know what you think.
How to Redesign Your Website Without Losing Traffic or Sales

Courtesy of: Quick Sprout

To view the article source Click Here

Tuesday, 20 October 2015

5 Things Small Business Owners Should Know About SEO Friendly Web Design

As a small business owner getting ready to build your first website or redesign your existing one, you might wonder what you should be considering in terms of making your web design search engine friendly.
There are lots of things to take into account, but here are the five key things that you should know about SEO friendly web design and how it can benefit your visitors, too!

1. It Needs to be Responsive

For small businesses, especially local ones, having great rankings in mobile search is incredibly important. Why? For starters, 50% of consumers who perform a local search on mobile devices visit a store within a day of their search. What’s even more exciting is that 78% of mobile searches for local business lead to offline purchases.
If you want to do well in mobile search results, you will want to have a mobile-friendly design. Responsive design is the easiest to aim for because it offers a similar user experience to desktop visitors, tablet visitors, and smart phone visitors.
responsive design is the easiest solution for mobile-friendly web design
With responsive design, you don’t have to create multiple pages for different screen sizes. Instead, you create your website pages as you would normally, and the responsive theme or template will make sure it reshapes itself to fit on any screen size.
As far as platform goes, you can choose to run your website with static HTML template files with responsive design or content management systems with responsive themes. WordPress is one of the most popular content management systems that allows you to create a static website, blog, e-commerce store, forum, or anything else you want to run.
WordPress has also been widely respected as the best platform for SEO, as noted by Google’s former representative Matt Cutts. Combined with a responsive theme and an SEO plugin like WordPress SEO by Yoast (which SEJ uses), it is a surefire winner for search.

2. The Important Parts Need to be in the Text

While search engines are able to crawl more types of media, text has always been the best option for search optimization. This is why everyone is talking about content marketing – you need written content for every page of your website.
Your goal should be to include text on every page of your website. Even a small amount of text, such as a 150-word product description, is better than none. If you post videos or audio, include a text-based transcription on the same page.
Also, don’t forget the text needed for each page’s SEO title (50 – 60 characters) and meta description (150 – 160 characters). Both of these elements should be unique and should include main keyword phrases the page is to be optimized for.
A common mistake many local businesses make on their website is including important information in images rather than text. Google Webmaster Guidelinesspecifically states to “Try to use text instead of images to display important names, content, or links. The Google crawler doesn’t recognize text contained in images.”
This tip is especially important for local businesses that put their address and phone number in header or footer images. Either take them out of the images or include a text version of them elsewhere on your website. In addition to being beneficial for search crawlers, it is helpful to visitors on mobile who want to click-through and call or copy and paste your address for directions.
And last, but not least, get some great text in your URLs. Make sure your website is set to show yourdomain.com/your-page-name-with-keywords versus yourdomain.com/p=?122. This helps boost the keyword optimization for your page and helps visitors know what content is going to be on the page when they see the link without additional reference.

3. You Must Optimize Your Images

When you do use images, you can optimize them with text for better search visibility. This not only allows you to further optimize your product page for a specific keyword phrase, but it gives your photo the chance to appear in Google image search results.
There are a few ways to optimize your images with text. First, you can rename your image’s filename to include specific keywords. For example, instead of uploading a picture on an air conditioning repair service page as IMAGE0001.jpg, change it to phoenix-air-conditioning-repair-services.jpg. This puts your page’s main keywords in the filename of the image.
Next, use all of the attributes HTML has to offer for inserting an image on the page. Continuing with the same example, you would have the following.
HTML attributes fro inserting images
In the above HTML code, you have alt text, which will be shown if the image cannot be loaded on the page or if the visitor is using a screen reader. The title text will be shown when someone hovers over the image.
Optionally, create a caption directly beneath your image that explains what it is. This should be one short phrase or sentence that shows how the image is relevant to the page, such as Bob’s AC & Heating offers affordable air conditioning repair services in Phoenix and surrounding areas.

4. You Need a Clear, Text-Based Navigation Structure

Another rule straight from Google Webmaster Guidelines is to ” Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.”
Think of your website’s organization and plan your link structure accordingly. Depending on the number of pages your website has, this could be as simple as creating a main navigation bar linking to the main five pages on your website. Or it could be as complicated as coming up with categories, subcategories, and the pages within each.
clear navigation structure
For user experience purposes, you should not go more than three levels deep with your links. Take Amazon, for instance. You already see top products when you click into a main category page, with the option to further limit the results by subcategories.
In other words, don’t be the website that makes visitors go from the home page to a category page, then a subcategory, and then another subcategory before getting to what they want.
In addition to clear navigation for your users, you should create simple text links in the footer of your website for the main pages on your website. This ensures that search crawlers (and visitors) can’t miss them.
text links in the footer of a website

5. Don’t Forget to Redirect

If you are redesigning a new version of your website, make sure you don’t lose any of your old pages. For example, you might have a page on your old website with the URL yourdomain.com/your-page, and the new page ended up with the URL of yourdomain.com/your-new-page.
Once you delete the old page, people who visit that page will receive a 404 error, telling them the page no longer exists. If the old page ranked well in search for a keyword, and search crawlers find the page no longer exists, the old page will ultimately be removed from search results. Hence, any referral or organic search traffic you were receiving to that page will be lost, unless you redirect the old page to the new one.
Use 301 redirects to tell search engines that the old page URL (yourdomain.com/your-page) is now the new page URL (yourdomain.com/your-new-page). This will ensure you keep the traffic and SEO value for your page. Any links to your old pages will count towards your new pages when you use 301 redirects, which will help you maintain the domain authority you have built through your SEO efforts.
If you use WordPress, you can use a simple plugin called Redirection to create these redirects within your WordPress dashboard. Otherwise, you may need to contact your web hosting company or web designer to have them create a .htaccess file on your web server. The format would look like this:
redirect 301 /your-page /your-new-page
To make sure you have redirected the pages you get traffic to from the old URL to the new one, set your website up on Google Search Console (formerly Google Webmaster Tools). It will tell you in the Crawl Errors report which links on your website result in a Not Found (404) error. These should be redirected to new links with similar content.
The same thing goes for updating the permalinks on your website. If you started with ugly permalinks (yourdomain.com/p=?122) and you want to update to keyword optimized ones (yourdomain.com/your-page-name-with-keywords), then you will need to redirect all of the old URLs to the new ones.
Another thing you can do as a backup for any links you may forget to redirect is a customized 404 page. WordPress users can use the 404 page plugin to create a customized page that visitors to their website will go to if a page on their website is not found or redirected properly.
This page should apologize to visitors for the content they were looking for not being found, and then direct them to the top alternative pages on the website instead. For example, you could include links to your homepage, main product page, main service page, contact information page, about page, support page, or blog.

In Conclusion

As you can see, SEO friendly web design isn’t just about search engines. Making your website search engine friendly will also make it visitor friendly, from the design to the functionality. Be sure to look at the various ways you can update your small business website in order to make it friendly for everyone, search engines and visitors alike.
To view the original article Click Here

Friday, 10 July 2015

13 Point Checklist for the Perfect Website Redesign

Website redesign
I rarely encounter a business that simply doesn’t yet have a website. Regardless of the bizarre reports that still contend 50% of all small business owners don’t have a website. (See Inc)
Now, what I do encounter most of the time is a small business that needs a total site makeover or redesign. It’s not that they were just awful in the first place, (well, some were) it’s that every site, just like every business, needs to evolve. That means if your current site design is around two years old it needs some attention.
But, before you rush out and give a designer the keys to your site, take steps to ensure you don’t unknowingly undue all the good you’ve accomplished with your previous site.
Eager designers don’t mean harm when they create a new design, they just need more information, and that’s where you come in. Before you even visit a WordPress theme designer arm yourself with some information that can help them make good decisions about what stays and what goes in your current configuration or take the risk of losing all that hard earned search traffic.
Now, I’m not suggesting you simply hang on to SEO gains over things like better navigation, visitor usability, and conversion, but don’t throw everything out just for something that looks more modern.
Use this checklist as you embark on a site redesign as a way to capture all existing elements and consider content needs, edits and issues before the project starts.
  1. Do you have access to Google Analytics? – I know, weird question, but you might be surprised how many sites have analytics installed the owners have no idea how to access the data.
  2. Do you have access to Google Search Console (formerly webmaster tools) – I frequently find site owners who have never bothered to connect their sites here and use this invaluable resource
  3. Have you evaluated domain suitability and value and checked expiration? – Carefully and I mean carefully consider if your current domain is even right for your business. Certainly this is a good time to check and make sure your desired domain isn’t set to expire anytime soon. (Quick check WhoIS)
  4. Have you cataloged all pages and current issues? – Use Screaming Frog to create a spreadsheet of all of your pages and any currently broken links or crawl errors.
  5. Have you added Google Analytics data for pageviews, bounce rate and time on page to a spreadsheet to help make assessment on content to keep? By adding this kind of data to your spreadsheet you might learn about some pages that are receiving a surprising amount of traffic or links.
  6. Have you ranked your spreadsheet content? A= keep no edit, B=keep edits needed, C= drastic rewrite or dump? This step involves your overall business and marketing strategy so you’ll need to consider how you want to position your business and your editorial calendar moving forward to make some of this decisions.
  7. Have you audited any lead capture/landing pages/forms? If you’re capturing email addresses for a newsletter, ebook or webinar series you’ll want to make sure you take note of these for the redesign. It’s easy to lose track of landing pages because they are often buried away from the main navigation.
  8. Have you audited SEO for ranking pages? Screaming Frog can give you information about pages that already rank for desired terms. If these terms are still relevant, you’ll want to think long and hard about how to keeps these pages intact.
  9. Have you audited permalink structure? A site redesign might be the time to analyze whether you want those ugly numbered URLs for your blog posts or the default date added. Most sites today are moving to keyword-rich URLs for all content (Don’t worry, I’m headed there in a month or two myself.)
  10. Have you analyzed current backlinks? Use a tool like ahrefs to see if any sites are sending significant traffic to pages. You’ll want to use some of this information to make determinations about leaving pages as is or even permanently redirecting the pages to eliminate creating too many broken links. (You might also consider some links that need pruning too.)
  11. Have you designed a 301 permanent redirect strategy if needed? If you’re making any dramatic URL changes, you’ll want to tell the search engines that your blog posts still exist they’re just at a new address. Make sure you work this through and test it thoroughly before you launch. The Yoast SEO Plugin can help with 301s
  12. Have you evaluated current plugins for use? A redesign is a great time to reconsider your current plugin use. Plugins are a big resource drag and a security hole – less is better.
  13. Have you evaluated needed integrations (CRM, ESP, Shopping cart, etc.) Finally, if you currently have some integration with other 3rd party tools or client portals, you’ll want to note the need for these and make sure you can share this information with your designer.
The steps above may seem like a lot of work, but it will save you a ton of work, worry, and headache in the end. In fact, if you start working with a designer and they don’t ask you for this information up front, you should be concerned.
To view the original article Click Here

Wednesday, 17 June 2015

6 Articles on Design Theory to Help You Create Beautiful Landing Pages

landing-page-design
Good landing page design isn’t just about pretty pictures – it’s about structuring your page to guide users toward the goal. Image by Baldiri via Flickr.
Some of us have the luxury of having talented graphic designers on staff.
For those of us who don’t, designing a landing page that doesn’t get in the way of conversion can be a real pain in the butt.
I’m not just talking about a pretty page. I’m talking about everything that goes into effective landing page design: directional cues, font usability best practices, color theory, layout tricks and more.
If design isn’t your forte, this article’s for you. I’ve scoured the web for the best blog posts on how to make deliberate design decisions that will impact the performance of your landing page – from color psychology to typography to more subtle visual tricks.
Let’s get started!

1. The Psychology of Color by Quick Sprout

the-psychology-of-color-quicksprout
The Complete Guide to Understanding Consumer Psychology, Chapter Four: The Psychology of Color by Neil Patel and Ritika Puri for Quick Sprout.
This post comprises the fourth chapter in Quick Sprout’s comprehensive guide on understanding consumer psychology. It starts by reviewing color theory, including the different emotional impacts created by pure colors, shades and tints, as well as the science of picking colors that work together.
Colors come with social and cultural connotations, and this guide includes achart that explains how the meaning of color varies for different social groups (colors that entice in North America are different from those that entice in India, for example).
The guide also looks at:
  • The relationship between gender and color preferences
  • Studies that show how color impacts conversions
  • How to create designs that are more friendly to people with disabilities

Top takeaway

A common mistake made by designers is using too many colors on the same page.
An overload of colors can wind up conveying too many emotions or messages at once, which can potentially confuse the person viewing your design.
Instead, test using one prominent color that is offset by a neutral color like white, gray or black.

2. Color Usability Optimization: 4 Keys to Harnessing Physiology for More Conversions

angie-schotmuller-color-theory
Color Usability Optimization: 4 Keys to Harnessing Physiology for More Conversions by Angie Schottmuller of Three Deep Marketing.
Most resources on the relationship between color and conversion focus on the psychology of color; that is, the emotions and qualities that are ascribed to various colors.
But Angie Schottmuller of Three Deep Marketing developed a system for boosting conversions that focuses on how humans process colorsphysiologically. In other words, what the human eye does to color and how this impacts a user’s behavior when visiting a site.
In this really detailed post, you’ll learn:
  • Her “Clockwork Conversion Color Model,” which centers on strategic use of complementary colors to boost conversions
  • The four scientifically-based color principles that make up the model, and how you can employ each on your landing page

Top takeaway

Use pure colors for your primary CTA and neutralize the other colors on the rest of the page by mixing in white, grey and black.
This helps you avoid the overuse of pure colors, which can distract and exhaust the eye.

3. Choosing the Right Font: A Guide to Typography and UX

guide-to-typography-and-ux
Choosing the Right Font: A Guide to Typography and UX by Hannah Alvarez for UserTesting.
There are a lot of conflicting opinions about what kinds of typography are optimal for the web, and the truth is that it depends entirely on the context for which you are designing.
But UserTesting’s guidelines will give you all the information you need to make an informed, thoughtful decision about how you use type on your landing page. You’ll learn things like:
  • The number of optimal characters per line for desktop and mobile
  • How to think about the contrast between your text and background
  • The differences in the way readers respond to serif and sans serif fonts

Top takeaway

The purpose of any text on your page is to help your users accomplish their goals. Always keep this in mind when choosing typography for your landing page.
Ask yourself questions like:
  • What kind of experience are my users expecting when they land on my page?
  • What devices are they using?
  • What do they want to accomplish on my landing page (shop, learn, be entertained)?
The answers to these questions will help you decide which style and color are right for the type on your webpage. And, like any good landing page designer, don’t rely on gut instinct: make sure to test, test, test.

4. A Non-Designer’s Guide to Typefaces and Layout

non-designers-guide-to-typefaces
A Non-Designer’s Guide to Typefaces and Layout by Adam Dachis for Lifehacker.
Once you’ve chosen all the right colors and fonts, how can you arrange them all on the page in a way that just looks right?
This post by Adam Dachis on Lifehacker breaks it all down for you. It’ll teach you all about typeface and layout best practices:
  • How to emphasize various elements on your page with proper sizing, color and spacing
  • Why you should only use two typefaces max (and when it’s okay to break that rule)
  • How to format your text and images to better communicate your message and have compelling (read: high-converting) visual impact

Top takeaway

Picking poor color combinations can make a page look messy and turn off prospects – so what’s a color blind marketer to do?
Dachis shares the really cool Adobe Kuler tool which helps you discover color combinations that work well together (without having to rely on your gut).

5. 8 Effective Web Design Principles You Should Know

peep-laja-8-web-design-principles
8 Effective Web Design Principles You Should Know by Peep Laja of ConversionXL.
As CRO expert Peep Laja eloquently puts it in this article:
Design is not just something designers do. Design is marketing.
If you’re a marketer who doesn’t really have an eye for design, that statement might intimidate you – which is why Peep provides a breakdown of eight web design principles that will help you create better landing page experiences.
Though many of the examples he provides are for websites rather than landing pages, this post is a must-read.
You’ll learn:
  • How you use mathematical ratios and sequences to create web design that looks pleasing to the eye
  • How you can take a page from photography’s playbook and use the rule of thirds to select (or crop) images that will look good on your landing pages
  • Tons of other psychological and scientific tricks that can subtly affect your prospect’s perception of your landing page.

Top takeaway

The Law of Proximity dictates that elements that are close together on a landing page will be associated together in the prospect’s mind.
Don’t place elements together in your design if they don’t go together thematically. Alternatively, use this law to your advantage if you want to indicate that certain elements do go together!

6. Why These Ugly Designs Convert Beautifully

ugly-designs-convert-beautifully
Why These Ugly Designs Convert Beautifully by Mattias Guilotte for Unbounce.
Now that you’ve got your share of design knowledge and know how to make things look good, let’s flip the script and check out an article that explains that beauty really is only skin-deep.
In this tongue-in-cheek landing page examples post, Mattias Guilotte looks atthree not-so-pretty landing pages that convert remarkably well. He shares surprising conversion stats and takes a guess at why each page performs well in spite of being hard on the eyes.
This post is a cautionary tale about why you should always test before blindly following design “rules.”
…Just like the ones you just read in this post.

Wrapping things up

There’s a lot of great information in these articles that will keep you busy for a while. Read through and find hints of where your landing page design may be falling short.
And then run tests to validate your assumptions.
Finally, never forget that only solid copy can give way to beautiful and comprehensive landing page design.
P.S.: Know of any great blog posts about design theory that I didn’t include? Post them in the comments!
To view the original article Click Here