CrossBrowserTesting.com

A Design, Development, Testing Blog

The Div That Looks Different on Every Browser

By Leave a Comment

the div that looks different in every browser

If you’ve been around the internet lately, you may have heard of the div that looks different in every browser.

But if you haven’t or unsure of what it’s all about, here’s the situation:

A guy named Martijn Cuppens coded a div in CSS which made a fairly simple green square. However, when you look at it across different browsers, it transforms completely into another shape.

In fact, almost every browser gives you something different than the last. The shapes range from a square with a hole in the middle, to two green squares, to a solid square, to different versions of the original shape. The browser even affects color properties, changing the hues and shades of green depending on Firefox, Chrome, IE, Edge, etc. You can see a few versions in this CrossBrowserTesting screenshot test:

This phenomenon has gone a bit viral on Twitter, Reddit, and HackerNews with designers and devs scratching their heads and examining what went wrong.

If you look in CodePen, the HTML is pretty basic, but the CSS is where things get more tricky. If you have any experience with CSS, you know this is where browser rendering can go haywire.

Most devs are aware of these idiosyncrasies when developing for cross-browser problems. We can see from Martin’s code that he uses outline-offset, which seems to be what causes the issue.

Since each browser renders the offset value differently, it causes the shape to morph according to those varying rules.

“I wanted to know if there is a way to inset outlines (like box-shadow). Turned out ‘inset’ was a outline-style and a negative outline-offset can be used to inset outlines. The combination of these properties led to this result,” said Martin in a Twitter thread.

So what does this teach us? For one thing, it’s probably a good idea to avoid outline-offset. But ultimately, it reinforces the importance of cross-browser testing your code.

Martin’s div gives a visual representation of why cross-browser testing matters, and what can happen when your code isn’t cross-compatible. We can plainly see that there are so many ways for different browsers to interpret a few lines of code.

His example provided a fun insight into how CSS can go wrong, but you wouldn’t want this happening to your web application with elements looking different in every browser.

CSS can be complex, but by testing your site in a selection of browsers, you can avoid the surprise that comes when you haven’t checked how your site looks in Safari.

Join Our Upcoming Webinar on Creating a Cross-Compatible WordPress Website

By Leave a Comment

cross-compatible wordpress website

Did you know WordPress powers over 30 percent of websites on the internet? People love WordPress because it’s easy to set up and has thousands of templates and plugins that reduce development and deployment costs, making it the most popular Content Management System in the world.

Since about 75 million websites use it, there’s no surprise that WordPress developers are so high in demand. However, with thousands of browser and device combinations, it takes more than superstar coding and design skills to be successful — you also have to be an expert in cross-compatibility. Otherwise, you risk losing users and clients.

But how exactly do you make a WordPress site that’s cross-compatible? Amidst the proliferation of devices and screen sizes, there are thousands of ways that someone could visit your website.

As a copywriter, developer, and consultant for all things WordPress, Jenni McKinnon knows it’s not about just creating a beautiful website, but also creating a cross-functional once. This means having a website that works and looks great no matter where your users are coming from.

Join CrossBrowserTesting and Jenni McKinnon in our webinar on Tuesday, May 29 as we discuss:

  • What it means to be cross-compatible
  • Determining how your users are visiting your site
  • Techniques for building a cross-compatible WordPress site
  • What to look for when testing your site and how to do it

Save Your Seat

From Bad to Brutal: Performing a Risk Analysis of Your Web Application

By 1 Comment

risk analysis in software testing

Test automation is great, but even with the ability to cover more parts of your application in less time, testing everything is impossible. This is why you have to perform a risk analysis of your web application in order to decide when certain test cases get performed and how often.

