CrossBrowserTesting.com

A Design, Development, Testing Blog

The Marketers’ Guide to Testing Your Website

By Leave a Comment

Marketer's guide to testing
Software testing has traditionally been the job of Quality Assurance teams, but as organizations realize the inherent value of a seamless online user experience, the idea of testing has also proven invaluable to other roles.

As marketing professionals evaluate the effectiveness of their strategies, tactics, and content, it’s no longer enough to blindly publish landing pages, design websites, and send emails.

By performing the following tests, marketers of all levels and ensure that the intent of their messaging matches the execution.

A/B Testing – Sometimes, it can seem like communicating with prospects can be a shot in the dark. A/B testing lets you test two scenarios at once to determine which your audience responds to better. The is often done with on web page or app to better understand how you’re communicating with your prospects. For example, if you were unsure what to write for the header on your website, you could A/B test two versions against each other to gain insights into what resonates best to capture leads and use that data choose A or B. In addition, analyzing the results of your test helps you make informed decisions that will convert leads in the future, such as the next time you have to write a page heading. Optimizely is the deluxe A/B testing tool, allowing you to go into your page and live edit through the dashboard to make tests. Optimizely keeps all your data organized, and includes value-add features such as retroactive filtering, intuitive stats engine, optimized targeting options, and saved audiences. For teams that are looking for something that will fill their more basic A/B testing needs, VWO is a comparable option.

Responsive Design Testing – Did you know that having a responsive website improves your SEO? We bet your ears just perked up. It’s true — Google prefers sites that are responsive. What does this mean for you? Basically, you need to make sure that your site works not only on desktop browsers but also on other screen sizes such as mobile and tablets. It’s not surprising the mobile use is increasing year after year, not to mention exceeding online desktop activity. While the thought of mobile-friendliness should be a no-brainer, it may not always fall on the marketer’s plate to design responsively. However, when it has a stake in your page ranking, it becomes a whole other story. Tools that provide a device lab and visual testing capabilities like CrossBrowserTesting can help give you a look at what your website looks like on those devices you don’t have access to. This is a fairly easy way to guarantee the compatibility of your site with the most popular search engine so you can make sure all that backlinking work you’ve been doing isn’t for nothing.

Email Testing – If you’re slaving over email marketing but keep seeing your open rates drop, it might not be that your copy is lacking as it is as much a lack of testing. Just like you need to make sure your website looks good on different devices, you also need to make sure your emails look good on different email servers. Unfortunately engaging email messaging isn’t always enough when Gmail and Outlook are displaying content differently — unless you stick to HTML. Litmus provides a platform that lets you build, edit, and preview your emails on over 90 different email clients (did you even know there were that many?) because the only thing worse than an email that goes out with a typo is an email that doesn’t show up at all at all. Speaking of errors, Litmus does a crawl of your email to make sure that links work, images render, and content loads so you can feel confident in every email you send out. By using a tool like Litmus, you can stop leaving your emails up to chance and spot discrepancies before you send them out to your 100,000 count subscriber list.

User Testing – What’s a better method to getting feedback on your digital experience than asking the very people whose opinions you care about most — your users? User testing is an unparalleled way to get feedback from real people on the usability of your application. When you have a website, for example, it can be difficult to put yourself in your users’ shoes and think about their needs outside of how you would want the application to look and work. User testing lets you gain insight into the user experience of someone who may not have been on your app before, and platforms like UserTesting provide you with videos of those real people giving their honest feedback on your website, mobile app, or another project of your choosing. By getting your product in front of your target audience, you can get more accurate insight into why your users perform certain actions or want things a certain way.

Performance Testing – Performance testing is fairly underrated in the marketing world, but it could be what makes or breaks the success of your application. Why spend all your time making the perfect graphics, designing the perfect layout, and writing the perfect copy if your website is going to take forever to load or crash when too many people visit? When 51 percent of online shoppers in the US say that site slowness is the top reason they’d abandon a purchase and a 2-second delay in load time during a transaction result in abandonment rates of up to 87 percent, according to Radware. It’s not just your QA team’s problem to test for performance. In fact, it’s in your best interest to see your marketing efforts succeed. Leveraging tools like LoadComplete and LoadUI will help you determine breakpoints in your application so you can get a better understanding of how fast it is and how much it can handle. Trust us — around the holidays, performance testing is a lifesaver.

Conclusion

Testing is all about checking the quality of your application, but it shouldn’t be limited to QA teams. With plenty of tools on the market, it’s becoming easier for marketers to conduct their own tests in order to optimize websites, landing pages, emails, and other content. By including testing in your marketing, you can know that your efforts are reaching a higher level of quality and trust that your messages are getting across to more users each time they interact with you online.

 

Exploratory Testing Techniques for Your E-Commerce Site

By Leave a Comment

exploratory testing techniques ecommerce website testing

