Is ADA Website Compliance Important?

Posted on April 20, 2019 by Anna Oderinde

Why Making Your Website ADA Compliant Is A Necessity

The Americans with Disabilities Act, or ADA, was created by congress as a supplement the Civil Rights Act of 1964, which outlawed discrimination based on race, color, religion, gender or national origin. The ADA was created to protect individuals with disabilities from discrimination and to ensure accessibility. In the real world, this applies to the physical accommodation to businesses as building construction and alterations must comply with ADA design standards. While most of us are familiar with these requirements, many of us might be surprised to learn that the same standards apply to the digital world, in particular websites. The standards are to ensure that people with disabilities are able to access content to a website with the same convenience as people without disabilities. As a business, government agency or non-profit organization, you are compelled by the law to remove any technical obstructions that may discriminate against people with disabilities. Failure to comply with ADA design standards may result in fines or even a lawsuit. Do I have your attention now?

In 2019, ADA compliance should be considered a priority when building a website.

ADA

With the emergence of the World Wide Web in the late 90’s and early 2000’s, it became apparent that website standards were not compliant with ADA standards. The user experience for people with disabilities was frustrating and unwelcoming. Lawmakers acted to extend the protection of people with disabilities to include “goods, services, facilities, privileges, accommodations, or advantages offered by public accommodations via the Internet.” During this time, the World Wide Web Consortium, or W3C, an international community that develops open standards to ensure the long-term growth of the Web, began to take root. W3C standards were created in a cooperative with academic institutions, businesses and government agencies in an effort to ensure that WWW does not stand for Wild, Wild West. Unified standards makes life easier for everyone and ensures a more consistent online experience. The standards created by the W3C and the aims of the ADA made good bed fellows. Soon, Section 508, an amendment to the United States Workforce Rehabilitation Act of 1973, adopted W3C compliance standards, mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities.

Confused? Don’t be. Whether it’s the ADA, Section 508, or W3C-compliance standards, when building a website all you need to concern yourself with is to ensure that it is fully accessible to all people. The W3C established the Web Content Accessibility Guidelines, or the WCAG(v2), a shared set of guidelines, “with the goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.” WCAG2 was designed specifically for web developers and compels them to comply. Under this guidance, there are three levels of conformance defined as: A (lowest), AA, and AAA (highest). Depending on the nature of your organization, these levels will indicate to the government that you are either under compliance or begging for a discrimination lawsuit. In 2017, the Department of Justice passed official guidelines on website accessibility standards to be in line with AA requirements. This is why its is so important that when you work with a web design agency that they comply with the WCAG.

Here are some examples of WCAG guidelines your website should follow:

ADA Compliance

  • Provide text alternatives to non-text content such as buttons, input fields, charts, graphics, images, and anything else that is vital to the user’s experience.
  • Add captions for videos, recorded audio and livestreams or broadcasts, clearly labeling alternative text, and providing sign language interpretations for various types of media.
  • Make your website accessible by keyboard, so that persons with disabilities can use the “Tab” command to shift from field to field, instead of operating the cursor using a mouse or a touch pad.
  • Make the site as easy to navigate as possible by using clear indicators such as large-font text for buttons and controls, clearly labeling headers and menu options, and keeping content logically organized.
  • Potentially seizure inducing content does not comply. Examples include
  • Avoid bright flashing graphics and audio-visual content with a fast montage to prevent potential seizures.
  • Provide users with enough time to navigate the website. This means no flashing instructions or input fields that disappear after a short period of time.
  • Use the correct language attribute in their HTML code, so the page loads with the most commonly used language. This also applies to alternative text for images, videos, text-to-speech synthesizers and other multi-media content.
  • Close captioning on videos in crucial, especially for the deaf community.
  • PDF documents need to be properly tagged so that screen readers can properly interpret non-HTML content.
  • Adherence to web development best standards will ensure that content displays properly for all users.

Is Your Website ADA Compliant?

ADA Compliance

As awareness of the need to create websites that are accessible to people with disabilities, if not for better customer experience than to protect against potential lawsuits, the term “ADA Compliant” has become a marketing term for web design agencies. Do not buy into it hook, line and stinker. As Ronald Reagan once stated, “Trust, but verify”. To ensure that your website is ADA compliant, DEEPBLUE provides a comprehensive audit to ensure that it meets minimal ADA requirements as defined by the government for your industry. Federal and state agencies have the highest standards, followed by large, public corporations. However, if you run a small-to-midsize business don’t believe that you are flying under the radar. ADA compliance should be considered a best practice in web design and it will give you the piece of mind that you are safe from potential litigation while ensuring that you provide the best possible user experience for your customers.

If you are concerned about ADA compliance please contact us today for a complementary assessment.

Anna Oderinde

Anna Oderinde is a project manager at DEEPBLUE.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

DEEPBLUE Featured in Yahoo! Finance

Posted on April 20, 2019 by Frank Farris

Yahoo! Finance, a national news publication, has named DEEPBLUE as a top global Magento development company.

Click Here to read the full article.

About Yahoo! Finance

Yahoo! Finance is a media property that is part of Yahoo!’s network. It provides financial news, data and commentary including stock quotes, press releases, financial reports, and original content. It also offers some online tools for personal finance management.

About DEEPBLUE

DEEPBLUE is a full-service, custom web design agency that specializes in creating an entirely new user experience through responsive design, placing an equal imperative on both desktop and mobile devices. They create impactful multi-platform solutions for meaningful brands. DEEPBLUE offers a suite of creative services to improve the online visibility and impact of your business. Their capabilities range from custom websites with responsive design and robust CMS solutions to branding and marketing campaigns, all with a deep focus on the user experience. They succeed in providing their customers with a unique and engaging multi-platform experience. Based in California’s majestic central coast, DEEPBLUE’s clients range from small business to Fortune 500, from start-ups to 100-year-old stalwarts, from non-profits to government agencies.

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Development | Leave a reply