There are many levels to creating a risk analysis, and deciding which tests go to the top level depends on largely on your business needs and the state of your application. However, these five considerations will give you a good place to start when trying to decide your most important tests.

  1. Most Popular and Problematic Browsers – Take a look at Google Analytics or Mixpanel to see which browsers, operating systems, and devices are being used most often to access your web page. The number of configurations you include in your testing will depend on how fragmented your user base is. You want to ensure basic functionality for at least 80 percent of your users, so if 80 percent are between five browsers, you can get away with including those five in your first tier of testing. However, if it’s split between ten configurations, you’ll want to allow more time for cross-browser testing. If you do find browser use is highly fragmented, parallel testing is a good way to check off your boxes in multiple configurations at once. But we’re talking about risk here, so you also want to think about which configurations cause the most problems for you. IE 8 always breaking? Make sure to include it in your first tier.
  2. Most Critical Unit and Integration Tests – Which tests will have the biggest impact on your bottom line if broken? For example, if you’re running an e-commerce website, the ability to enter payment details and submit them for processing is clearly important for allowing users to make a purchase. If they aren’t able to make a purchase and the application fails when they try to submit this information, they won’t be giving you their business and will probably go to a competitor. On the other hand, this will be different if you’re working in healthcare, finance, or government, for example. Identify the unit and integration tests that make up the foundation of your business as well as your application and associated risk on a scale from minimal to critical in order to determine which place at the top of your risk analysis.
  3. Most Common Landing Pages – Ask any marketer — a big part of the success of any web application is a user’s first interaction with it. This means that you should be looking at the pages with the heaviest traffic to determine which should be tested most often in regression. Choose five to ten pages that users land on most often. Whether that includes the homepage, pricing page, or the “about us” page, you want to make sure these are consistently up to par with a healthy mix of functional testing and visual testing.
  4. Security and Privacy – Ensuring security in any instances where personal information is being requested from your users should be of top importance in your risk analysis. Take note of any times where payment is being received, passwords are being entered, contact information is input, or confidential information is requested. In addition, any part of the application that may have an impact on the safety or financial status of your users should always be a priority to ensure that their data is uncompromised. Just ask the companies that have been victim to some of the worst software bugs in history — once you lose user trust, it’s hard to get it back.
  5. Extended Downtime – Which functionalities will take the longest for your team to get up and running again? While your users should usually be your first priority, sometimes risk goes beyond their inconveniences when it puts the entire team on a backlog. If you already know it’s not going to be an easy fix that could affect the application downtime for days and team productivity for weeks, it should probably be high on your list when thinking of risk. Where have you had issues in the past? History repeats itself in life and your application. Log and report areas that have a high probability of failure so you can prepare your team and avoid excessive repair time.

You have to be familiar with the risk associated with different functions and features in an application to know what should be tested first, what should be tested again, and what you can deprioritize.

While you can never guarantee that code will be deployed with zero bugs, you can develop a strategy to ensure that any issues that do slip through the cracks won’t be detrimental to your application.

Using Mixpanel for Data-Driven Cross-Browser Testing

By Leave a Comment

mixpanel browser data

Most testers know there’s much more to testing than going into an application blindly and clicking around. In fact, planning test cases and collecting data beforehand is the best way to understand who you’re testing for, what you should test, and why.

When it comes to browser testing, this data becomes even more valuable. For example, what good is it to waste time testing Opera if none of your traffic is visiting your web app through that browser?

While there are multiple ways to decide which browsers and devices to test, you’ll find the most accurate is through an analytics tool. We’ve already explored how to find this data in Google Analytics, so let’s see how to find it in Mixpanel.

  1. Go to “Analysis” and “Segmentation”, which will both be at the head of your dashboard.
  2. Go to the first drop-down menu you see on the top left and pick an event, which is an action correlated with a page on your web application. You probably want to pick a page that’s either high converting or high traffic to get the best glimpse of your customer data. For example, it might be a good idea to pick your homepage because that’s probably one of the first pages people see when they come to your website. You might also want to look at a few of these events to get a more accurate glimpse of how the data changes for different user journeys.
  3. For the second drop-down menu, you want to pick a browser. As you can see, this gives you a good look at which desktop and mobile browsers hold the majority of your users. From our data, we can see that we’d want to focus on Chrome, Firefox, Safari, Mobile Safari, Internet Explorer, and Microsoft Edge. You can refine these results by time duration and view them as a line graph, bar graph, or pie chart.Mixpanel browser analytics
  4. You could stop there, but why not get as detailed as possible? Add a segment by another dimension and set it to Operating System. This will tell you which configurations your users are on, so you can get more accurate information about what machines you should be testing. Looking at our example, you can see we would want to specifically test Chrome on Windows, Mac, Chrome OS, Android, and Linux as well as Firefox on Windows, and Safari on Mac.mixpanel browser and operating system analytics
  5. Another data point you may want to look at is devices. Mobile testing is taking center stage, and you want to have an idea of what mobile devices people are on. By picking “Device” as your main dimension, Mixpanel will give you a good idea of what you should test for whether it be Android, iPhone, iPad, Windows Phone, or BlackBerry. Once you see how many users on each device, you can decide which you want to test for.