Though test automation has been a saving grace for when checking previously written code coverage, we know that there is no substitute for manual testing. Whether you follow the traditional waterfall method or are practicing agile development with your team, exploratory testing plays a critical role.

Anyone who owns or manages an e-commerce website especially knows this to be true. What’s the use of automating a script you derived out of thin air? Instead, exploratory testing with real, human testers provides insight into functionality, performance, and usability of the application.

In order to better understand some of the most important areas to cover when conducting exploratory tests on an e-commerce site, we put together a few steps to consider when live testing.

  1. What happens when someone tries to log in? Is the user directed to the correct page after they logged in and does it load properly? What happens if they put in the wrong information — do they have to re-enter email and password every time or does it stay in the field? What do any error messages say and is it easy to retrieve a forgotten password or use existing login data? Whether your web application prompts a login as soon as someone lands on the home page or just in order to log into their account at payment, you want this to be a seamless experience because if someone has trouble logging in, there’s a good chance they won’t end up purchasing.
  2. How user-friendly are the form fields? If your website is good enough that a customer can easily make it to check out, you don’t want to trip them up on the last few steps of their purchase as the fill out form fields like name, address, and payment information. Unfortunately, however, this is still something many websites have yet to master. Are you asking too much information or not enough? How long does it take to get one from their shopping cart to a finished checkout? Make sure that promotion boxes and purchase total calculations function correctly. Additionally, you’ll want to make sure that all payment processing works, so that customers who are trying to use PayPal won’t encounter an issue that someone charging to their credit card wouldn’t get.
  3. What’s the experience like on mobile? Speaking of form fields, they can pretty much make or break the mobile user experience. You want to make sure that each field takes up most of the screen when a user goes to fill it in, or someone going through checkout might become frustrated at how hard it is to see and type their information to make the purchase. You’ll generally want to make sure the website design is responsive, which may mean implementing different types of features and designs for users that do not access the site on a desktop in order to make it easier to use and look at. Consider all the ways that the buying process differs with a touch screen and a scaled down keyboard. Of course, it’s best to test for mobile on a few real devices to truly understand how these different functions come into play.
  4. How long do different pages take to load? First of all, you want your homepage to load quickly because this is where new and returning traffic will start, and you want to make a good first impression. However, you also have to consider other areas of your application that don’t get the same level of traffic but are equally as important. Does the last product page load as fast as the first or second one? Do some categories perform better than other? What happens in the shopping cart — is the site laggy when it tries to process a user’s input information? Basically, where does the site trip up that could affect the buyer’s journey and deter them from fulfilling their purchase? Don’t forget about load and performance testing.
  5. What happens when you abandon the site and come back? How much progress does the page save and for how long? What about if the page is reloaded? Will someone be logged out or have their cart emptied if they leave for a few minutes? You have to consider the fact that not every user will have the same consistent experience with your application from beginning to end. They might view a product on multiple devices or keep the tab open while they check your competition, and you would hate to lose them when they come back to buy because you haven’t made it easy enough to pick up where they left off.
  6. What could be better from a usability perspective? You know what they say — if it’s not broken, don’t fix it. Except, this isn’t necessarily true when you’re talking about developing and testing a web application. Just because you don’t find a bug in your exploratory tests, doesn’t mean there’s no feedback to give the developers. Consider not just how to fix the application, but what would make it more intuitive for your users. Could the navigation be in a better place or the contact information easier to find? Are there design components that could be more appealing and is the site accessible to a broad range of users? Is there a to make searching for specific products easier such as different a filter? Usability testing will assure your website remains a popular destination.
  7. How functional are different elements? It takes a testers eye to look beyond just the surface of the website to assess whether it really works the way it’s supposed to. Test search algorithms and results. Experiment with different filter combinations. Check calculations and confirm results. Any time a user has to input information or interact with the website, you should be testing whether or not that the application is responding correctly.
  8. What happens after a customer has completed their purchase? You’ve made it through and impressed (or avoided-annoying) a customer long enough. But you also want to make sure their experience is excellent from beginning to end so that they come back next time. Make sure that the page redirects to something thoughtful so that the customer understands their order is being processed. Give them options to review and cancel their order, contact customer support, and access tracking information. Each of these components needs to be tested to make sure that data is accurate and the functions work.

How to Create a Winning Mobile Test Strategy

By 2 Comments

crossbrowsertesting mobile testing strategy
With the conception of responsive web design, it’s become easier to build and enjoy the mobile web on any screen or device. As more and more users carry higher expectations from their mobile experiences on an increasing number of smartphones, understanding the principles of designing responsively is no longer a unique skill, but an essential one.

However, as developers and designers start thinking mobile-first, somebody has to make sure that it actually performs accordingly. Any experienced mobile testing strategist knows that it takes more than one test on one device to provide broad mobile coverage. In fact, mobile testing takes a comprehensive strategy and is becoming more complicated with these changing user behaviors.

That’s why we’ve prepared this guide that includes the four steps to lead you to a successful mobile test strategy. By better understanding the necessary parts of mobile testing, you can be more prepared to create an exceptional mobile experience for every user.

