Keana Lynch

About Keana Lynch

Keana has led and consulted for over 35 Higher Education projects (so far) and is Beacon’s expert in CMS and Accessibility. She specializes in the analysis, design, and implementation of websites with extreme passion on user experience, accessibility, multi-device interactions, and technical best practices. She has been with Beacon since 2010, working on nearly every Higher Ed project, like Lees McRae College, Husson University, Del Mar College, Guilford Technical Community College, Jacksonville State University. Keana earned an Associate’s Degree in Web Technologies from Guilford Technical Community College and regularly presents at Higher Ed conferences on accessibility, CMS/Cascade development topics, such as academic program page design and ADA compliance testing.
19 02, 2018

5 Reasons to Perform Regular Website Audits

By | 2018-02-20T10:31:47+00:00 February 19th, 2018|Categories: Higher Education, Web Development|Tags: , |

Whether you’re preparing for a website redesign or simply looking to optimize your existing website, regular website audits are a must. Here are the 5 top reasons you need to perform regular website audits:

Usability is the Key to Engagement

What do the users of your website look for? What do they interact with and how do we ensure that they leave having had a satisfactory visit?  Optimizing the experience for your user is a matter of getting inside his or her head. Understanding their behavior is key to identifying opportunities for improvement. Concise navigation is key.

Done right, a usability audit will help you identify the shortest point between your user’s arrival and whatever it is that came looking for. In other words, it’s about goal optimization. If usability is poor, your visitor leaves without having made a purchase or having provided a lead. It’s a poor experience for everyone involved.

Accessibility Avoids Lawsuits

Accessibility is a hot button issue, especially for colleges and universities. ADA (or Americans with Disabilities Act) compliance guidelines are meant to compel institutions of higher education (and anyone in the public space) to make provisions for those with disabilities.

The DOE has become more diligent in the enforcement of ADA and specifically Title II (applying to any institution that receives federal monies from the DOE). Should the DOE’s Office of Civil Rights (OCR) find reason to file a suit against you or your school, they may very well do so.

Even more litigation results from the claims of students with disabilities. The National Federation of the Blind or the National Association of the Deaf often file complaints with the DOJ Civil Rights Division on behalf of these students.

Video accessibility (or lack thereof) is a common source of these complaints. However, ADA is complex and there are many other forms of online educational material that must also be made accessible. Develop an institutional policy that governs accessibility. Made necessary changes based on this policy. It may be advisable to consult an expert in ADA accessibility or a web development professional before developing such a policy.

ADA compliance can be difficult to interpret and even harder to implement. However, after a thorough audit, a qualified web developer will have a good idea where you stand and what you should do to get up to speed with ADA compliance guidelines.

Speaking of speed…

Load Speed: You get one chance at a 1st impression

Load speed (or the time it takes for a page to fully load) is important for the most basic of reasons. Research suggests that if a page takes in excess of 3 seconds to load, you’ve already lost 25% of your users. A similar thing happens with conversions. For each second of increased speed, you can expect a 2% improvement in conversions.

Page speed is a significant factor in SEO, too. Google has incorporated page speed into its ranking algorithm since 2010 and it has since placed even greater importance on this factor.

Dense image files and overuse of javascript are common culprits when page speed is below par. There are many online tools to measure and/or grade your page speed. While one can easily diagnose an issue, it may be wise to have a professional provide an insightful guide to remedy whatever may be ailing your page load time.

Optimized Forms Convert Better

Despite what some may say, there are no rules as to what works and what doesn’t. Only testing and optimization will provide you with those answers.

For example, it is generally understood that a lead generation form should not be too lengthy or ask too many intrusive questions. Also, a protracted pathway to conversion is desirable. Yet, there have been some notable successes with two or even three step conversion forms. The psychology for this makes complete sense.

People can become overwhelmed when they see too many questions on a lead generation form. When you divide the lead path into two parts, you may see greater completion rates. Since users generally prefer a shorter path to conversion, this may seem counter-intuitive at first.