Depending on what resources you have at hand (in-house device lab or cloud testing tool), how divided your Mixpanel data is, and the amount of cross-browser coverage your team has allocated for, you’ll want to use this information to form a risk analysis of your application across different configurations and determine the minimum number of browsers, operating systems, and devices you should be testing on. You may find that you have only five major players that need to be accounted for, or it could be fifteen. Either way, you should check this data on a semi-regular basis to maintain accurate information about where your customers are coming from.

A Brief History of Web Browsers and How They Work

By 1 Comment

history of web browsers how browsers work

We all know the basic functionality of the browser — it’s what connects you with everything on the web. Your browser allows you to shop online, watch videos, upload pictures, play games, and billions more. More technically though, the browser is a software application that retrieves and displays information from a server including web pages, text, images, videos, and other content. But that’s just the beginning.

Why do different browsers respond differently to websites, and why is there more than one to begin with? How do browsers work and where did the need for cross-browser testing come from? By understanding the history and backend of some major browsers including Chrome, Safari, Internet Explorer (IE), Firefox, and Opera, it’ll be easier to understand what goes into developing and testing a cross-compatible website.

Browser Timeline

There’s an entire history of web browsers. Before the web browsers we knew today, there were the first browsers, which are no longer in use or have highly evolved.

  • 1990 – The WorldWideWeb (not to be confused with the World Wide Web) was the first browser ever created by W3C Director Tim Berners-Lee, then renamed Nexus to differentiate from the actual World Wide Web. Unlike today, this was the only browser and the only way to access the web.
  • 1992 – Lynx was a texted-based browser that couldn’t display any graphic content.
  • 1993 – Mosaic was the first browser to allow images embedded in text making it “the world’s first most popular browser”.
  • 1994 – A noticeable improvement to Mosaic came Netscape Navigator.
  • 1995 – Internet Explorer made its debut as Microsoft’s first web browser.
  • 1996 – Opera started as a research project in 1994 that finally went public two years later. This was also arguably the beginning of the browser wars, mainly between IE 3 and Navigator 3 as Internet Explorer inched ahead with new capabilities.
  • 2003 – Apple’s Safari browser was released specifically for Macintosh computers instead of Navigator.
  • 2004 – Mozilla launched Firefox as Netscape Navigator faded out.
  • 2007 – Mobile Safari was introduced as Apple’s mobile web browser and continues to dominate the iOS market.
  • 2008 – Google Chrome appeared to soon take over the browser market.
  • 2011 – Opera Mini was released to focus on the fast-growing mobile browser market.
  • 2015 – Microsoft Edge was born to combat Google.

What’s Behind a Browser?

There are a few main components that make up the browser. For more of a deep dive to understand what happens between A (you clicking a link or typing in a URL) and B (you seeing a fully rendered web page), we can look closer at these elements to understand how browsers work.

The UI, or user interface, is basically the browser wrapper. It includes the address bar, back and forward buttons, minimize/maximize/exit buttons, tabs, and the reload page button. These are standards in all browsers. Although they aren’t technically required, all these elements are usually found on every browser page to ensure usability.

The browser acts as a client to contact the web server and request information. When you search something on Google and click on a link or enter a URL in the address bar, the web server locates and sends the information you just requested to the web browser.

It does this by first performing a Domain Name System (DNS) look to find the correct IP address. This basically means that every URL has an equivalent set of numbers – the IP address – and the DNS translates it into language so we can type “Google.com” instead of “74.125.134.102”. After that, it sends a Hypertext Transfer Protocol (HTTP) request to the web server, which sends a response with HTML, CSS, and other content files to the browser.

The browser then communicates with the network to ask for all the documents that make up the page. Browsers can also display other more advanced material like interactivity and animations made with JavaScript with internal JavaScript interpreters.

The browser engine bridges the UI and the rendering engine. This is where the rendering engine reads the HTML and XML documents and interprets it to make a Document Object Model (DOM) tree and display the content. The rendering engine of every browser is different, which means a web page will likely look different depending on the browser.

W3C Standards

So why do browsers act differently? Why can you write a web application that works properly on Firefox, but when you pull it up on Safari, certain elements are hidden or unusable?

The World Wide Web Consortium is the standards organization for the web, which has a set of guidelines for browsers to adhere certain to HTML and DOM specifications.

Because it’s not a strict set of rules, they can be interpreted differently by different rendering engines. This is largely why you see discrepancies in browser experiences. Browsers can conform the specification while still abiding by their own rules, which can cause compatibility issues.