1. Consider usability from a mobile perspective – You want to have a great design for your mobile application, but at the end of the day, customers are going to either stay on your app or leave it based on usability. The UI should be customized for mobile users, which means it’s going to be different than the desktop experience and has to be tested that way.For example, form filling proves to be much more difficult for a mobile user. If a form isn’t optimized correctly, users will often encounter issues where forms are hard to fill out with their touch and keyboard, whereas they don’t have issues on a laptop or desktop computer. Considering how people view and use content on a small screen is key to derive insight for testing. Additionally, interrupt conditions (i.e. what happens when a notification or other actionable pop-up takes you out of your current task) don’t affect desktop users, but they need to be tested on mobile applications to evaluate functionality and performance. These are the components you have to consider that you may not think about when you’re using a laptop computer if you’re testing for mobile users.

Not to mention, testing for UX will become more difficult as mobile devices become more diversified. Device fragmentation is already an obstacle for most testers. In a perfect world, it would be possible to test on every device, browser, operating system, and even screen resolution. In reality, there are thousands of configurations and that just isn’t plausible. Today many phones have similar designs and screen sizes, which means that most people can get an adequate account of their cross-browser compatibility with a few phones. However, with new releases such as the iPhone X and Google Pixel XL, it looks like mobile devices are trending towards bigger screens and narrower bezels, making you wonder what the future of digital media consumption will look like. As designers have to start planning for usability concerns like the iPhone’s notch, testers will be tasked with diversifying their device labs.

2. Utilize your toolkit and testing knowledge – You don’t have to go mobile alone. In fact, there are a plethora of tools specifically to make your life easier when testing. When thinking about open source options, Appium is the way to go for most testers who want to automate. This means that you don’t have to perform the same manual actions over and over again on every new device, but it does take some skills, such as coding. Learn more about getting started with automation as a manual tester here. Some testers also use other free tools like Robotium, Selendroid, MonkeyTalk, Calabash, and Frank.

There are also paid options that can help make your testing strategy even better (and faster). TestComplete allows you to create and run repeatable and robust UI tests across iOS and Android apps. CrossBrowserTesting, on the other hand, lets you run automated parallel tests across multiple browsers, devices, and OS at once. But you can’t forget about manual testing either. With over 1,500 browser configurations available for live testing, you can go through and debug on different devices from the comfort of your preferred desktop browser. Additionally, our full-page screenshot comparison tool makes it easy to spot inconsistencies and remotely debug across browsers. And, the best part is that the integration of these tools allows you to use them together.

Of course, deciding when you should test manually and when you should be automating is something you have to use your knowledge of testing best practices. It won’t do you any good to show of your test automation skills without running any exploratory tests first. However, if you depend solely on manual testing you probably won’t get much done in your workday, or if you do it won’t be on very many different devices. Either way, it’s not a great strategy. Look over this resource for a refresher on the best times to test manually vs automating.

3. Pick & prioritize configurations – It’s not just enough to have the right testing tools, you also have to have the right devices to test on. This isn’t a time to trust your intuition — collecting data and analytics on user behavior will be the best way to figure out which screens you should be running your application on.

Google Analytics is a popular method to look at the mobile devices your site’s visitors are using the most. You can use Google Analytics to see what percentage of users are accessing your website on mobile, as well as more specific data such as the device brand, model, service provider, operating system, and screen resolution. You can also use secondary dimensions to see what browsers they’re using. Additionally, you want to make sure you’re testing older browsers that may be more problematic because that’s the point of testing — catching bugs wherever you suspect they may be.

Another way to account for current and potential users is to look at the most popular browsers. You can do this either by region — for example just looking at the United States — or by looking at the most popular configurations worldwide. For example, according to NetMarketShare, Chrome 60, Safari 10, Android Browser 4, Chrome 59, and Chrome 61 are the most popular mobile browsers right now. Testing a number of these popular browsers means you can be sure that you’re targeting the majority of users that will likely land on your website instead of just the people who already have. By looking at both your user data and the most popular configurations, you should be able to get a good handle on where you should be testing.

4. Choose between emulators, simulators, and real devices – Emulators, simulators, and real devices all have their advantages and disadvantages, but ultimately, they all have their unique purposes and use cases. For the very best mobile test strategy, you should ideally have a mix of emulators, simulators, and real devices. This way, you can approach speed, accuracy, and scale at once.

Emulators and simulators both mimic the functionality of real devices and can imitate a user’s actions. While emulators are a little closer to the real deal since they replicate the software, hardware, and OS, simulators come pretty close to copying the internal behavior, although they do not emulate hardware or work on the OS. While both emulators and simulators are assets for fast mobile testing with unavailable devices, they don’t always encounter the same environmental factors as a real device and therefore aren’t always as accurate because many factors can affect the validity of the results.