Is My WordPress Website Secure?

Posted on April 14, 2019 by Anna Oderinde

4 Best Practices To Follow To Stay Safe

For those of us in the web design industry, the emergence of open source and in particular WordPress as the dominant website platform has been nothing short of amazing. In 10 short years, the prevalence of expensive, proprietary .NET platforms has been usurped by a humble blog. Today, WordPress is the most popular content management system in the world, with over 75,000,000 active sites.

WordPress Market Share

With all the accolades, however, there has been a controversy that has plagued the platform for years: security. Is a WordPress website a secure website? I will put this issue to bed with two words.

Yes, but…

The reputation of WordPress as not secure is based on a myth wrapped in truth. The reality is, most CMS use similar security protocols and architecture, but WordPress from its humble roots made it very easy for lazy developers to unwittingly create an unsecured website by not following simple best practices.

Lowering the Barrier to Entry

First off, as an open source platform there is no licensing fee associate with WordPress. This lowered the barrier to entry and suddenly there were thousands of “professional” web designers opening shop. These are the folks I call the “Do-It-Yourselfers”, the kind that would rather go to Home Depot and get the materials to build their own backyard patio instead of hiring a professional. In their haste to deliver, the Do-It-Yourselfers used shortcuts, including relying on default password settings instead of taking the two minutes to create a login password that a hacker can’t figure out by guessing the city you were born in or your favorite sports team. Everyone familiar with WordPress knows where to find the admin: mydomian.com/wp-admin. Honestly, if you really have an axe to grind and find yourself at this doorstep is it not in the realm of possibility that given the prevalence of WordPress websites out there that it is inevitable that there will be hacks?

WordPress Login

The truth behind the myth that WordPress is not a secure CMS is that it was perpetuated by sheer laziness and that WordPress became a victim of its own success. WordPress is secure, but only if you follow WordPress Security Best Practices.

WordPress as a non-profit community has a team of developers focused on security issues. When a vulnerability is found and reported within the community, a patch is immediately created and added to the latest version update. This is why it’s so important to keep your version of WordPress Core current. In addition to the core platform, plugins created by third party developers are a major source of security vulnerabilities and should always be kept up to date. So, how can you protect yourself against attacks?

Here are 4 best practices to follow to keep your WordPress website safe:

Wordpress Website Security

Be Smart With Your Password.

This is the frontline of defense. Do not create a password using personal information that hackers might figure out. Make it long and non-sensical. Use at least 6 characters and a mashup of letters, numbers, punctuation, lower and higher cap. Make sure to change out your password at least every three months.

Install a Security Plugin.

WordPress security plugins are a great way to keep your website safe against security vulnerabilities. Here are my recommendations for the 7 best security plugins available for WordPress:

  • WordFence
  • BulletProof Security
  • Acunetix WP SecurityScan
  • 6Scan Security
  • Sucuri Security
  • iThemes Security
  • All In One WP Security & Firewall

Stay Up To Date.

Keep your WordPress Core and plugins current. Just make sure to backup your website before making any updates. If you do not feel comfortable doing this yourself hire a professional to manage your updates.

Work With a Dependable Development Agency.

The sad truth about the WordPress myth is that most attacks are human-related. Find a developer that adheres to WordPress best practices and can design and implement a security update schedule, including backups.

Conclusion

As a strictly .NET company for over 15 years, DEEPBLUE  has embraced open source platforms, in particular WordPress. The advantages are significant. As the most popular CMS in the world, WordPress provides a development community that no other platform can touch. In comparison to other open source platforms, such as Drupal and Joomla, WordPress is extremely intuitive and provides the same robust features. In comparison with proprietary .NET platforms, there is no cost for licensing and you will not have to worry about a company going out of business and losing all support. The myth that WordPress is not secure can officially be put to rest.

If you are concerned about WordPress Website Security please contact us today for a complementary assessment.

Anna Oderinde

Anna Oderinde is a project manager at DEEPBLUE.

More Posts - Website

Posted in Development, Strategy | Leave a reply

5 Web Design Strategies For Non-Profits

Posted on March 28, 2019 by Anna Oderinde

How Your Organization Can Thrive In A Digital World

Lets face it, non-profits and technology don’t always make for good bedfellows. Non-profits face many challenges, from keeping the lights on, fundraisers, donor and member relations and bureaucratic squabbling, that tend to occupy much of the bandwidth. However, there  are other nuances that lead to predictable outcomes. Non-profit organizations are comprised of idealists; folks that are out to change the world for the better. These people have often spent years compiling degrees, writing dissertations and sometimes traveling to the farthest outposts of the globe to care for people or creatures in need. A noble endeavor, indeed. However, the concept of marketing can seem like a foreign notion, as non-profits seek to make a difference without shining the spotlight. It can be culturally ingrained that promotion is somehow a thing to avoid, as if the attempt in doing compromises the integrity of the cause. This is unfortunate, as minimizing the message diminishes the impact. Non-profits should embrace technology, and the most impactful and cost-effective way to do so is through the proper use of web technologies.

Here are 5 web design best practices for non-profits:

DEEPBLUE Non-profit web design

Promote your organization online to deliver your message.

According to the National Center for Charitable Statistics (NCCS), more than 1.5 million nonprofit organizations are registered in the U.S. That is a very crowded room, and unless you can effectively communicate your organization’s message and purpose, you stand a real chance that you will get drowned out in all the chatter. Just as with anything in life, we can’t all be the Melinda and Bill Gates Foundation or the Susan G Komen Foundation. We can’t assume that people know who we are or what we are trying to do. This is a critical task for your website, and it needs to be clear and simple. The website needs to tell your story. It needs to elicit an emotional response from site visitors. It needs to drive them to take action.