However, users don’t like long forms and when they see too many questions at once, they bolt. So, by asking only a few surface questions on step one of your form and a few slightly more penetrating questions in step two, it appears to the user that they’ve been asked to do less. The only way to know if this works for you is to A/B test.

To further minimize effort, set question defaults. Optimize question types and provide drop-downs for ease of use.

Since mobile technologies are changing almost constantly, optimize your forms for mobile devices regularly. Use the proper mobile markup. If you use a captcha, that may be costing you leads as well. A/B test without one. There are spam filters that will do nearly as good a job anyway.

Content Writing Has Changed

This is true as it applies to user engagement as well as SEO. We’ll discuss them both separately.

Engagement

Users’ habits have changed considerably, too. Video drives traffic much more than ever before. Users not only engage with video content, they expect it. If you want eyeballs, you want video. Adding new, relevant video content is a key to improving engagement.

Go “all in” on visual elements. Don’t scrimp on photos. And interactive content shared through Instagram and other social media outlets is a must.

SEO

In the early days of SEO writing (the 1990’s and before), the objective was to appeal to a search engine algorithm rather than the end user. Back then, keyword stuffing was the norm. A myriad of keyword iterations were used on numerous pages, creating a redundancy that could actually be off-putting to the same users you were trying to appeal to.

In the late 00’s, Google’s algorithm changed considerably. The algorithm became more sophisticated. However, keyword signals still required some specificity and incoming links were very influential. Writing for SEO (to show up well in search rankings) didn’t mean the same thing as it did back in the 90’s.

Today, Google’s algorithm has been refined to focus on the fulfillment of the user’s search. In short, the algorithm is much better at measuring intent and providing a satisfactory result. What that means is that the content that best solves the searcher’s intent is much more likely to rank best. Whereas keyword matching was an imperative a few years back, intent matching is far more effective now.

Get out in front of possible issues with regular audits.

An ounce of prevention is worth a pound of cure. Regular website audits will not only boost your conversion rates, they may very well keep you out of court. The IT & SEO experts at Beacon can assist you in such an audit as well as providing remedies to any issues that we may identify. Send me an email or call Beacon today at (877) 994-6955 for more information.

 

9 11, 2017

Surveys: Get the Right Input for your Redesign

By | 2017-11-08T13:42:37+00:00 November 9th, 2017|Categories: Higher Education, Web Development|Tags: , |

The success of your redesign depends upon how thoroughly you understand your audience.  Your results are only as good as your preliminary research. Before you begin, ask the experts – the end users. Getting the right input may be the most important part of the redesign process.

Know Your User(s)

Many organizations have several audiences. For example, colleges must appeal to students, faculty, current students and alumni. Each have different needs and wants.  To properly address each user subset, you’ll likely need to create a different survey for each focus group.

Question Structure

There are two types of questions, fixed response and open ended. Each serves a purpose, however, you’ll want to lean heavier on structured questions. Respondents can be hopelessly vague when answering open ended questions.

Structured questions may include Yes/No, nominal or ordinal questions, just to name a few types. Choosing the right type of question will help determine how insightful the answers are. For example, instead of asking “Were you happy with the website navigation?” (yes/no question), you may wish to ask “How happy were you with the website navigation?”. Follow that with multiple choice options (very satisfied, somewhat satisfied, neutral, unsatisfied, or very unsatisfied). This can help you prioritize initiatives while in the planning phase of your redesign effort.

Regardless of type, make sure you’re specific. For example, instead of asking a question like “Do you take online classes often?” try something like “How many online classes did you take last semester?”

Construct questions that are simple and direct. If the question is a bit nebulous, then break it down into multiple questions rather than being vague.

What Questions Should You Ask?

The first step to understanding your user is to focus on their experience with your existing site. Find out what they like and dislike. That way, you’ll know what traits to carry over to the new design and what you’ll want to scrap. Asking a multiple choice question such as “What is the first method you use to find information on the website?” This way, you’ll know whether users prefer to use site search as opposed to the site’s navigation. This can go a long way toward determining what you emphasize with your redesign.