As browser versions update, many will add in other areas or features not specified in the W3C. Whether this be for competitive advantage or just because of a grey area in the guidelines, it can create cross-browser issues for software teams.

As we already know, the rendering engine is responsible for interpreting and displaying content. Since the rendering engines of browsers are different, the content behaves different ways. Sometimes these differences are slight, while sometimes they’re major and can even make a web page unusable.

For example, Safari uses WebKit. Meanwhile, Chrome and Opera are both using Blink. Firefox uses Gecko and IE are using Trident. This means that each of these browsers abide by their own rules when it comes to rendering and displaying a web page, which can be a huge pain for developers trying to create a consistent experience.

Browser Wars

As mentioned, browser wars have been happening since Internet Explorer and Netscape Navigator went up against each other to be best in class browser of the 90’s. Netscape had previously been leading the market, but with the release of Internet Explorer 3, Microsoft took the lead. Since it was automatically included in the Windows OS, it became the standard for many desktop users.

The same situation happened when Safari came to be in 2003. Whereas Macintosh users were previously on IE or Navigator, Safari being preinstalled in Apple’s OS mean that it gained control of that desktop market.

After some time of IE beating out Navigator, Netscape made the code for the browser open source and gave it to Mozilla. However, when Firefox was introduced in 2004, it saw a rapid rise in popularity for a few years. That is until Google Chrome was released in 2008 and quickly fought to be the favored browser, which we still see today.

Of course, in between, we’ve also seen increased mobile use and differences in mobile browsers as well as the introduction of HTML5 and CSS3. This all contributes to the browser wars between Internet Explorer, Safari, Firefox, Chrome, Opera, and, recently, Edge to be the preferred browser for surfing the World Wide Web.

That competition comes in the form of frequent browser updates and version releases that you may notice today as each browser tries to one-up the other in speed, security, features, and design. For developers, many will try to program in a popular browser or a browser with a standard rendering engine so that the page is cross-compatible. For example, most people avoid developing in Internet Explorer since it’s known to be so problematic.

Modern Browsing

Today, Chrome still rules desktop browsers while Safari owns the mobile browsing market. However, there still is no defined winner. The browser wars are still going strong and fragmentation is a more prevalent issue than ever due to the frequent updates and releases of different browser versions and operating systems.

Browsers preferences are also largely dependant on demographics including age, country, and even job. For example, many schools and companies have certain requirements about what devices, operating systems, and browsers users may access and don’t permit individuals to update on their own.

Additionally, as browsers continually update versions hoping to be the next Google Chrome, there’s no saying when one will finally surpass its popularity or when another company creates their own browser to enter the mix. In fact, with Firefox’s recent Quantum version, more and more users and considering making the switch in favor of a faster browsing experience.

Not to mention, the underdog browsers still capture a distinct user base. While something like UC Browser might not capture a large percentage of the internet in comparison to the big five, it still serves about 500 million people.

So, what lessons can we take away from the history of web browsers? As software professionals, the only sure-fire way to approach this diverse user behavior is to develop web applications to be cross-compatible and test them across different browsers to make sure they’re visually and functionally acceptable.

Now that you know browser history, find out how to develop a cross-compatible website.

2017 in Review: 9 Times That Proved Why You Need a Cross Browser Testing Tool

By Leave a Comment

It’s been another tumultuous year, to say the least, both in our everyday lives and in the world of software testing. If nothing else, most of us can say that we’ve learned a thing or two in 2017.