Utilize social media.

Social media is an ideal platform for non-profit organizations invest. According to Brandwatch, the average daily time spent on social is 116 minutes a day. This is an engaging and captive audience that loves to share engaging, emotional stories with their friends, family and co-workers. Non-profit organizations need to create unique content that catches the attention of your social audience, and if your’re lucky some of them might even go viral. Interesting videos, fundraisers, personal stories, etc. A few years ago we created a Facebook ad for the Tennessee Aquarium that had a humorous approach. The observer was asked to guess how many fish were in a picture and post their answer. As the viewer strained to count the fish the image suddenly morphed into a great white shark attacking the screen. It had a simple shock value to it and was shared by over 10,000 people. Simple campaign, effective results.

Take your fundraising online.

Fundraising is the lifeblood of any non-profit organization. Your non-profit web design needs to be your most compelling fundraising vehicle, and don’t play coy. An effective online fundraising strategy is aggressive and visible. Make certain that site visitors are aware of how they can donate at all times. Every page on the website should have a “Donate Now” button. The website should drive the user to all different types of fundraising options, including online donation, attend a fundraiser, membership, sponsorship, gift honor, merchandise, etc. One great platform we highly recommend is Network For Good (www.networkforgood.com), which offers a variety of fundraising services to help even the smallest non-profit organization become a fundraising rockstar. Regardless of your online fundraising strategies, make them as simple as possible and incentivize your audience to take action through  effective storytelling.

Engage the media.

With all the talk of fake news these days it is important to know that the press is still the best way to get your message out to the largest possible target audience. Make sure that all of your site updates are submitted to media channels, some of them might pick them up for mass coverage. Install a news aggregator on your website. Create a mailing list for breaking news blasts and make certain to ask your site visitors to subscribe. Update your blog weekly. Push all your press releases out to social media. Create a media kit for journalists to download. Provide a contact name and information on your website so that the press can reach you for comment. Get to know your local journalists.

Organize grassroot activities.

Not everyone can make financial contributions to your organization, but they would still like to help. Use your non-profit web design as a platform to encourage volunteering at a local level. Provide a volunteer kit that anyone can download and follow to organize local charity drives that promotes your message and fundraising. Have contests that recognizes local heroes that are making a difference. Feature them on your website, give them an opportunity to tell their story and why they are so impassioned about your organization. Show pictures and videos of folks wearing your gear and engaging in the community. This generates buzz, excitement, goodwill and results.

Conclusion

Non-profit web design strategies can be highly effective. We strongly recommend that non-profit organizations embrace a web marketing strategy that revolves around their website. Invest in a strong web presence by a professional web design agency that specializes in non-profits and properly reflects your organization’s purpose, culture and values. Keep your website current and active with new blog posts and press releases. Turn your website into a fundraising machine. Engage social media. Connect with journalists. Encourage grassroot activities.

We are recognized as a top California Web Design Agency on DesignRush.

Anna Oderinde

Anna Oderinde is a project manager at DEEPBLUE.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

7 Web Design Trends for 2019

Posted on March 24, 2019 by Antje Knott

Keep Your Website Relevant With Emerging Trends

It’s that time of year again when we in the web design industry look back on the previous year and marvel at all the breakthroughs that occurred while looking forward with Nostradamus-like accuracy to all the predictions, trends, buzz and ill-guided persuasion attempts the new year will bring to web design best practices. I’ve come to view my annual article about web design trends as obligatory as my New Year’s resolutions, which never last past February. Anyway, 2018 was a good year for steady evolutionary increments in web design, such as the further standardization of responsive web design, chatbots, micro-interactions, asymmetry, tactile design and font personalization. So what can we expect in 2019? Here are 7 trends that you should consider for your website.

More Focus on UX

UX, or User Experience, is a central tenet to all modern web design. I like to define UX by pairing it with UI (User Interface) and then making an analogy that has nothing to do with the web design industry. Let’s consider rental cars. If you are like me and travel constantly from airport to airport you have become very familiar with the exercise of de-boarding, dashing to grab your luggage and making a beeline to the car rental center. Rarely do I get the same type of vehicle twice, and I want my experience to be as painless as possible. I honestly don’t care if I get a compact, a sub-compact, a micro-compact, or a nano-compact as long as it gets me where I need to go. My issue has always been with the damn gas cap as I never seem to be able to find where the button is, whether on the dash, on the door, or (literally) hidden under the seat. Nothing frustrates me more than being stuck at a gas station and crawling through the entire car to find it. I always wonder why the engineers that designed the layout simply could not place the gas cap release some place that would be intuitive for all drivers, especially since these models constitute the majority of car rental fleets. I describe this as a very poor User Interface (UI), and because of this I have an equally poor User Experience (UX). You see, the design interface has a direct impact on the overall experience as a user of a product. Poor UI leads to poor UX. The same applies in web design. Make sure that your site is designed with the customer in mind.

More White Space

Apple started it, and we all followed. Then every website began to look like an Apple wannabe, so we all got away from it. Now it’s back, and not necessarily because Apple is no longer creating innovative products. For good design that translates well for desktop, tablets and smartphones (RWD), use less clutter and more white space. The proper use of white space amplifies the important calls to action on the page that you want your users follow. When it comes to web design, less is certainly more. Do not accept any design that has everything and the kitchen sink thrown into it. This is not expert design but rather an indication of of a designer that is aesthetically-challenged and is attempting to cover up deficiencies by continuing to add more and more to a page. Don’t fall for it. Keep it clean.