When you phrase your questions, focus on the user’s first impressions. Remember the 59 Second Rule*. Make sure you cover the most significant aspects of engagement such as design, content, imagery, navigation, and social media. Since demographic groups consume information in dramatically different ways, you’ll want to address device usage, too.

Using the prestigious (and imaginary) Beacon University as our subject, here are just a few examples of the types of questions you’ll want to ask:

  • Assuming the Beacon University website were accessible on all devices, what device would you most likely visit the site with? (multiple choice)
  • Rate your experience using certain areas of the website. (multiple choice)
  • What are the three top reasons you visited the Beacon University website? (open-ended)
  • Compared to other college or university websites, how would you rate the Beacon University site? (multiple choice)

Again, your questions will differ depending on the demographic you’re addressing. However, the questions above should provide some insight into the type of question one must ask and how to ask it.

Analyzing Survey Results

Look for patterns within your results. While common responses are important to note, the same can be said for outliers. Sometimes, surprises bring the greatest insights.

Here at Beacon, we typically provide a strategic document prepared from the survey results. Provided to designated stakeholders, a Beacon strategist meets with marketing staff or the organization’s website committee to discuss the results in depth and its implications on the planned website redesign.

Questions or Comments

As one of the nation’s premier Higher Ed. And retail redesign firms, Beacon has been providing colleges and online retailers with redesign consultation and services for almost 20 years. We invite questions or comments regarding all aspects of website redesign, not just the survey process.  Feel free to contact me or call one of our team members at 1.855.467.5447 with questions or leave a comment below.

18 10, 2017

Love Quiz: Fall In Love with Your Website Again

By | 2017-11-17T09:31:34+00:00 October 18th, 2017|Categories: Web Development|Tags: , |

You have genuine feelings for your website, but you’re not entirely sure you’d call it love. Or, maybe your digital relationship has been less than fulfilling and you’re starting to wonder… is this a relationship worth saving?

Take this quiz to find out if it’s time to get more serious about a website redesign.

Question #1: How do you feel about your website’s friends?

If you’ve been “dating” your website for a long time, you’ve more than likely met the friends. If not, it’s time you do. Meet Google Analytics and Google Site Search. Believe it or not, they’re your best friends, too. Get to know them well as they can be the key to opening your significant other’s digital heart.

The “E” Word

That’s right. Engagement. Google Analytics can provide insights into the type of content that drives visitors and captivates users. Find out which pages are under-performing and adjust your new content strategy accordingly.

More importantly, ask yourself which pages are performing best. Exploit these subject areas in your new, updated content strategy. Some topics may need to be called out more. Knowing your website’s likes and dislikes can only make for a more healthy relationship.

Google Site Search

Google Site Search can tell you what users are searching for when they first meet your website. Are users satisfied with what they find? The results may be surprising. You may find new areas of opportunity that you’d never thought of. Are they searching for a product or online course that you don’t yet offer? Maybe it’s time to expand your catalog.

Get Your Friends’ Input, too.

A focus group is an ideal way to find out what your users need and want from this relationship. Identify your audience correctly and your focus group will be effective.

For example, in the case of a college or university, your focus group may be made up of a combination of students, prospective students and alumni. Keep the size at a manageable number (about 10-15). With the right moderator, you’ll find out what you need to know about your user’s habits and objectives so that you can design optimally for a more fulfilling relationship next go-round.

Question #2: Is your online presence responsive to your needs?

Responsive is the key word here. 86% of those between the ages of 18 and 29 have a smart phone. If this is your audience (that’s you, Higher Ed), this one’s a no-brainer. By contrast, 87% of those living in households making in excess of $75,000 a year have a smart phone (that’s your audience, online retailers). If your current website isn’t responsive, this is step one to a more healthy relationship.