Of course, what’s really stuck out to us is the number of occurrences that continue to prove why using a cross-browser testing tool is so critical. Here’s a roundup of our top 9 from 2017:

  1. iPhone X – Apple turned the world of smartphones on its head once again with the release of iPhone X. While the notch feature may be controversial, the larger screen suggests a new era of responsive design and emphasizes purposeful UI choices. Organizations that don’t test for emerging technology, and mobile devices in particular, will be left behind by their more cutting-edge competitors who place a larger emphasis on mobile testing. In this way, the iPhone X has exemplified the importance of staying on top of new and popular devices in testing.
  2. iOS 11 – For the iPhone users that may not be convinced to order the X in light of its hefty price tag, the iOS 11 update made its way into their lives with promise of more emojis, upgraded photo filters, a shiny new App store, redesigned control center, and smarter Siri. This means, however, that as more Apple addicts adopt the most recent iOS, you have to test on it, while keeping a few older iOS versions on hand as well (hint: we do that for you). And, if you’ve been avoiding iOS 11 because you heard there were a few autocorrect glitches, you can use us for that too.
  3. Selenium Conference – It’s obvious that the testing community’s support continues to grow and grow for Selenium, and this open source tool isn’t going anywhere, as proven by the growing popularity of Selenium Conference. On the contrary, it’s predicted to become even more widely adopted in the next few years. As automation engineers become better acquainted with best practices in Selenium, the need for cloud testing tools to more effectively and efficiently run scripts will rise as well. Not to mention, open source projects have been and will continue to be heavily supported by the testing community.
  4. Year of Chrome – Google Chrome has been users’ most beloved browser for some time now. While most can agree on Chrome’s superiority, Google doesn’t differ from other browser brands with their release history. By putting out multiple versions every year, Google can really mess with a cross-browser testing strategy that heavily relies on Chrome. In 2017 alone, Chrome had eight browser version releases. But don’t worry, we had all of them within 24 hours of release, plus a plethora of historical versions…all the way down to Chrome 6.
  5. Firefox Quantum – Of course, we can’t forget the other big browser news this year. In fact, with the release of Firefox Quantum and it’s new lightning fast speeds, some may be willing to abandon Chrome altogether. It’s a good thing we have the browser for your users who have already moved to Firefox — and you don’t even have to switch over to see what all the fuss is about.
  6. SmartBear State of Testing Survey – As per SmartBear’s first State of Testing Survey, the majority of over 5,000 professionals in Software Development, QA, and Testing agreed on the importance of cross-browser testing and include it in their workflows. Two-thirds of survey participants reported testing on mobile devices, and 80 percent of respondents reported testing on more than one mobile device. Additionally, 77 percent of respondents are doing some parallel testing by running at least two UI tests in parallel. Though the survey showed there was still much to be improved, we see a clear adoption of best cross-browser testing practices with the prediction of more to come in 2018.
  7. CBT Product Updates – You reached out to us, and we listened. Actually, we did better than listen, because we implemented a lot of new features that you requested in 2017. From the option to fast forward video playback, to test reporting, and our new integration with Applitools Eyes, CrossBrowserTesting just keeps getting better and better to provide you the most comprehensive browser testing tool on the market.
  8. #WhyTestingMatters – Whether it’s affected you personally or professionally, everyone has encountered examples of why software testing matters. From autocorrect glitches to compromised traffic predictions, testing can be the difference between gaining new customers with a great product or sacrificing your brand’s reputation. Similarly, cross-browser testing oversights happen every day. Don’t be the website that only works on Google Chrome — test the application before it’s released to your customers.
  9. Nokia 3310 – Look, we’re not saying that a ton of people are going to trade in their smartphones for a slice of the simple life or just to play Snake on the revamped Nokia 3310. All we’re saying is that we have Opera Mini if they do.

Looking Towards 2018

As we make our way into the new year, we predict to see these underlying themes further evolve. Many of these patterns that we’ve seen will continue to grow, and trends like automated testing, open source software, faster delivery cycles, DevOps, Agile, cloud-based testing, and mobile testing will become the standard for QA teams in 2018.

4 Ways to Choose Which Browsers and Devices to Test

By Leave a Comment

which browsers to test

It’s no secret that testing an application solely on the machine it was developed on isn’t the best way to know whether or not it’s cross-compatible.Once you decide between building or buying a device lab, there still comes the issue of deciding which browsers to test. After all, you can’t test everything.

That’s exactly why we’re outlining the best methods for picking which browser, operating systems, screen sizes, and devices are going to be most beneficial to your team in testing. By choosing the configurations to account for as many users as possible, you can form an intelligent desktop and mobile testing strategy.

Google Analytics

Google Analytics is a precise method of finding online user data because it looks at who’s actually coming to your website and how.

To get a list of the devices your users on on with Google Analytics, you’ll want to go to “Audience” on the left side, click down to “Mobile”, and then click “Devices”.

This will show you how many people are visiting your application on what kind of mobile device, and you can get more information by setting a secondary dimension to view additional data such as service provider, operating system, mobile brand, and screen resolutions.

Additionally, you can go to “Overview” under “Mobile” and set the Secondary Dimension to “Browser” to see find out what browsers are being used on desktops, mobile devices, and tablets.

You can also find out what browsers your customers are using by going to “Technology” under “Audience” then clicking “Technology” and “Browser & OS”.

Click “Operating System” as the Primary Dimension and set the Secondary Dimension to “Browser” for the most common configurations. Set the Secondary Dimension to “Browser Version” when on “Browser” as the Primary Dimension for more specific browser data that will tell you how what version users have.