More Videos

For those of us old enough to remember when computers used to connect to the Internet using a phone line we can all commiserate with the excruciating experience of watching streaming videos on our CRT screens. Thankfully, those days are long gone as the Web is now a safe place for using video as content for your website. Videos are a fantastic way to tell your story and capture the interest of your target audience in a convenient snippet. More and more, you will see videos replacing static images for the hero section of websites, which is the main focal point of the home page. Using a CMS such as WordPress, it is extremely easy for site administrators to add videos on a daily basis. But make sure that the videos are relevant and of high quality. We recommend working only with reputable video production agencies that will help you craft your story, define your narrative and deliver your message on point. Also, you probably want to set up a premium account on a video platform such as Vimeo or YouTube to ensure that they run ad free.

More Bold Colors

Approximately 1 in 12 men and 1 in 200 women in the world are color blind. They do not care about which colors you choose for your website. The rest of us do. Color evokes emotion. Color defines the tone, theme and attitude of a website, and bold colors used correctly can provide that extra ‘pop’ you need to really grab someone’s attention and pull them in. Eye tracking studies have shown that the proper use and balance of color can make a difference between bounce rates and conversions. Contrasting color within site elements make appropriate callouts more apparent and recognizable, which will help you craft a site that encourages them to take particular actions and more predictive outcomes. Modern computers can display 16,777,216 different colors, so there’s really no excuse to be drab and boring.

More Creative Fonts

Steve Jobs loved fonts. He hated the standard suite used for Windows PC’s (Arial, Helvetica, Sans-Serif) and was the first to insist that his Macs gave us a real choice and ability to express ourselves with personality and creativity using fontography. Fonts are a pillar of good web design that is often and shamelessly overlooked. More than anything, fonts establish attitude and individuality. One of the best ways to make your website stand out is to get creative with your use of fonts. Always ask your web designer what fonts they like to use and how they can help you establish a font profile for your website that is fresh and appealing.

More Gradients

What a second… did I just write that? For years, I HATED gradients. They were the bane of my very existence. I perceived any use of gradients as a cheap conjuring of poor web design used by designers that simply did not have a clue about good web design philosophy. And worst, they looked HORRIBLE on those older CRT monitors and low quality graphics chips. But as those old menthol ads used to say, You’ve Come a Long Way, Baby. Today, modern chips and screen technologies have the processing power and higher resolution necessary to display gradients as they were initially intended and look fantastic on a website. Gradients provide a subtlety to a design that will allow your colors to shine and your use of fonts to pop. They serve as a conduit from one graphical element to another, allowing your users to transition seamlessly from one section of a page to another. Look for gradients to be a popular choice in 2019.

More Responsive Web Design

Yes, Responsive Design was a top trend for 2018 and 2017 and 2016 and 2015, etc. Need I say more? Responsive Web Design, which is an approach to designing web pages using fluid-based proportion grids, media queries and scalable images, has completely revolutionized the web design industry. In the era of the mobile web, it is imperative that web design place equal emphasis on desktop, tablet and smartphone devices. Responsive websites are easy to maintain and do not require developing a separate mobile site, plus they are compliant with modern web standards, ensuring browser compatibility and search engine optimization. Do not ever consider working with a web design agency that has not adopted responsive web design as its development standard.

Conclusion

This is where I remind you of how important your website is to your brand and marketing strategies and how keeping up with web design trends in 2019 will help you maintain a competitive advantage, yaddi, yaddi, yaddi. Just keep in mind that trends are just that… trends. What’s hot sauce today is cold soup tomorrow, so always approach trends in web design with a modicum of salt. Regardless of how things change with technology and social preference, the fundamentals of marketing remain. Always present yourself with confidence.

 

Antje Knott

Antje Knott is the Social Media Manager for DEEPBLUE. She has over 10 years of industry experience as a wordsmith, social media manager, SEO/SEM specialist and digital advertising executive.

More Posts - Website

Posted in Design, Development, Strategy | 3 Replies

5 Reasons Why Your Website Is Not Converting

Posted on April 16, 2018 by Frank Farris


How do you measure the success of a site? Conversion.

You could have a lot of traffic going to your site, but those visits don’t really matter if you aren’t converting them into customers. The only visitors that matter are those that are adding to your bottom-line. All other traffic is essentially wasted.

Are you finding yourself with a lot of traffic, selling the right products at competitive prices, yet not with many paying customers? Then read on to find out why your site isn’t converting and what you can do about it.

Check Your Current Conversion Rate

First things first, you should know your current conversion rate. Whether you measure your conversions by product purchases, brochure downloads or email newsletter signups: you need to be measuring and tracking those conversions regularly. You can track your conversion rate using Goals in Google Analytics or through any other analytics platform of your choosing.

So what’s considered a good conversion rate? The ideal rate is between 2 to 3 percent. This rate could be higher or lower based on the value of the conversion (e.g. you’d have more difficulty converting customers if you’re selling products or services worth $10,000+). But if you’re having less than 2 percent conversion and your conversion value isn’t very high, then you might have a problem on your hands.

Here are five reasons why your site may be underperforming.

#1. You’re Providing a Bad Mobile Experience

If your website isn’t mobile-friendly, there is no way it will survive in these times. It isn’t enough for your site to be responsive, it has to be designed specifically for mobile in terms of content and structure. Failure to do so would mean marginalizing a substantial portion of your customer base and in turn decreasing your conversion rate.

But what does designing for mobile entail?

  • Using large and easily legible text
  • Using short paragraphs
  • Making sure that every key feature is just a tap away
  • Having just a single call-to-action

The key is to keep testing your mobile site. Perhaps you should even ask customers and family members for feedback on your site’s mobile experience. Afterwards, you should review what is working and what is not – and address those issues.