Beauty is More Than Skin Deep (although that counts, too)

Often, websites fall behind as organizational branding requirements evolve. This is a chance to update a color theme, new logo, etc. And while looks are important, inner beauty is even more so. Make sure the voice of your website is consistent with your other collateral.

Incorporate images and video where appropriate. In short, it’s a great time to make sure that you and your website are speaking the same language – the language of (digital) love.

Question #3: Does your website’s content still give you butterflies?

We’ve all seen the data on declining attention spans. That’s very likely true for your audience, too. Creating a logical navigation and page structure ensures that your site is easily scanned – an essential element to today’s website design.

Start with an overview and make sure you’ve written relevant headings and used SEO friendly tags accordingly (H2s, H3s. etc.). Use bulleted or numbered lists where appropriate. Link to other relevant internal pages and make sure that link text is meaningful.

Breaking up (blocks of text) is hard to do. Not really. Nevertheless, it always seems to be overlooked. This one’s an easy fix. Don’t forget it.

Call Me

If you’re looking for a new website, that is. We at Beacon don’t claim to be “doctors of love” but we’ve been helping guide clients through their digital relationships for almost 20 years. Feel free to contact me with questions or call one of our team members at 1.855.467.5447.

 

4 10, 2017

Creating a Focus Group for Your Higher Ed Redesign – Part 2

By | 2017-10-11T07:45:01+00:00 October 4th, 2017|Categories: Higher Education|Tags: , |

Below is part two of “How to Create an Effective Focus Group for Your Higher Ed Redesign”. To read part one, visit here.

How to Choose a Focus Group Moderator

A moderator is much more than a note taker. You’ll need one of those, too. However, your moderator will be responsible for eliciting the most from your focus group. The moderator has a profound effect on the success (or failure) of your focus group as they are expected to set a relaxed tone, keep the discussion focused, observe body language and other cues, and create an environment that elicits the most valuable input from your participants.

Moderators must be good listeners. They must be able to manage a group dynamic and facilitate the kind of environment that makes participants want to share. Moderators have different styles. However, a good moderator will adapt to the personality of the focus group. For example, a moderator may joke with student participants while taking a more serious tact with faculty or administrators.

An experienced moderator will effectively manage the group and keep everyone focused. A good listener can ask the right follow up questions and get your participants to share things they might not otherwise.

Analyzing the Results

Before any analysis begins, take a few moments immediately after the focus group leaves to recall the day’s events and fill in any gaps that may exist in your notes. If you’ve taped the session, transcribe it immediately and note any observations regarding body language or behavioral anomalies within the context of the conversation.

After you’ve got each answer grouped with the question it addresses, take a look at your data and ask yourself the following:

  • For each question, are there any responses that stand out?
  • Does the data answer your research objectives?
  • Are there any recurring themes?
  • Are these themes unexpected?
  • What insights have been gained?

Writing a Focus Group Report

A report on your findings should begin with a summary of your objectives. What specifically did you hope to learn from the focus group?

Be sure to include your methodology. How many different focus groups were there, how large were these groups and what questions did the moderator ask the focus group in the search for answers?

What stood out from the answers provided by the focus groups? Provide a bulleted list of key takeaways that can be scanned at a glance. These will serve as talking points when stakeholders gather to discuss redesign priorities and strategy.

Summarize Your Findings and Make Recommendations

Highlight repetitive themes, particularly if they directly address previously stated concerns and objectives. What do these findings mean for the proposed redesign? Based on your redesign objectives and focus group feedback, make recommendations to the stakeholders involved.

As one of the nation’s premier website builders for Higher Ed., Beacon has been providing colleges and universities with redesign consultation and services for almost 20 years. We invite questions or comments regarding your redesign goals. Feel free to contact me or call one of our team members at 1.855.467.5447.

This concludes part two of two. Read part one of “Creating a Focus Group for your Higher Ed Redesign” here.

19 09, 2017