As far as understanding your users goes, this information gives you the most accurate glimpse of the devices you should be testing on. Make a list of some of the most popular browser, operating system, and device combinations to prioritize during testing.

Most Popular Browsers and Devices

While Google Analytics is a great way to understand the current users that come to your website, it’s not very predictive nor does it account for your potential users.

Because of this, it’s a good idea to include a few of the most popular browsers and devices even if they aren’t seen on your analytics list. If a high number of people use them, it’s logical that you want your web application to support them as well.

For example, the top web browsers are Chrome 62, Chrome 61, Safari 11, Safari 10, Firefox 56, IE 11, Firefox 57, and Chrome 56, while the most popular desktop operating systems are Windows 7, Windows 10, Windows XP, Windows 8, Mac 10.12 (Sierra) and Mac 10.11 (El Capitan).

In terms of operating systems for mobile devices, the most popular are Android 6, Android 5, iOS 10, Android 7, Android 4, iOS 10 and iOS 11.

You also may want to think about popularity by regions. If you your organization is international, you will probably want to prioritize Samsung phones when thinking about testing mobile devices, for example, since they lead in worldwide popularity. However, if you’re customer base is mainly located in the United States, you’d want to focus on testing Apple products.

Of course, this will continually change from country to country and might even change month over month, so you will want to continuously check the market share for your target market.

Testing the Old and the New

You also have to keep in mind when looking at analytics and that sometimes they’re more prone to show up in a report because the web application is actually optimized for them, so it makes sense that people will visit your site and come back if the page already works for them.

If you really want to touch all the bases, it’s important to include a few old browsers. Older browsers and devices are going to be more problematic, so while it’s good to check popular models, you also want to test on ones that are less popular but still capture a percent of your users.

While IE, for example, may not take up a large portion of your user base, it’s known to be one of the most problematic browsers. You may understand that Chrome, Safari, or Firefox is a better browsing option, but someone that isn’t as familiar with technology might still be using a past version of IE on an older OS, and you may want to check that your web application still works despite their outdated machine.

You also have to consider devices that may be new to the market. While the number of devices you have now may seem like it could get the job done, new devices come out on the time. If your users have them, you want them too.

The new iPhone X is one case where testing would be important. Up until this year, Apple’s iPhones have generally taken on the same design with a few slight changes. The iPhone X was a big deal when announced because of how different it looked due to a larger screen that had a lack of bezels formerly seen on the front.

Additionally, the notch at the top of the screen has proven to be an issue during visual testing, so running your web application on a iPhone X simulator would be a smart move to avoid unfortunate design issues.

Sample List

Still don’t know where to start? Choose how many configurations you want to test and follow our testing guide based on these combined factors.

which browsers to test

The Demise of Adobe Flash Player is Approaching

By 1 Comment

adobe flash

Maybe the only thing more irritating than visiting a website just to find that the video you were hoping to view is only available if you update your Adobe Flash Player (again) is the desktop pop-up reminder telling you that you need to update your software…again. Is there an option to remind me never?

Adobe flash player

Fortunately, one of those annoyances should be resolved as Adobe is finally breaking up with Flash (sorry, you’ll probably be seeing those software update pop-ups for a very long time). In an announcement straight from the source, it looks like this particular technology is destined to go the ways of Internet Explorer 6. RIP.

Following the lead of Chrome, Microsoft, Firefox, and Safari who have already been automatically blocking Flash, Adobe is planning to completely eradicate support in the coming years. “Specifically, we will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to new open formats,” said Adobe.

But why do people despise Adobe Flash so much, in fact, that there’s even an Occupy Flash movement that aims to indefinitely “rid the world of the Flash Player plugin”? Even Steve Jobs wrote a short manifesto on his distaste for Adobe Flash, asserting that it would not be allowed on any Apple products “based on technology issues” surrounding the controversies over it’s open/closed system status and access to the “full web.”

Of course, Flash’s general reliability, security, performance, and stagnant technological support were also major issues even back when Jobs voiced his opinion and stopped supporting it in 2010 — Flash has consistently been a piece of software that just could never meet everyone’s high standards. Undoubtedly, this has become even more apparent in the last seven years.

While in itself, Flash begging to install an update is surely aggravating to everyday users, more critical are concerns with security complications that have led way to crashing, hacking, and other vulnerabilities.