As long as you do not ignore the importance of having a good mobile experience for your site, you can easily hone in on the reason(s) your site is not converting.

#2. No Call to Action

Your website could be user-friendly with engaging and quality content, but without a clear and concise call-to-action, you simply won’t convert. Users may want to convert but just don’t have the opportunity or means to do so. Because you haven’t provided it.

Make your call-to-action clear, concise, prominent, specific and compelling. Provide all the information users need so they know exactly what you want them to do next. Create calls-to-action that are relevant and specific; and place them in a prominent place on every page of your site.

Whatever you do, make sure it is very easy for the user to convert when they are ready to.

#3. Your Users Are Annoyed with Your Website

You may be missing out on conversion opportunities if there is something off-putting about your site. Look at your bounce rate: if it is high, then you know there is something that is not appealing to users.

In such a case, you need to find out what the problem is – directly from the user. You may use heat maps and look at your user journeys via Google Analytics, but perhaps it will make your job easier to ask users directly (e.g. via a quick survey).

A few common annoyances on websites:

  • You do not offer any useful information
  • Navigation is too difficult
  • You have too many ads or popups
  • Your site doesn’t look good

These are all problems with a rather easy fix. Take your time investigating them and fix the errors as soon as you can.

#4. You’re Off-Target

Your website should be anything but general. A lot of website owners aim to please everyone – but they can’t – and end up isolating their entire audience.

Perhaps you’re writing for the wrong audience, perhaps you’re writing for a larger demographic than you should be; whatever the case, inaccurate targeting could negatively impact your conversion rate. Your copy, branding, marketing and site design should speak directly to a niche demographic.

Conduct market research to properly define and know your audience.

#5. You Have a Slow Site

When your website doesn’t load fast, your visitors leave and are unlikely to visit again in the near future.

There are many factors that can slow down your site, such as:

  • A site that isn’t optimized for mobile
  • Broken links
  • Not using caching
  • Messy code
  • Images that aren’t optimized
  • Flash and Java
  • Average web hosting

If your site is taking longer than 3 seconds to load, you need to work on it. Studies show that most users quickly exit sites that take longer than 3 seconds to load.

Measure, Measure and Measure

This is actually a sixth reason why your site may not be converting. Measure, measure and keep measuring. If you’re not measuring, you’re guessing, and in turn, not really making any strides.

The problem most website owners encounter is that they are either not tracking their website traffic or that they are tracking but not reviewing their metrics. Some do know they should be tracking, but just aren’t sure what to look for or what to make of the results.

Well, you should always start with your goals in mind. Then you can identify which key metrics will help you to measure your progress towards those goals.

Once you start measuring, you can improve on those metrics; figure out what is working, what isn’t, and then fine-tune and optimize.

Wrapping Up

These five reasons are just a starting point to help boost your conversion rates. There are many other reasons why your site may not be converting. However, these are fairly common in under-converting sites.

If you find that any of these reasons apply to your business, simply make the changes and you’ll see a big difference or improvement in your conversion rates and bottom line.

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

How to Convert a Non-Responsive Website into a Responsive Website

Posted on October 26, 2014 by Frank Farris

Author’s note: There are many articles and blogs floating around the InterWeb today that provide a technical response to this matter. These postings deal heavily with grid-based frameworks, breakpoints, media queries, CSS3, HTML5, etc. and are intended for a professional web industry audience. I will attempt to explain the process from a more practical, customer-centric and non-technical perspective. If you are a marketing manager or small business owner and find yourself tasked with taking your existing website and making it responsive I hope that this article will be useful.

The Coming of Responsive Web Design.

In 2013, Responsive Web Design became the defacto industry standard in web development. Responsive Web Design represents a new approach to building websites that optimizes the user experience across all platforms and mobile devices. If you own or manage a website it is imperative that you invest in the mobile user experience, and Responsive Web Design is the most complete solution to this complex problem. A typical business updates its web presence on a fairly predictable cycle. On average, a corporate website will last between 2-5 years before it’s time for an overhaul. In the market now? No problem. Any web developer worth its salt will propose that the new site be built using a responsive framework. If you are currently in discussions with a web agency and this is not the case I have only one thing to say to you: RUN, Forrest! RUN!

Houston, we have a problem.

All is well for site managers that fit within this cycle and are ready to build their new site from scratch using Responsive Web Design. Ideally, a responsive site should be built from scratch as the design and the framework both strongly influence how well the site adapts to different devices and screen sizes. But what about those poor unfortunate souls that somehow missed out on the responsive coronation? You have a shiny, new  (and most likely expensive) website that you took great pride in – at least prior to hearing about this new ‘responsive thingy’. You find yourself stuck with a web presence that was outdated and uncompetitive prior to it ever going live. And, perhaps worst of all, you did not plan for budgeting to fix the problem. What to do, what to do?

First off, DO NOT PANIC. Take solace in the fact that you are not alone. I receive several requests each week from managers in organizations large and small that are in this spot. There is a timely and cost-effective solution.

Transitioning into Responsive Design.

Let’s begin with the basic question that defines the problem: How can we convert an existing, non-responsive website into a responsive website?

Before we can begin to answer this question, we must determine what kind of website you currently have. Is your website driven dynamically by a content management system (CMS), such as WordPress, or is it a compilation of static, HTML pages? If you do not know the answer you will need to check with your IT staff or the original site developer as this is critical to the conversion process.