Creating a Focus Group for Your Higher Ed Redesign – Pt1

By | 2017-09-21T12:51:06+00:00 September 19th, 2017|Categories: Higher Education|Tags: , |

(This is part one of a two part article)

At the time it was created, your website may have met every online objective defined by university administrators. However, things change with time. Shifting technologies, user habits and objectives change the ways in which we appeal to our target audience. A website redesign is needed every now and then. With so many audiences to address including students, prospective students, alumni, and more, this can seem a daunting task. What works well with your existing design? What needs to be changed? You may have your own ideas however, you can’t know what every user may be thinking.

Assembling a Focus Group

There are numerous ways to collect user data to assist you in your redesign. You can send a user survey or questionnaire, for example. While this method can provide some useful information, your feedback is one dimensional as there is no way to ask for explanation. Additionally, one cannot read the subject’s body language or witness the group dynamic. There is no opportunity for give and take.

I strongly suggest conducting focus groups in person, if possible. In person groups allow for follow up questions and clarification. One can more easily identify agreement across the group, provoke thought and prompt participants to offer suggestions.

Identify Your Primary Audience

Before you go any further, it is imperative that you identify your target audience(s). There may be many different potential user groups you’d like to address with your redesign. However, when you try to please everyone, you often please no one. So identify the 3 or 4 major players. This ensures that your website will have the required focus to be effective. It also works to keep your focus group at a manageable number.

How big should your focus group be?

I’ve found that the best way to facilitate the desired give and take is to keep the size of each group at around 10-15 individuals. Once you get beyond 15, it’s a case of diminishing returns. It becomes difficult for a moderator to steer the conversation and ask follow up questions if there are too many voices in the room.

Inviting Focus Group Participants

Be aware of the fact that each of your focus groups behave differently. That’s why they’re here. This extends to their willingness to participate. Extend invitations to more students than any other group. Their participation levels tend to be lower than others so provide an incentive to attend. For students, free food often does the trick.

How to Develop Questions for a Focus Group

While there are a certain number of questions you absolutely need the answer to, allow for ample time to address questions that your focus group participants have. These can be as illuminating as any questions you may have. Plan on 10 or fewer questions per 60 minute session. Answers to these will very likely lead to new questions you may have not anticipated. While the questions will differ for each of your four focus groups, there are some basic guidelines designed to facilitate meaningful responses and avoid “yes” and “no” answers.

Remember to:

  • Arrange your questions in a logical order.
  • Start with higher level questions and get more granular as you go.
  • Ask open ended questions. These include questions that address design, content and intended usage and require more than a “yes” or “no” answer.
  • Encourage questions by participants.

This concludes part one of a two part article entitled “Creating a Focus Group for your Higher Ed Redesign”. As one of the nation’s premier website builders for Higher Ed, Beacon has been providing colleges and universities with redesign consultation and services for almost 20 years. We invite questions or comments regarding your redesign goals. Feel free to contact me or call one of our team members at 1.855.467.5447.

30 06, 2017

Top 5 Accessibility Items to Review in a Website Redesign

By | 2017-07-17T07:14:26+00:00 June 30th, 2017|Categories: Higher Education, Web Development, Creative Design|Tags: , , |

Accessibility is a hot topic and an expansive one, too. I’ve been preparing for some upcoming speaking engagements with accessibility being the main focus. The first of these engagements is the eduWeb Digital Summit on August 6-10. This seems like a good time to share some thoughts regarding accessibility, WCAG guidelines and 508 compliance.

Additionally, I’d like to leave you with a list of 5 important accessibility items to review while in the midst of your next site redesign.

Accessibility Overview

Often, when administrators or oversight committees are asked to consider website accessibility while planning their institution’s website redesign, they think only in terms of addressing under-served users such as the elderly or visually disabled. Accessibility doesn’t simply address the needs of the disabled user. Adaptations and modifications made to address under-served users have broader implication, frequently enhancing the experience for all users. Designers and developers understand this and design with the idea that what is good for one is most often to the benefit of all.

