6 09, 2018

Your Game Plan for Device & Browser Testing

By | 2018-09-06T12:47:41+00:00 September 6th, 2018|Categories: Digital Marketing, Higher Education, Web Development|Tags: , , |

We expect a newly designed or re-designed website to look good, be easy to use and deliver the information visitors expect. Baked into all those expectations are the assumption of basic functionality – that all the elements load and display quickly and properly, navigation menus and links actually take you where intended, and content is presented in an easily-digestible manner.

Today, we get impatient when it takes more than a few seconds for a web page to load. In the early days of the internet, however, users did not expect such a robust web experience. In the 90’s, people routinely sat in their computer chairs and listened for the chimey, electronic sing-song of their modems dialing up a connection, and waited patiently as browser homepages slowly filled their screens, one element at a time.

We’ve come a long way. Innovation constantly pushes and refines the web experience, and developers continue to press forward with new, ingenious designs and applications. There are now countless different device with varying screen sizes and operating capacities, hundreds of thousands of mobile applications and a host of popular web browsers.

A website today needs to be able to function and interact with all of these different environments. How can you guarantee that it will be able to do so?

In order to meet the expectations of your website users, prior to launch, your site must pass a rigorous battery of tests.

Understanding the Extent of Testing

The most functional websites incorporate testing throughout the design process. Testing puts the focus back on users by identifying issues that they are likely to stumble upon in their interactions with your site.

It’s impossible to know what devices and browsers your site visitors will be using. And, you don’t want to rule out an entire segment of your audience by not optimizing their experience on your site. So, it makes sense to have a responsive web design that can accommodate a multitude of available devices and browsers. This makes it necessary to test your design in all of these various environments.

Some of the things testing should cover include:

  • Functionality across all popular browsers – Firefox, Chrome, Internet Explorer, Safari, etc.
  • A check of consistent function across multiple browser versions
  • Operations with various security settings
  • User interface rendering on various mobile screens, including screen rotation
  • Compatibility with mobile device services like location finding and dialing
  • Operations when mobile device is both in-network and out-of-network

It’s also helpful to put your site through a web load performance evaluation to know how the design responds under a heavy user load.

How to Tackle Testing

Best practices call for testing to begin while the re-design is still in the development phase. You want to catch any major glitches as early as possible. The cost of applying fixes is much higher in the later stages of the development process.

At Beacon, we plan early testing around identified functional requirements. During the strategy and design phases, various elements are selected for inclusion in the new site. Part of that process is a functional requirement assessment, which produces a description of how each element is supposed to work. When a group of elements is completed in the development phase, each element is tested for adherence to its functional requirements.

A significant amount of testing is also performed throughout the HTML and Cascade development phases, with a comprehensive assessment taking place before the site is ready for launch. These efforts are centered around various use cases and can be compared with data gathered through heat maps and session recordings to see how user experience has been improved from the older version of the website.

Beacon Knows Testing

Want to know if your website is reaching all of your intended audiences? Request a free website audit from our team of web experts, and see how you stack up.

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