Now, to transition to a responsive design, we must:

    1. Assessment. To begin with the conversion process, we must first review the site design, layout and structure to ensure that it can fit within the responsive framework. This may require some tweaking of the original designs and layout, and not all sites are compatible for conversion.
    2. Information Architecture. Once we can confirm compatibility we will create interactive HTML wireframes that will demonstrate how the existing content will display for desktop, tablet and smartphones. The number of wireframes will vary by project and an understanding of user behavior via analytics will help us determine the types of mobile devices current site visitors are using. If, for whatever reason, you have a lot of users on Kindle Fire coming to your site (not that THIS will ever happen), we will need to ensure that the conversion takes this particular device into account.
    3. Design for Responsive. Next, we will rebuild the original design PSD’s templates to demonstrate the updated designs (based upon content and layout modifications required fro responsive conversion). As with the wireframes that precedes this step, we will provide design mockups for desktop, tablet and smartphone views. At this point, you will truly begin to see how your site will look and feel as a responsive website.
    4. HTML Prototypes. Once the design templates are approved, we go through the process of PSD2HTML, built upon a responsive framework (such as Bootstrap or Foundation).
    5. Convert the Code. We will then go through the tedious task of converting everything that was once fixed-with into a fluid, responsive layout. When moving from fixed layout to responsive design, we must establish “break points” that will trigger CSS style rules for different devices and screen sizes. Text is only one component of responsiveness. Due to the ever-increasing use of infographics, photos, and videos, images are also significant aspects of the responsive experience.
    6. Template Integration. As I have stated previously in this post, we must determine whether the existing site is static or dynamic. If the site is static, we will create responsive HTML template pages, which can be used in HTML editors such as Dreamweaver. Once these responsive templates have been introduced, the task of manually copying and pasting the existing content from each individual static page will begin. Based upon the number of pages the site has, this can either be a quick fix or a major headache. For dynamic sites, however, the solution is much more elegant. For website that use a CMS we need only replace the existing non-responsive HTML templates with the responsive HTML templates.
    7. Site Testing & QA. Finally, we will then test the converted site on multiple devices to ensure that everything is responding accordingly. The more you test your responsive site, the better the user experience will be in the end.

Although the solution is technical, the process of converting an existing non-responsive website to a responsive website, in practice, is more art than science. Each website is different and has its own unique challenges during the conversion process. For site owners like you, however, this means you no longer have to create a separate site for mobile users or make them suffer through an inferior mobile experience.

Have something to say? Leave A Comment Below.

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

Does Responsive Web Design Slow Down the Mobile Experience?

Posted on October 9, 2014 by Frank Farris

I am often asked whether or not responsive web design can slow down or sometimes simply degrade the user experience on mobile devices due to image file sizes and other technical challenges. The short answer is no, at least not if the website was built correctly. Let me explain…

For RWD Optimization we employ a “Progressive Enhancement” technique. Most companies that are not familiar with the inner workings of RWD tend to think that it’s a one size fits all approach. What we do is focus on enhancing the experience based on the capabilities of the browser/device. For example a small device would have a smaller/more optimized image presented vs a larger version that a desktop user will see. The way other companies do this is they will serve up the same image for desktop that they do on mobile. This kills both bandwidth and performance. To them Responsive is just about scaling content down. To us its about optimizing the experience for all users.

In general responsive web design, if applied correctly, can actually reduce load times.

Here are some optimization rules we may apply:

1. Images Optimization
The final aspect of Responsive Web Design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow properties. Scaling in CSS is pretty simple to implement for both images and video.

2. Media queries
Media queries are one of the cornerstones of Responsive Web Design. By adding some filter criteria around CSS definitions, we can control under which conditions those rules are applied to web pages. There are two places to define these criteria: using the media attribute of a link tag that references a CSS file or inline on a CSS file.

3. RWD Framework
We may use top RWD frameworks like Bootstrap, Foundation, Gumby Framework or HTML KickStart to organize the page structure.

4. Grid-Based Layouts
The grid layout helps define the size of content on any screen and can be used to define layout on different screen sizes. The Bootstrap, Foundation, Telerik Page Layout and other frameworks provide various sizes for their grid columns based on the size of the browser.

5. Minimizing HTTP requests
HTTP requests are sent to every device unless you tell it not to. JavaScript and CSS resources can help with this, such as Compass.
This is an open source CSS authoring framework that allows developers to create clean markup and create sprites and extensions simply and easily.

4 Enable Compression
We may apply JavaScript and CSS as compressed formats to speed up the loading.

5. Showing and Hiding Content / Conditional loading:
Not all content is intended for all browsers. In Responsive Web Design, this is the least technical design decision. What elements should appear on each of the page sizes? Not all devices need to display the entire website, nor should they. So we may apply some areas to hide on mobile devices that are not of significance to the mobile user.

 

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Development | Leave a reply

Mobile-Friendly Website vs. Mobile Applications: No Monkeying Around

Posted on October 11, 2012 by Frank Farris

Although the two terms may intersect in many a new media dialogue they are as different as sharks and monkeys.

To paraphrase Socrates (poorly): I know that I know nothing. Yet, oddly, this makes me wiser than most. 

This statement is not made in some vain attempt to rectify the fact that the speed of technology moves faster than my feeble mind can possibly comprehend – rather, it is an acknowledgement that I am able to identify the 800-lb gorilla in the room when he is inspecting my head for fleas. We’ll call this great ape Steve Jobs.

The introduction of the iPhone, barely four years ago, changed everything. Not just in the way we communicate, how we navigate, how we interface, or how we accessorize, but in how we perceive the very nature of accessing information. The Web, as we know it, is dead. The ball-and-chain that we associate with the traditional PC/desk interface is becoming as antiquated a notion as television without DVR. Today, the Internet is mobile. It is truly free.