Accessibility almost always enhances a website’s usability.

For example, incorporating design for those with diminished motor skills is always a good idea. It will enable all users to view your website without having to use a mouse. By doing so, you’ve also made it easier for any user to navigate the site and spend some time there. User engagement improves and, if you’re operating an online storefront, sales go up as well.

It goes without saying that any and all websites should factor accessibility into their design. To that end, WCAG recommendations and 508 standards have been established as guidelines to ensure a positive user experience for all. These guidelines have peripheral benefits, as they often overlap with best practices for mobile design and SEO. Still, there are many, many sites that remain inaccessible to a large number of users even today.

5 Accessibility Items to Review

With this in mind, I’ve comprised an abbreviated list of important accessibility items to consider when redesigning one’s website. Bear in mind that while I’ve listed 5 important accessibility items, this list is hardly complete and is meant only to provide a high level overview of what’s involved. Consider:

  1. Clear and Logical Design – This includes clear and intuitive navigation, contrast between text and backgrounds, proper use of color and more.
  2. CMS that Supports Accessibility – You’ve already considered functional requirements. Not all content management systems meet WCAG accessibility requirements. Know this from the start.
  3. Content Structure – Use headings and lists so as to clearly organize information. Use clear title attributes and page titles. Consider skip navigation for users of screen readers.
  4. Keyboard Accessible Functionality – Users with motor skill deficiency depend on keyboard accessibility to navigate your site. Other users benefit from added efficiency thanks to keyboard accessibility guidelines.
  5. Accessible Forms – Using JavaScript in forms often means that they are not accessible by keyboard alone. Testing your forms for keyboard accessibility is an imperative.

Once the items listed above have been fully considered and incorporated into the new design, the all-important testing phase begins.

Testing for Accessibility

Accessibility and usability are undeniably congruous. The benefits extend beyond just the user experience and into SEO and mobile performance. So take the time to test and test again. It’s time well invested. Fortunately, the WC3 provides a list of recommended web accessibility evaluation tools.

A Few Final Words

I look forward to seeing many of you at the upcoming eduWeb conference in August. I’ll discuss the topic of accessibility in more detail at that time. In the meantime, please comment below. Share your thoughts and experiences. We’ll pick up where we left off at the conference. See you then.

1 04, 2016

Bacon Poll: What’s the Best Kind of Bacon?

By | 2016-10-31T10:39:37+00:00 April 1st, 2016|Categories: Web Development|

With our new branding changes, we really want to get a feel for what our clients and partners think is the BEST kind of bacon out there? There are so many to choose from, but in the end, we had to narrow it down to just a few. Tell us your favorite by participating in our poll:

What’s the Best Bacon?

American Bacon
Canadian Bacon
Turkey Bacon
Tofu Bacon

17 09, 2015

Style Guides for Web Design and Development

By | 2017-06-16T12:24:15+00:00 September 17th, 2015|Categories: Cascade CMS|Tags: , , , , , , , , |

style-guide

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

2015-09-15_1518

Check out a few of the other style guides below published by some great brands.

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

  • Faster build time for new sections and pages.
  • Design consistency is easier to maintain
  • Designers, developers and content owners have a one-stop guide to reference.
  • New team members joining the project can refer to the guide for the exact style use.
  • Keeps both code and design consistent throughout the site.
  • The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.

2015-09-15_1511_001

Documentation

Documentation is essential to make a style guide successful. Your documentation is the key to keeping a consistent style and development pattern throughout the site. Documentation can be done in the code itself with comments or using interactive modals or tool tips in the style guide.

Cascade Implementation

After completing the base code you can start integrating it into your CMS system. Not only can we use a style guide for visual and front end documentation but also for how the content functions within your CMS.

The following elements can be added to help guide developers in with the site setup:

  • Formats
  • Blocks
  • Template regions such as header, footer, navigation, widgets and dynamic feeds for news/events.
  • Build out full examples of your data definition regions. See example below of Cascade Server data definition containing all site content input areas.