Using real devices, on the other hand, means that you’re testing the same way your customers are using their devices, so accuracy is spot-on. This can be especially important when looking at performance or usability. To achieve the precision of real devices, though, you need a real device lab. Whether that be a physical device lab you build yourself or one you access remotely in a cloud is up to you, but it does generally require investing in more costly resources.

Conclusion

Not just anybody can be a great tester, and similarly, not just anyone can create an effective mobile test strategy. However, if you want the large percentage of users that visit your application on their mobile devices to be able to interact and engage, knowing your stuff when it comes to mobile testing is key.

A mobile test strategy isn’t built overnight, but understanding the different components will help you start from the ground up. By understanding how to test on mobile devices, which tools to use, and which machines to test on, you can release new integrations with confidence that users won’t be subject to any wacky behavior that desktop users don’t have to deal with.

The Past, Present, and Future of Testing Responsive Design

By Leave a Comment

History of responsive design

The Inception of Responsive Design

Ethan Marcotte coined the term “Responsive Web Design” when he published an article outlining its definition and components in 2010.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

In Marcotte’s responsive design article, he made a case for combining media queries, flexible widths, and flexible images to respond to different devices rather than creating multiple versions of a website.

But what exactly are these elements that Marcotte say make up responsive design?

  • Media queries – The rules that tell content to behave differently on different screen resolutions and adapt to conditions by defining style rules and breakpoints in CSS.
  • Fluid grids – Content inside the wrapper of a fluid grid has percentage widths and proportional values in CSS that adjust to different screen sizes rather than a static layout.
  • Flexible images – Images and other media that resize with ratios and percentages in CSS depending on how large the window or screen is to keep images in container widths.

While many designers had previously utilized these properties on their own, none had thought to integrate the methods to make a website responsive as Marcotte exemplified.

Combining these practices is what revolutionized the idea of responsive design as we think of it today to achieve optimal user experience on every device and browser.

The Need for Responsive Design

Once upon a time, when first iPhone was released in 2007, the idea of accessing the internet on a mobile device was revolutionary. Having a web app that people could access on their phones was a huge competitive edge for companies that were trying to make their products and services stand out.

Luckily, once people had the design and development part down, testing was fairly uncomplicated in the early years of mobile technology. There were only a few different smartphones on the market and equally minimal operating systems, which meant that testing could be taken care of by going through a few different devices. This also meant that a lot of companies could get away with creating one static mobile website and one desktop version.

As time went on, however, designing for the mobile web became more competitive, and most businesses had a mobile website. Additionally, more choices of phones, versions of operating systems, and browser options also made the user experience more diverse.

This meant that just having two websites no longer made sense; the only way to survive on a mobile web viewed on various screen sizes and resolutions was to optimize for all of them at once. Thus the need for Marcotte’s concept of responsive web design in order to respond, react, and adapt to different screens.

Fast forward a few more years and today there are even more fragmented ways to access the web. As of 2015, there were over 24,000 unique Android phones, which is 6 times more than in 2012. Since then, new devices and operating system updates have still been consistently released, leaving us only to guess how many more have been added.

Of course, this means responsive design is more important than ever, but it’s also more complex. While the concept of responsive design maintains the same, testing on all the necessary machines has become a lofty goal, and maintaining extensive and expensive device labs to cover all these options and keep up with emerging ones is becoming more and more difficult for organizations.

The Future of Responsive Design

As we watch a continuous proliferation of devices, we can only expect this will continue in the future, and devices will become more fragmented. If you think developing and testing for responsiveness became difficult with the sheer number of phones on the market, it’s sure to become more difficult as the devices themselves become more distinct.

For example, as most mobile phones followed the lead of Apple’s original iPhone design to some extent, upcoming device releases are starting to follow new trends. For example, the Google Pixel 2XL, iPhone X, Galaxy S8, and Huawei Mate 10 are all showing that big screens and small bezels will be the preferred style as customers choose to upgrade.

When small devices are getting larger and large devices are going smaller, hardware companies are trying to gain a competitive edge with unique, breakthrough models, making it tougher to predict just how we’ll design applications to be truly responsive in the coming years.

Take the iPhone X, for example, the front of which is virtually entirely touchscreen except for one notch containing vital functionality components. Upon first look, the newest iPhone seems innovative and sleek. But for those who have to design with the notch in mind of UI/UX, it calls into question how we can make applications responsive to devices that will not fit the customary smartphone mold.

Additionally, while there’s certainly a number of different kinds of devices to choose from now — phones, tablets, desktops, laptops, notebooks, watches, etc. — it’s presumed that we’ll be connected to even more types of screens in the future with a projected 34 billion devices connecting to the internet by 2020, up from 10 billion in 2015.

Not to mention, screens may take different forms than the flat objects we’re used to now; they could be foldable, bendable, or expandable. As we begin to see new devices becoming more and more unique, it’s almost impossible to determine how we will meet the needs of futuristic responsive design.