I am what you would call a serial early adopter. I was introduced to mobile browsing by my first “smart phone”, Motorola’s V200 Personal Communicator, which in 2002 was named Editor’s Choice by PC Magazine. Yes, it was a phone. Yes, it could send and receive text messages. Yes, it could handle email. And, YES, it could access the Net. My anticipation was that my long-sought dream of a mobile web would soon be realized. However, with its 2G speed, its tiny, monochrome, non-tactile display and text-only browser, the overall experience was less than nirvana. Today, my V200 sits in my drawer of misfit technologies, products that were perhaps a bit ahead of their time but failed to provide the killer app. My drawer is full of phones.

motorola device

Motorola described that its new technological marvel “combines advanced messaging and calling capabilities in a stylish, compact unit”

And then came Steve…

With today’s smartphones, including but not just limited to the iPhone, millions of us experience a rich user-interface and seamless access to the web and all its bounty – websites, movies, music, news, etc. Just take a look at some of the trending:

  • 63.2 million unique users in the US accessed news and information using a mobile device in January, 22.37 million did so on a daily basis.
  • Web access using mobile devices on a weekly basis grew 87% from 10.31 million to 19.28 million.
  • Monthly unique mobile web usage was up 71% from 36.87 million to 63.18 million since January of 2008.

But for many of us, the novelty of pulling up a website on a phone has worn off. For starters, smartphones don’t play Flash, making literally millions of websites absolutely useless for the mobile user. In addition, even websites that can be displayed properly on a mobile device lack a compelling mobile user experience as the size of the screen renders the content nay un-readable. Sure, the phones have their tricks – the double-tap was a great invention and a personal favorite of mine. However, the fact remains that these websites were designed for large monitors, using a keyboard and a mouse, and accessing them on a tiny device – no matter how high the resolution – leaves us frustrated and believing that there must be a better way.

Today’s modern web philosophy has seen the rise of alternative websites that are designed specifically for the dimensions and features of a mobile device. These “mobile-friendly” websites factor in size and usability to create page layouts that meet user’s needs quickly, show only essential information and make user input as simple as possible.

What is the difference between a Mobile-Friendly Website and a Mobile App?

I have experienced confusion of late with my customers in regards to the difference between a “mobile-friendly” website and a mobile app. Both are buzz words and both might seem to imply the same thing to the non-geek.

Allow me a moment to clarify their distinctions through rudimentary definitions:

Website

  • Website built for PC / Mac (enough said)

Mobile-Friendly Website

  • Website built specifically for mobile devices

Mobile App

  • Internet application that runs on smartphones and other mobile devices

Mobile Websites

When you’re building a website for viewing on a mobile device, you have to forget just about everything you know about traditional website development.

  • On a mobile device, screens are small. Because of that, you don’t want to display global navigation on every page as you would on a traditional site. For mobile devices, keep navigation links to a minimum.
  • Keep content to a minimum. Communicate only the most essential information.
  • Mobile device users are mainly interested in doing something. Strip away content that are research oriented, such as “About” and “Company History” pages.
  • Make sure every page has a “Back” button at the bottom, since mobile browsers typically don’t display one.
  • Don’t try to replicate the complicated design aesthetics of the main website – start from scratch and keep design to an artistic minimum.

Mobile Apps

Mobile apps aren’t websites at all – they are programs, human.

  • Apps are mobile software developed by using different platforms and programming languages based on the target mobile device.
  • Today, there are countless hundreds of thousands of mobile apps. Apple categorizes its Web apps as follows: Calculate, Entertainment, Games, News, Productivity, Search Tools, Social Networking, Sports, Travel, Utilities, Weather.
  • Usually task-specific – simpler, seeker services in favor of open, unfettered web
  • Less about the searching and more about the getting
  • True ‘Native’ apps do not require Internet access.
  • Content already downloaded to a smartphone can be instantly accessed. No waiting for web pages to download.
  • Can take advantage of a smartphone’s inherent technologies (eg, GPS, voice-recognition, touch screen, gyroscopes)
  • Create an omnipresent brand placement on a user’s smartphone desktop. Prime real estate.

When an organization is planning its Internet Marketing Strategy (IMS), it should strongly consider developing for all three platforms (website, mobile-friendly website, mobile app) so as not to neglect its current and/or potential users, regardless of where they are coming from. Although a mobile-friendly website and a mobile app may have features that are redundant, it is important to consider the differences we outlined above and determine how each can provide a unique and specialized user experience. For example, a college app might include a campus map, or a fast food franchise might include a location finder that locates the nearest chain via the smartphone’s GPS capabilities. Both of these features can be replicated on either a standard website or a mobile-friendly website; however, the benefits of these applications running on a native platform – not from an HTML web page running on a remote server – are significant in terms of time and ease of use. Think of the difference between watching a movie on DVD and streaming it online. Plus, having your app residing on the desktop of your user’s cell phone provides a one touch convenience that will ensure a satisfactory experience and encourage multiple uses – perfect for that moment when the mood strikes for a triple-decker caribou slider.  Proactive marketers can push the envelope even further by ‘pushing’ a message about that slider out to a user when he or she is in a geographically close proximity, thus actually creating the mood. This is something that only an app can do.

One potential down-side of mobile apps is Interoperability – the ability of software to function on multiple platforms – versus User Experience – the optimization of software to function at its highest degree on a specialized platform. Take an iPhone app for example. It must be programmed in the iPhone’s native platform, Objective C. Unlike a mobile-friendly website that will work on any smartphone, a native app built for an iPhone will not work on any other phone, thus eliminating about 70% of current smart devices. In order to cover the breadth of the smartphone market, therefore, one must build individual apps for the iPhone, Android phones, Blackberry, Windows Mobile, and Palm platforms. This can be time-consuming and expensive.

smartphone marketshare diagram
smartphone marketshare diagram