2015-09-15_1526

Using the guide

So you have completed building your style guide. Now what? The first step is talking to your team about how to use the guide and what updates should continue to be made during projects to it. As new member join your team reference the guide as a way to introduce them to your site styles and code languages. Utilize the style guide when testing new code or modules on your site or just as a way to present new design elements to the team. The possibilities are endless.

Your style guide will never be complete and should continue to evolve as your site does.

References

 

4 10, 2013

Progressive Enhancement

By | 2017-08-11T16:23:44+00:00 October 4th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , |

I had the privilege of attending “An Event Apart” in Austin, TX this week and feel like I have come home with an abundance of knowledge about leading practices in web development. This conference is an educational session for those passionate about standards-based web design and this year focused heavily on best practices for our multi-device world. Many developers are facing the challenges of 1000s of screen sizes and the multitude of ways people can now access the websites we create. With new devices coming out daily plus fascinating new ways to enhance sites visually and interactively, we sometimes forget that many people are still using older slower browser and devices. That doesn’t mean we shouldn’t be designing our sites without all the bells and whistles, but we cannot forgot about the other users. At the conference, one topic in general really helped explain how we create amazing sites without leaving anyone out. Progressive enhancement!

What is Progressive Enhancement?

“Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.”

Basically, progressive enhancement allows everyone, no matter what their browser or internet connection may be, to access a web page and view the basic content and functionality. If you are running a more advanced browser or better bandwidth, you will get the enhanced version of the page.

Progressive Enhancement vs. Graceful Degradation

Both graceful degradation and progress enhancement focus on how a site works in all browsers and devices. The focus and how it affects the workflow is the key between these two methods.

graceful

For many years, web designers have been using the principle of graceful degradation to make sure users in older browsers can at least see the content on a site, even if it doesn’t look exactly like the design intended. It allows designers and developers to focus on building the website for the most advanced/capable browsers. Using this method leaves older browsers with poor, but passable experience.

progressive

Rather than focusing on browser technology and support, we can focus on the content and how the user will see this content no matter what they are on. The content of your site is the most important element, it’s what brings users to your site and should always be first priority.

So how does Progressive Enhancement work?

It’s best to think of progressive enhancement as different layers. We couldn’t build a home without a solid foundation, the same goes for our websites. Each layer builds on the previous to improve the interactivity on the website without losing a solid functional base.

Content first! Start with your content, marked up in rich, semantic HTML. Having well-thought-out HTML has the advantage of not needing presentation layers to make sense. This also means screen readers, search engine spiders and those on basic mobile browsers will be able to view your content without any distracting formatting issues.

Visual Enhancements (CSS) Once your base HTML and content is ready, you are ready for the visual enhancement layer, CSS.  The majority of desktop and mobile browsers support CSS, though not all support CSS3. The CSS should enhance the content and make the overall user experience better.

Interaction (JavaScript) The final layer of our web site is JavaScript and should be handled last. JavaScript can contribute so much to the usability and user experience of a website. It has revolutionized the way sites work and how we do things online. However, your website should always work without JS and there should be an HTML or server-side scripting alternative. While most web users have JS enabled, there are still some cases where JS is undesirable and not every mobile browser or screen reader has good support for it.

Once you understand progressive enhancement, the concept of it makes sense and is easy to do. We build for the very basic structure and then build out so that no matter what device or speed someone is viewing the site at, they will always be presented with what is important. The content!

 

22 03, 2012

Top Mobile Browsers

By | 2017-06-16T12:40:13+00:00 March 22nd, 2012|Categories: Web Development|Tags: , , , , , , |

Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration when testing. Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. To get stats of popular browsers in your country there’s only one source of mobile browser market share information: StatCounter.

Apple, Google, Samsung, and RIM default browsers are among the top browsers because they support touch events and are all based on the WebKit rendering engine. The next level of mobile browsers include Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS. These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems. Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