So, how can testers continue to consider responsive design well into the future? Our advice is to gather device configurations as they’re released, master the balance between manual and automated testing, and follow a set mobile testing strategy.

responsive design infographic

Created with Canva

Meet Apple’s Rival, Google Pixel 2 and 2 XL

By Leave a Comment

Google Pixel 2 and Google Pixel 2 XL

With Apple recently announcing new iPhones, it’s no surprise that Google has followed close behind with a competing offer. At Google’s launch event yesterday, the Pixel 2 and Pixel 2 XL were announced, along with a few snide remarks at Apple’s expense.

The first Pixel phone was revealed a year ago to put Android power up against iOS, and this year, Google’s continuing the rivalry. As Apple released three new phones at their last event, Google is hoping that the two Pixel versions will make Apple advocates think twice before they buy.

The Pixel 2 has a 5 inch OLED screen while the Pixel 2 XL comes in at 6 inches, confirming that bigger phones with larger screens and thinner bezels are going to be gaining popularity in the coming years.

Both Google Pixel phones also have an aluminum body, glass back, water resistance, better battery life, and the (controversial) elimination of the headphone jack — features similar to the newest iPhones.

There are a few features that are unique to the Pixel, however. Google Assistant is supposedly better this time around and can be launched by squeezing the edges of the phone, which is a fun albeit gimmicky feature. The Pixels also have At a Glance display for information like calendar events and Always On lockscreen for notifications even when the screen is on sleep.

Additionally, the Pixel phones only have one camera as opposed to the iPhone 8 Plus’s dual camera system, but the cameras also include enhancements like optical image stabilization and Portrait Mode to make it just as appealing.

One thing that really sets these Google phones apart in the photography category is unlimited Google Drive storage for pictures and videos. The ability to have endless free storage will undoubtedly be attractive to consumers comparing cameras before buying.

The Pixel 2 and Pixel 2 XL will also be the first phones to include the Google Lens software that was introduced at Google I/O. Through the phones’ cameras, Google Lens will be able to identify real-life elements and gather information about them to display to the user. Google Lens has a lot of promise in the world of AI, but it’ll be interesting to see how successful it will be in the eyes of customers upon release.

The Google Pixel 2 starts at $649, while the Pixel 2 XL will cost $849 for the least amount of storage at 64GB – that’s still $150 less than the iPhone X which will cost you $999 for the same GB. Both the Google Pixel 2 and 2 XL are available for pre-order now and will be available in stores by October 19.

In addition to the two newest phones, Google also released a few other products including Home Mini, Home Max, Pixelbook, Daydream View, Clips, and probably the most interesting addition to the product line, Pixel Buds, which can translate 40 languages in real-time directly to your ear.

Of course, what we’re really all wondering is which will be better — the iPhone X or Pixel 2 XL? Consumers are divided with their opinions, but only release dates will tell.

A Look at the iPhone 8 and iPhone X

By 2 Comments

Apple event iphone 8 iphone x

At the first-ever event at the Steve Jobs Theater in Cupertino, California, Apple made some big announcements updating their product line, specifically the 10th annual iPhone launch. Most people were expecting and looking forward to the unveiling of iPhone 8 and 8 Plus, but Apple surprised audiences by revealing the iPhone X (pronounced as 10) as well.

The first thing you notice about the iPhone X is its new design. In lieu of a home button and bezels, the 5.8 inch OLED display is almost entirely screen. Apple also traded in the aluminum structure for glass and stainless steel to make it more durable, waterproof, and dust resistant.

Not only has the look of the iPhone changed — Apple is completely rethinking the ways we’ll be able to interact with our devices in the future. One of the most talked about features is the iPhone X’s FaceID. Since there will be no physical home button, developers had to find a new way to allow users to unlock their screen instead of with their fingerprint — what better than with your face? The True Depth camera system can detect and recognize a user’s face from any angle, so you can basically unlock your phone with a selfie.

A few other features people are excited about on the iPhone X include longer battery life, animated emojis (Animojis) that can mimic your expressions, wireless charging, and 12MP dual rear cameras with Portrait Lighting effects.

As far as the iPhone 8 and 8 Plus goes, changes were a bit less outstanding. While a similar all-glass design is implemented, the phones both have bezels and some have observed that they look similar to the 7 and 7 Plus. Like the X, the iPhone 8 also has wireless charging, True Tone display, an A11 Bionic smartphone chip to power AR apps, and a more advanced camera with Portrait Lighting and Optical Zoom.

The iPhone 8 is available for pre-order September 9 and in stores the 22nd, while the iPhone X won’t be available for pre-order until October 27 and in stores November 3. Many have pointed out the hefty price hike, especially with the iPhone X which comes in at $999 for 64GB and tops out at $1,149 for 256GB.

While a price increase is somewhat expected due to the top-of-the-line features and innovative technologies, some consumers are finding it doesn’t justify the price when all they really wanted was the headphone jack back.