While the Android OS has overtaken Apple (iOS) in market share the two combine for almost 80% of the total market.

However, given the dominance of the iPhone and Android phones, an organization can cover roughly 80% of the smartphone market simply by building on these two platforms. An emerging option for complete Interoperability is to develop what has been coined HTML5 Apps, which have one single core application, are written with web standards, primarily HTML, CSS, and JavaScript and are deployed on more than one mobile platform. More on that later.

Regardless of whether you are an iPhone, Android or Blackberry user, these issues should be given strong consideration. Do the research and see what types of devices your customers are using. For example, if they are government employees, they most assuredly will have a Blackberry. Technical people may favor the Android platform due to its open source while creative people tend to fall in with the Apple-lovers crowd.

So, which platform is right for you? In addition to your website –  and its not inconsequential costs – do you need to invest in both (mobile web and mobile app) or should you hold back? Our belief is absolute that, regardless of whether or not you have a mobile-friendly website and/or a mobile app, you must have a mobile PRESENCE going forward. Not later. Not next year. NOW. Because, just today, consider that about 20% of people visiting your website are doing so from their cell phone, and that number is growing exponentially. And if your organization invests the time and research to learn about the inherent qualities of each emerging platform and how they can better serve your existing and potential users, you will find yourself at the cutting edge and in a competitive advantage over those that are trying to eat you.

Thanks, Steve. Have a banana.

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Development, Strategy | Leave a reply

Responsive vs. Adaptive Design: Which Approach is Best?

Posted on October 10, 2012 by Frank Farris

Those of us in the web industry have become familiar in 2012 with a new approach to website development. Responsive Web Design, or RWD for short. The promise of RWD is that it allows developers like DeepBlue to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD provides an elegant solution for a complex problem – how to develop a single website that satisfies today’s multi-platform consumer. RWD is not a new technology; rather, it is a new way of thinking about the web. Although a website built using a responsive approach is self-evident when pointed out, we have found that the term creates much confusion with customers, hence the purpose of this article. To try to clarify, we will define the two main design approaches to modern website development – Responsive Design and Adaptive Design – and allow the reader to decide for themselves which approach is right for them.

Let’s begin with the basics:

Responsive Web Design – Multiple Fluid Grids

Adaptive Web Design – Multiple Fixed With Layouts

Confused? I don’t blame you.

RWD uses something with the obscure concept of fluid-based proportion grids. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. In addition RWD uses flexible images, and media queries, and when all three components are combined we create a quality experience for users no matter how large (or small) their display.

Make sense?

Let me try to put this in simpler terms: RWD websites are like silly putty, they have the ability to bend and curb, essentially morphing themselves into the proper dimensions for any web experience, including desktop, tablets and smartphones. For those of you who remember the 1996 Summer Olympics in Atlanta – think Whatizit, just without all the horrible embarrassment it befell onto our fair city.

Olympics Logo

Got it? Good. Let’s move on.

Adaptive Web Design (AWD), on the other hand uses a fixed width layout in designing and developing a website. Instead of a responsive site that will adjust itself accordingly, the AWD approach is to create multiple versions of a website based upon its anticipated use. We used this approach for the Tennessee Aquarium website several years back. At that time, the iPhone had just made its glorious appearance onto the scene and users were excited about the ability to visit actual websites on their phone. Granted, of course, that the experience was not always optimal – I will not even mention Flash – we loved the fact that the geniuses at Apple were thoughtful enough to create an intuitive, gesture-based interface which allowed us to zoom in and out, making it possible to read content that was designed for a larger screen on our tiny 3.5 inch phone. For the time being, it was good enough. Soon, however, customers started complaining to us that their customers were complaining to them that their website was not very useful on their smaller devices. They asked us if we could create an alternative version of their website, designed specifically for small screens, squinty eyes and fat fingers. Witness the birth of the mobile-friendly website experience – a scaled back, dumbed down, easier to use version of what has become affectionately known across small screens everywhere as the ‘full site’. Even though the creation of a mobile version required additional cost, design, development and the creation of a sub-folder inside the CMS (thus duplicating content entry efforts), our customers were once again happy because, indeed, their customers were also happy.

Between the years 2006-2010, the Adaptive Web approach dominated mobile strategies. Essentially, we developed two websites – one for the desktop experience and one for the smartphone experience. Then, wouldn’t you know it, those geniuses at Apple introduced yet another disruptive product. The iPad. What exactly was the iPad? At the time, we were not quite sure. It wasn’t a laptop, yet it wasn’t a phone either. It was a brand new category. Inevitably, our customers started calling us asking about how we can help them optimize their tablet experience. Although the average website will default to its desktop version on a tablet, the content was not always an ideal fit, especially in portrait mode. Should we really build a third website that was optimized for tablets? Will customers actually pay for three websites? Things started to get a little murky, and that’s when we started hearing about yet another rumored device that would strike fear in the heart of designers – the iPad Mini!! Chaos ensued.

It all started to change with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations using what you are now familiar with (thanks to this article) as the Responsive Design approach. RWD is still in it’s infancy and best-practices are being established as I write this article. It is by no means flawless – the concept of pixel-perfect has been thrown out the window along with Flash architecture. But it does represent the single greatest hope for a portable web that works the way we expect it to.

Earlier in this article, I offered to clarify the differences between RWD and AWD and allow you, the reader, to decide for yourself which approach is best for you and your organization. I realize that my intentions for objectivity may have been slightly influenced by my obvious subjectivity and preference for RWD. Still, I leave the ultimate conclusion to be made by you. If you were undertaking a new website, which approach would you choose?

RWD Rules!

Frank Farris

Frank Farris is Founder and CEO of DEEPBLUE. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development | Leave a reply