Not to mention, Flash is also a pain point for software testers. Flash is hard to test — it’s buggy, it doesn’t work on mobile devices, and it generally isn’t well supported anymore. The fewer people that use it, the better for testers; although a website being improved without Flash is something almost all of us can agree with.

However, because Flash is still sometimes used in browsers to show animation, videos, and games, when Flash support ceases, thousands of websites’ content will stop working if developers don’t prepare and adopt alternatives like HTML5, and someone will surely encounter that either testing or browsing.

Apple actually experienced this briefly when Jobs cut ties with Flash, but since it’s been resolved, all smartphones (Android followed suit in 2012) have been operating without the usability burden and without consumer complaint. We expect a similar outcome as browsers are cut off from supporting Flash and nudged to use the often preferred open standard HTML5. And, since we have three years of forewarning, everyone will take likely advantage of the opportunity to transition now, which would make testing a non-issue.

Ultimately, software teams will likely be as relieved as anyone else. Standardizing HTML5 means users won’t depend on flash, developers won’t build for flash, and testers won’t have to test on websites that use Flash. As of this year, only 6.3 percent of websites used Flash, so most users won’t even notice a change.

In the end, we can be sure of one thing: Occupy Flash members are probably thrilled.

What You Missed from the Apple WWDC 2017 Keynote

By Leave a Comment

Apple WWDC17 Worldwide developer conference 2017

Image via Apple

The 2017 Apple Worldwide Developers Conference (WWDC) is taking place from June 5 to June 9th, peaking the interests of developers, tech enthusiasts, and fiercely loyal consumers.

While the entire week should be full of groundbreaking demos and innovative speaker sessions for attendees, Monday’s keynote told us everything we wanted to know in terms of new product updates and releases.

For those who couldn’t make it to San Jose or tune into the live stream, here are the can’t-miss announcements from Apple WWDC.

Top Highlights

macOS High Sierra – As an improvement to the Sierra OS, Apple is upgrading with High Sierra, which is all about “deep technologies” and innovation. Safari is now the fastest desktop browser at 80 percent faster than Chrome on High Sierra. Other features include autoplay blocking, intelligent tracking prevention, Mail and Photos app updates, Apple File System, and VR support. With these Safari and Sierra updates, Apple makes their dedication to quality over quantity clear by improving current software and hardware to perfect the user experience.

iMac Pro – We know the iMac, the Macbook, and the Macbook Pro, but the newest product release among Apple desktop offerings is the iMac Pro. With a Retina 5k color display, workstation-class performance, 18 processor cores, VR support through Vega GPU, the iMac Pro has a beautiful space gray design and will be “the most powerful Mac ever.” Start saving now, though, because iMac Pros begin at $4999.

iOS 11 – Apple iOS updates never disappoint, so it’s no surprise that iOS 11 is one of the most buzzed about topics. With a redesigned app drawer, synchronized messages between devices, Apple Pay integration into iMessage, a more human Siri voice, new Photos editing features, and a “Do not disturb” option while driving with Maps, we can’t wait to get our hands on this update. Where 86 percent of customers are on iOS 10 as of now (compared to a noted 7 percent on Android 7), it’s apparent that Apple users will be quick to hop on new iOS updates as well. And yes, we appreciated the jab at Android fragmentation.

App store – The iOS App store enjoys 500 million weekly users, has supported 180 billion downloads, and has paid over $70 million to developers. This clearly reaches Apple’s goal of making the app store a trusted and safe place for users while simultaneously being a great opportunity for developers. Now, Apple is doing “something we’ve never done before” and completely redesigning the app store for iOS 11. The new Today tab will provide even greater visibility for app developers by giving consumers more ways to discover apps and read stories from the developers who created them with features like how-to content and app recommendations. Additionally, there will be separate Games and Apps tab to organize and focus the buyer journey.

Other Announcements

iPad Pro – The new 10.5 inch iPad Pro is 50 percent larger and 30 percent faster with 40 percent GPU increase, and still only weighs one pound. With a nicer camera equivalent to the iPhone 7, a full-size on-screen keyboard, and a brighter display, the iPad Pro provides an advanced tablet experience that rivals many PCs.

HomePod – HomePod is Apple finally going up against Amazon Echo and Google Home. The smart speaker has ambient audio, spatial awareness, Siri integration, and even a musicologist to help craft playlists through Apple Music. Unfortunately, this means Spotify users will have to look at their options elsewhere.

watchOS 4 – The most popular smartwatch is getting even smarter with more intuitive workout features, redesigned music app, new Siri face, and timely content like photo memories and news stories you can save for later.