Additionally, designers, developers, and testers may find a hard time adjusting former web applications to work for the iPhone X interface. Thinking about the way it renders and displays web pages in the browser will prove a challenge with a longer screen that has no bezels. This goes to show that as devices become more advanced and diverse in the future, testing for different interfaces will become increasingly important.

 

No matter how harshly people critique the iPhone X though, almost everyone can agree Tim Cook presented some pretty ingenious new features, and we know when November 3 hits, the line at Apple will be out the door.

How to Make Your Website Mobile-Friendly

By Leave a Comment

Mobile-friendly native web app

It’s a no-brainer to optimize your website to be mobile-friendly. As of 2016, 80 percent of Americans own a smartphone of some kind, and 27 percent of people only use a smartphone in an average day (which is 2 times as many as those who only use a computer), while 57 percent use more than one device. We spend almost three hours a day on mobile devices, and 94 percent of mobile users browse the web on an average day.

However, though the idea of mobile-first is surely tempting, there are many methods of taking your site to the mobile web. Deciding which direction you go will determine associated costs and maintenance as well as ROI, and some options may be better for certain time allowances, skill sets, budgets, and business goals than others.

Methods of Designing for the Mobile-Friendly Web

Web and mobile versions

Quite a few big name sites still have two versions of their website — mobile and desktop. You can usually tell a site has two versions because accessing it on your phone will have an “m.” in front of the normal URL.

The problem developers have found with two different site versions is that upkeep and maintenance get tricky because having two separate designs means that anytime that code needs to be changed, it needs to be integrated differently and tested separately on each one.

Not only will two websites prove to make things difficult for teams who want to be continuously integrating features, but it’s also not an adaptable strategy for an evolving technological environment. When you consider the ways today’s consumers access the internet, there are all kinds of variables that affect how they’ll see the web as smartphones continue to get bigger and tablets continue to get smaller.

By definition, having only a web and mobile-friendly version means leaving out a plethora of devices, browsers, and screen sizes. Only having two versions of a website doesn’t account for the fact there are more than two screen sizes users will look at it on. As web options continue to become more plentiful and more fragmented, having two rigid site structures may not be the best way to safeguard your site for the future.

Native mobile app

A native app is probably what first comes to mind when you think of an app — the icon you can download from your smartphone’s app store that sits on your display screen and opens with a tap.

The pro to native mobile apps? Push notifications, or the little alerts that pop up on your phone screen to let you know you’ve been tagged in a picture or someone “liked” your status. Push notifications are a great way to keep users engaged and draw them back to the app. In fact, one study found that apps that utilize push notification achieve up to three times more retention, and users are three times more likely to reopen an app with push notifications than a website.

The biggest con of native mobile apps? Taking up phone space and memory. Smartphones are so expensive today that people will often end up picking the device with the least amount of memory in order to save some cash. While 32GB seems like a lot of room, it fills up quickly with media, messages, and must-have apps. Most people aren’t downloading any new apps on a montly basis. But even if you convince people to download your app, the more time goes by, the more chance they’re going to delete it to free up space for pictures of their kids or cats.

Another study actually found that every step you make a user perform on a native app increases the chance they will delete it by 20 percent. By the time they find it in the app store, download it, open the app, and sign up, only about 40 percent of original users remain, and it just goes down from there. In the end, if you can’t convince users that they need your app on a regular basis, it’s likely to go the way of Angry Birds and Temple Run.

Additionally, native apps are designed for a specific operating system. This means iPhone and Android apps must be created separately from each other — an app made for iOS can not work on an Android phone and vice versa. Similar to having two different websites, this means designing and maintaining two different native apps.

Hybrid app

Hybrid apps, as you can likely tell by the name, combine some similarities of both native and web apps. A hybrid app uses a native container (which means it looks like a native app) and a web app’s web code (HTML, CSS, and Javascript) for what some consider the best of both worlds since it’s quicker, cheaper, and easier to build than native apps.

To clarify, this means that while a hybrid app mimics a native app since you have to download it from an app store, but it’s built like a web app, which means it performs a little more like a website in a browser. Additionally, physical device features that could previously only be accessed through a native app like camera and microphone can be also utilized in a hybrid app.

Progressive web app

Progressive web apps are fast loading, cross-browser compatible, and can even work offline, making them increasingly popular among mobile developers. In fact, a progressive web app is basically just a website that performs more like a native app on mobile devices, which a lot of people find contributes to better usability.

Since it can be accessed via the browser, it skips the step of finding and installing an application from the app store, which in turn takes out the associated risk of it being deleted. Even though it’s in the browser, you can also find it on your home screen when saved as a shortcut so it’s easy to get to with a tap. It should also work on any device, regardless of OS, making testing a lot easier than for other kinds of applications since it only has to be done on one platform.

Of course, if it was all that easy, everyone would be making progressive web apps, right? Unfortunately, with all these benefits comes high development costs and they are often much more complex to build, requiring specialized skills utilizing Service Workers and Web APIs.

Responsive web design