Below is a list of all the current mobile browsers, there special features, operating systems, and devices they can be found on. Some of the browsers do not come default on phones but are among the top browsers used today.

  • Opera Mobile
    • Key Features: Multiple tabs, Zoom-in
    • Operating System: Windows Mobile, Symbian
    • Devices pre-installed with Opera:
      • Nokia N90
      • Sony Ericsson P1
      • Sony Ericsson XPERIA X1
      • HTC Touch Viva
      • HTC Touch Diamond
      • HTC Touch Diamond2
      • HTC Touch Pro
      • HTC Touch Pro 2
      • HTC Touch HD
      • HTC HD2
      • Meizu M8
      • Creative Zii
      • Samsung i900 Omnia
      • Samsung i8000 Omnia II
      • Sendo X
      • Motorola ROKR E6
  • Opera Mini
    • Key Features: Compressed downloads for fast browsing, Zoom-in
    • Operating System: Java
    • Devices pre-installed with Opera Mini:
      • Motorola V980, E2, L7, i1
      • Nokia 2610,3120c, 2700 Classic, 2730 Classic, 3500c, 3600, 3600 slide, 3710 fold, 3720, 6085, 5130, 5230, 5500, 5310, 5610, 3110, 7373, 6131, 6233, 6600 slide, 5070, E65, N95, N71, N73, 5000, 3110c, 6288, 6103, 6080, 6303, 6300and 8800 Arte
      • Sony Ericsson K310i, K530i, K550, W200i, W760i, Z530i, Z550i, Z780i, W910i
      • Samsung X160, E570, E420, F480, X510, X650, E900, E250, U700, ZV60, D900i
      • LG K880, KU250, KE970, and KU311
      • SAGEM My411x and P9521
      • BenQ-Siemens EL71 and EF81
      • BenQ EZ1 fight
      • Orange Rio (ZTE-G X991)
  • Skyfire
    • Key Features: Display rich websites with Flash or widgets like YouTube, customizable zoom feature
    • Operating System: Android, iPhone, Symbian, Windows Mobile
    • Devices compatible with Skyfire:
      • Android 1.5, 1.6, 2.0, 2.1, 2.2
      • iOS 3.1.3, 4.0, 4.1
  • Safari
    • Key Features: Display rich websites like YouTube, zoom feature, excellent touch-based user interface
    • Safari accounted for 62.17 percent of mobile web browsing traffic in October 2011
    • Operating System: iPhone
    • Devices:
      • iPhone
      • iPod touch
      • iPad
  • Google Android
    • Key Features: Display rich websites, zoom feature, touch screen interface
    • Operating System: Google Android
    • Devices:
      • Android powered phones
  • Microsoft IE for Mobile
    • Key Features: Standard browser features
    • Operating System: Windows Mobile
    • Devices:
      • IE Mobile comes loaded by default with Windows Phone and Windows CE.
  • Firefox Mobile
    • Key Features: Mutiple tabs, Awesomebar, password manager, Add-on support, PC-syncing
    • Operating System: Nokia Maemo, Windows Mobile 6.0 (alpha)
    • Devices:
      • Android 2.1 and above devices with an ARMv7 CPU
  • Dolphin HD
    • Key Features: Gesture browsing, Webzine, tabbed browsing
    • Operating System:  Android, iOS
    • Devices:
      • Android
      • iPad
      • iPhone
  • Blackberry Browser
    • Key Features: Standard browser features
    • Operating System: BlackBerry OS
    • Devices:
      • Blackberry devices
  • S60 Web Browser
    • Key Features: Standard browser features
    • Operating System: S60
    • Devices:
      • S60
      • Symbian Mobile Phones
      • Nokia N8
      • Nokia E6
      • Nokia E7
      • Nokia C6-01
      • Nokia C7
      • Nokia X7
      • Nokia 603
      • Nokia 700
      • Nokia 701
Load More Posts