Product Updates – While the iMac Pro was the most exciting product release, Apple also announced a few updates to the current MacBooks and iMacs including a faster processor, better graphics, and more memory. Additionally, iPads will be getting a dock, a file browser, and a drag-and-drop feature.

What are you most excited about from the Apple WWDC keynote? Let us know in the comments!

What to Avoid When Designing a Responsive Web Application

By Leave a Comment

Responsive web design best practices

Remember the days when everyone had the same clunky desktop computer? Entire families shared time on one screen and dialed-up the internet; the Nokia 3310 was the norm, while Mac computers were a luxury.

However, today we have a countless number of options for communicating, browsing the internet, and completing tasks online, whether you’re loyal to Apple, or have come to prefer Android smartphones, Amazon tablets, and Microsoft PCs.

In many ways, this is a great thing — we’re convinced of our choices and hold our devices dear, although it has created a significant issue for our web designer friends. When every device, operating system, and browser responds to design differently, accommodating aesthetics on a countless number of configurations can be overwhelming.

Nonetheless, the multi-screen user demands responsive web design, so here are a few factors testers should keep an eye out for when cross-browser testing.

Readability

Smaller screens mean content will be naturally harder to read, especially if it’s not designed for different devices. Responsive web design means not just fitting a site to a screen, but optimizing it for that specific user’s experience.

No one wants to have to zoom in to view content. Instead, it should follow a layout that makes sense for varying screen sizes. Especially for older users or users with disabilities, if text content is too small, they’re probably not going to spend much time trying to figure out what your site says.

Ads and Popups

Too many times site owners will implement some kind of advertisement without making sure it’s responsive. As a result, customers end up visiting pages and encountering pop-ups that don’t explicitly allow them to exit or even continue using the page.

While pop-up call-to-actions and paid ads may be an integral part of your marketing strategy, consumers won’t buy if they physically can’t use the site — that’s just common sense. If your testing shows that pop-ups make it impossible for visitors to shop, it’s probably time to take another look at some elements of code in your overlay.

UX

It’s easy to think of responsive web design just in terms of visual layout, but to be truly responsive you have to consider the way a user interacts with different devices.

Simply put, on a laptop, you’re using a cursor and keyboard, while on most phones and tablets you’re using your fingertips. This is going to create an entirely different user experience as your point of touch is larger and less precise when you’re using your fingers on a smaller screen. This means that many of the functions, navigation buttons, and links that work for users on laptops and desktops might have to be altered to satisfy the mobile user

Rotation

Feeling overwhelmed by the number of devices, browsers, and screen resolutions you have to test for responsive web design? Bet you forgot about screen rotation.

That’s right, not only do you have to optimize your website for users on small, vertically positioned smartphones, you also have to test for what happens when someone turns their phone or tablet on its side to view content horizontally.

Additionally, there’s nothing that will turn a user away faster than telling them they have to turn their phone screen a certain to way view content. If you’re asking users to do this, you haven’t made your website responsive enough.

A word of advice — don’t make your application an obstacle course by requiring users to alter their preferences to accommodate your site.

Layout

When text, images, and other elements aren’t properly optimized for responsive web design, there are a few common annoyances that occur.

  • Wrapping – You know when a navigation bar or a word in a headline goes off-screen and continues on the next line? Yeah, that doesn’t look good to your users.
  • Spacing – Extensive white space between elements, unaligned text and images, and seemingly endless scrolling do not contribute to a happy mobile user.
  • Overlapping – Text and image overlapping is not only atrocious and unprofessional to look at, it’s also notably harder to read.
  • Distortion – When a text or image tries to fit a space it’s not designed for, your website will start to look like it went through a fun house where content stretches and condenses to try to fit.
  • Disappearances – Even less fortunate than wrapping and distorted elements, portions of fixed width images tend to disappear completely if they don’t fit onto the page.

Testing Responsive Web Design

While this may seem like a lot to take in if you haven’t yet approached responsive web design, it is crucial to test for these details.

While many of our shopping habits have predominantly moved online, marketers have realized the value of a mobile-first mindset, and responsive design is a requirement for retailers who want to keep customers on their site.

At the end of the day, no matter how a visitor gets to your page, they should all be afforded the same usability across devices and browsers. To learn more about designing for cross-compatibility, check out our designer’s resource.

What are the worst responsive design disasters you’ve experienced? Tell us about it in the comments!

Join Over 200,000 Testers & Developers And Start Testing Today

Learn more Free Trial