Responsive design is the process of combining media queries, fluid grids, and flexible images to develop a website that adapts to any browser or device size. Though responsive design does require knowledge of these principles, once a website is made responsive it takes very little upkeep, allowing you to keep a single code for the entire website and thus only requiring you to integrate new features once.

Additionally, when done right, responsive design provides first-class usability for users on almost any device, from laptop to tablet to smartphone. This means that you could depend on one website to reach all potential users.

A few have attempted to argue that responsive design isn’t worth the time, energy, or cost, but over and over again we see that a responsive site is one of the only ways to ensure a positive experience on any screen and thus ensure their user satisfaction and business (and most of the time you will see an angry mob of disagreement in the comment section of any blog that does try to argue this).

Even if you do decide to splurge on a progressive web app or native app, responsive design should still remain a part of your main website to ensure different user environments are accounted for when accessing your web page through a browser.

Combination

There’s always the option to leverage more than one of these options. For example, some sites that go the route of having a set mobile-friendly and desktop versions will also have a native app.

This is frequently done to make up for a lack of user experience on the web app by encouraging them to download the native app for a better experience, but also allowing them the option to continue on the mobile web version.

While this may be strategic depending on who your users are, it can also be annoying for users to be pushed to download an app they don’t want or forced to endure poor usability.

Again, you also want to keep in mind the more different applications you design, the more you have to maintain, which is a big reason why responsive design has become so popular in the coming years so developers only have to keep up with one version that works for everyone.

Mobile Testing

Of course, all your development and design efforts with any of these mobile-friendly options will go to waste without an A-game testing strategy. By using an arsenal of real devices for testing in addition to mobile emulators and simulators, you can determine whether your app functions correctly and look goods regardless of device, screen size, OS, or browser.

Additionally, while testers have flocked to the likes of Selenium as an open source option for test automation on web applications, Appium has become the equivalent for mobile testing. This will further allow you to speed up testing no matter which method you choose when bringing your users to mobile.

Google Reveals Android Oreo Alongside Solar Eclipse Countdown

By Leave a Comment

Android Oreo

The 2017 Solar Eclipse is on everyone’s minds today as many people donned their glasses for a few minutes to view a phenomenon that won’t return until 2024. However, devs, testers, and other tech enthusiasts may be talking about something else that’s a little easier on the eyes.

Alongside a solar eclipse countdown, Google counted down to Android Oreo (round of applause for all who guessed the name), which was released around the same time at 2:40 PM EST and live-streamed from New York City with the reveal of an Android Oreo statue.

Android O eclipse countdown

Android 8.0 O was previously announced as a developer preview at Google’s annual conference, Google I/O, in May. Boasted features include fluid experiences, notification dots, picture-in-picture media multitasking, Smart Text Selection, and informed auto-fill, as well as improved battery life, performance, security, OS optimization, and of course, new emojis.

After a friendly debate discussing other possible desserts such as Oatmeal Cookie and Orange Sherbet in following of other Android OS names such as Marshmallow, Lollipop, and Jellybean, Android officially informed us what the O stood for as the solar eclipse reach its peak.

However, despite exciting developments in Android’s OS features, the problem of Android fragmentation still remains. As everyday Android users are slower to install a new OS compared to iPhone users, testers will have to make sure that they include Android Oreo in their arsenal of browser/OS configuration tests once it’s released, while also including older OS to create an acceptable experience for users on older versions.

Google is pushing Android Oreo through the Android Open Source Project, though Android Oreo isn’t on available phones just yet as it’s still in carrier testing. Either way, Android users are undoubtedly excited for some of the new updates, and owners of Pixel and Nexus devices can expect to be the first to try it out.

Running Automated Testing Software in an Agile Environment

By Leave a Comment

Claire Mackerras Automated Testing Agile Environment

There is no doubt that automated software testing is critical for maintaining agility and establishing continuous improvement. As more teams adopt both automated testing and Agile development, it becomes clear they are best practiced together.

Any testing that is being performed for more than two or three times in a short span of time can be automated with paid and/or open source tools. Execution of unit tests, functional tests, continuous integration, and continuous deployment are common ways of utilizing automation for the greatest benefit.

Automating software testing is especially preferred in an Agile environment because it accomplishes the following tasks:

  • Identifies test productivity problems
  • Swiftly responds to the testers
  • Helps testers discuss and examine solutions
  • Implements technology to improve test processes
  • Assess automation possibilities for upcoming projects

Benefits of Automated Testing in an Agile Environment

Automation technology accounts for repeated testing and delivers extensive functionality and coverage through the software testing life cycle. If automation software is correctly executed, it provides the following benefits:

  • Improved Software Quality – Consistent, repetitive and extensive automation tests helps to deliver high-quality software
  • Improved Documentation – Automated tests produces instant documented quality proofs, comprises extensive flop/pass consequences, brings down testing manpower and time
  • Bring down testing manpower and time – As automated testing is quicker than manual testing, as these are labor-intensive, and can do verification of thousands to millions of test permutations from minutes to hours.
  • Cheaper – It also helps bring a remarkable reduction in the expenses related to the production of best-in-class software.

Automated Testing Trends

Agile environment automated testing

Organizations have largely merged automated testing and Agile development due to major trends that have arisen in the last few years.

Let’s take a brief look at some of the trends as follows:

1. Mobile Testing

Mobile testing will continue to remain at the top of the list for automation trends, owing to the remarkable shift in the adoption of mobile technology. Mobile application testing will indisputably have a major impact on the software testing industry with functionality, compatibility, performance, usability and security testing as major areas of focus.

In the next few years, mobile test automation will match web test automation if the market for mobile continues to rise at the same pace. There’s a great possibility in the open-source framework, mobile development, cross-browser testing, and app markets to expand for the mobile test automation landscape.

2. Big Data Testing

With an increase in Big Data analytics, quality management for Big Data implementations will emerge. Applications, networks, and devices will generate a huge source of unstructured data, ultimately leading to faulty and costly decisions.

Testing quality ahead of product release will continue to remain critical. With this type of testing, businesses will aim to get hard numbers and statistical indicators on whether the application behavior will meet the demand of customers or not.

3. Testing with TDD & BDD

Enterprises are likely to adopt TDD and BDD to deliver applications as per the customer needs, without any defects or delay. By engaging in this technology, teams can get an actual idea of what is required.

As a result, enterprises are better off in terms of cost and time since the longer it takes to identify bugs, the more it costs to fix them.

4. DevOps

Alliance among IT professionals, developers and operation engineers has increased since the emergence of DevOps. More and more organizations are merging the role of testers with operational engineers and developers due to overlapping competencies in the continuous Agile cycles.

Experts predict that testers, developers, and operation engineers will similarly need to utilize the same tools to increase the collaboration. This technique will promote better communication and feedback among teams to achieve Agile development, testing, and delivery.

6. Micro Testing

Enterprises financing in Micro Services make it easier to test an independent piece of functionality without altering other applications.

This trend will inevitably rise in the coming years, as it certifies testing complex applications which comprise small, independent processes and architectures.

The Verdict

Automated Testing is considered by many software testers as one of the most forthcoming trends practiced in the overall software development lifecycle today. With the help of automated testing, one can get more effective and efficient testing results in an Agile environment.

About the author: Claire Mackerras is a Senior Quality Assurance Engineer & Editor at BugRaptors. BugRaptors is a CMMi5 certified company with extensive experience as a third party testing vendor for tools in Software Testing & QA. Claire enjoys creating, uncovering, and disseminating new and interesting perspectives on technology and software testing.

The Average Cost Of A Device Lab

By Leave a Comment

 

In 2016, mobile browsing passed desktop browsing as the most popular way to access the internet. That means that more people will now read your content, or buy your products on the go, on a 4 or 5-inch screen than they will by sitting down at their laptops. Because of this, mobile device testing has become an integral part of web testing that is skipped at a tester’s own peril. But developers and testers have been long weary of the price of mobile testing.

Testers have turned to Simulators and Emulators in the past to cover our needs but with the proliferation of device fragmentation, real devices have become necessary. Teams have two choices to address this problem: building in-house device labs, incorporating development and operations resources, or using cloud-testing platforms like CrossBrowserTesting. Let’s take a look at the average cost of an in-house, mobile device lab.

Cost of Devices

Our device lab will have to have a good mix of Android and iOS devices to truly represent our customer base. The average cost of the newest Android phones is about $670! That’s right, you’ll have to purchase these devices new, and without a subsidized phone plan. We’ll buy 5 Android phones, and 2 Android tablets totaling $4690.

The average iOS device is a bit more expensive and comes with the added pressure of a base that upgrades immediately. The mean price of an iOS device is about $700. We’ll buy the iPhone 6, 6 Plus, 7, and 7 Plus and 3 of the newest iPads. That totals $4900, bringing our hard cost of devices to $9590. That’s almost $10,000 dollars just for one of each of these devices – and that doesn’t even get you to 50% of market share for devices.

Cost of Maintenance

Often times, maintenance and upkeep are the most overlooked factors of owning your own device lab. We see about 2 hours of maintenance per device, per month. You’ll have to update browser versions, operating systems, and other software packets. The hardest part of maintaining your own device lab though is keeping up a grid for automated testing. Selenium Grid is difficult to set up and is error-prone on a group of devices not properly maintained. The resource cost for developers or operations can be anywhere from $10,000 to $75,000 if a full-time employee is needed ( trust me, we have a few :)).

So you there you have it. On the short side, we’re at about $20,000 for a decent in-house device lab. On the long side, we could be looking at over six figures for a robust device lab. To see your own device lab cost, click here for our Device Lab Calculator.

To learn more about building vs. buying a device lab, check out our eBook.

Read Now

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

Learn more Free Trial