CrossBrowserTesting.com

A Design, Development, Testing Blog

Ensuring Mobile Excellence with SmartBear Recap

By Leave a Comment

Digital transformation has been embraced by most organizations.  More than ever, people turn to mobile devices to stay connected with the world and each other, and that includes engaging with businesses.  With this expansion of users on all devices and platform, businesses are striving for digital excellence while they manage transformation and product roll out.  According to Hackermoon, internet usage has increased by as much as 70% as organizations adopt a more distributed workforce model with working from remote locations becoming the norm and usage on mobile devices growing quickly.   

As a result, it is more important than ever for apps and websites to operate at peak performance and deliver a seamless and satisfying user experience. If a user comes across a bug on your site or app or isn’t getting the experience they’re looking for, they’re likely to leave you without taking your desired action.

  • 88% of online shoppers say they won’t return to a website after having a bad user experience 
  • 44% of shoppers will tell their friends about a bad online experience 

With so much competition for a user’s engagement, time, and dollars, less than ideal experiences are risks you simply can’t afford, emphasizing the importance of testing to ensure your mobile app delivers what it’s supposed to will help you avert these bad experiences. For your developers and QA teams, there are a variety of testing execution challenges that they must overcome in order to contribute to delivering the seamless app or website experience your customers have come to expect. 

Here is a short list: 

  • Browser and device coverage – This is ultimately the most important aspect; after all, user come in all shapes and sizes and have thousands of different mobile devices, operating systems, or browsers. How can you be sure your app or website looks good on all of them? By testing on all of them! That means having access to robust device lab that contains a multitude of different device and browser options, unfortunately, maintaining this infrastructure is expensive.  
  • Ensuring your checkout process is fully operational – Converting a customer is difficult enough as it is. If that would-be customer has any bumps on the road on their way to checking out, they can change their mind – cart abandonment is a major problem for any ecommerce retailer.  
  • How do things look? – An engaging visual experience is so important for the savvy mobile and internet user. For a dynamic website that changes daily or more regularly, your testers need to be able to track those changes to make sure everything looks as good as it should be.  

Those are three not insignificant challenges for testers and software developers to deal with. Whether they’re doing live-testing manually or setting up automated tests through various frameworks, these are real challenges that could prevent them from engaging an effective testing process.  

Fortunately, two SmartBear tools CrossBrowserTesting and Bitbar are designed to address exactly those challenges facing testers. If you’re a software developer or QA tester looking to uplevel your manual or automated tests, work more efficiently, and gain access to a huge access of coverage in terms of browsers and devices through the SmartBear Real Device Cloud, these tools can significantly improve your testing capabilities. 

You’ve seen the critical business impact that having a poor mobile app or website experience can have, and how that business impact has only accelerated with the digital transformation spurred on by testing. Now see how these SmartBear tools can take your testing capabilities to the next level and ensure that your customers are always getting the experience you want them to have.  

Check out our webinar recording to see a demo of these tools in action, or sign up for a free trial of CrossBrowserTesting and BitBar to take them for a spin yourself!  

July Product Updates

By Leave a Comment

July Product Update with Purple Background

Feature: Welcome to SmartBear

# Welcome Cucumber.io

Scenario: SmartBear makes a new acquisition

Given SmartBear has added Cucumber to its portfolio

When You use it with CrossBrowserTesting

Then You’re well on your way to BDD testing! 

Welcome to the family, Cucumber! The team at CrossBrowserTesting is looking forward to helping more people easily use BDD with their cross-browser tests.

Screenshots

Last month, we promised some more changes to screenshots, and we’re happy to unveil more of what we’ve worked hard on: Drag & Compare, Onion Skin Comparisons, and Image Differencing!

Drag & Compare places two screenshots into one screen. As you drag the cursor left or right, we reveal more of one screenshot or the other. It can be used to highlight small pixel differences across browsers.

We see the left part of Screenshot A and the right part of Screenshot B. There is a slider that allows more or less of Screenshot A to be shown. It can highlight small pixel differences.

Onion Skin lays one screenshot directly on top of another with configurable transparency levels.

Finally, Image Differencing highlights the differences of your screenshots in pink, and calculates a percent difference.

We recommend you use the same resolutions across browsers in your comparison.

Mobile Debugging on Newer Devices

This has been on our backlog for a while, but now it’s live in Production. iOS 12.2+ has a bug that prevents us from providing mobile debugging, but we’re monitoring closely on the fix and will provide it once it’s available.

New Browsers and Operating Systems

We released Chrome 75, which had some changes to the webdriver. If your selenium tests are (or were) failing in Chrome 75 and not earlier versions, Chrome 75 started enforcing W3C standards, which caused selenium tests to fail. We’ve made some changes so your tests should work without any changes on your part.

Pixel 2s and Pixel 3s are now available for screenshots and selenium tests.

Bug of the Month

We have an automated screenshot tester (read about it). Part of automated testing involves a decision on what to fix, what to no longer test, and what features to take out. Our automated tests showed a lot of failures for early versions of Chrome (versions in the 20s, from 2013 and earlier!). We had a decision to make: fix it or remove it. We decided to remove the ability to run screenshots on these old browsers.

Over the last month, we’ve been evaluating all the failures and prioritizing what to fix. Automating logging in with Basic Authentication does not work in certain newer browsers, and now instead of failing silently, we let the user know they will fail and automatically remove those. We found that large screenshots failed to upload on android phones so we’ve limited the size for phones.

There were more, and more to come as newer browsers come out, and we’ll continue to prioritize and address screenshot reliability issues.

Try out all the new improvements for yourself. Log in now to get started.

  

Exploratory Testing Techniques for Mobile Devices

By Leave a Comment

Exploratory testing mobile devices

For those of us who use our devices for everything, from buying coffee to connecting with friends, the mobile experience holds high priority despite smaller screens and limited capabilities.

Due to the sheer popularity of smartphones and tablets, the importance of mobile device testing doesn’t come as much of a surprise. As mobile testing becomes the industry standard, testers must increasingly incorporate test cases that consider the needs of users that are on the go.

However, while you may be familiar with which tests to perform with a keyboard and mouse, you have to come up with a new strategy for mobile devices, especially during exploratory testing.

Here are a few ways to test mobile devices when manual testing:

  • Touch Screen – Scrolling, clicking, and swiping are different when you’re using your fingers compared to a computer mouse. You want to perform a variety of these actions throughout your application to ensure that you can do everything on mobile that you’re able to do on a desktop and that it functions with the same accuracy. Are buttons big enough to click? Is it easy to scroll from top to bottom and back? How does it look when you zoom in or out? Does swiping work without too much lag? These considerations will be critical in assessing usability.
  • Keypad – Rather than they keyboard we’re all used to, mobile devices have much smaller on-screen versions that also use touchscreen technology, which can pose a difficulty to users. Because they’re generally less user-friendly, you want to look at instances that might use require the keypad such as search boxes. Pay special attention to form fields to make sure they’re not too narrow or hard to use. You don’t want your users becoming frustrated because of a keypad that makes using the app impossible.
  • Navigation – Many times certain navigations will be different for mobile compared to desktop because of the smaller screen space. For example, where a drop-down menu might normally be labeled “Menu” on the web application, it might turn into a hamburger menu on a phone screen. Ensure that these icons and elements are organized in a way that makes their function apparent to the user. Because some of these navigation items may be less obvious, you want to go through and make sure that you’re still able to accomplish the same journey.
  • Portrait and Landscape – When you’re testing on a desktop, the web page will always be horizontal. Mobile phones are most often in portrait mode, but they can also be turned to view in landscape. Visual testing will allow you to evaluate and compare responsive layouts to make sure images, text, media, and other content is digestible in both portrait and landscape modes on mobile.
  • Devices – It’s not enough to test on one mobile device — in fact, you should probably be testing a selection of devices. Because of mobile fragmentation, different models, brands, screen sizes, and resolutions mean different mobile experiences. Additionally, you want to test on both iOS and Android operating systems to get a better understanding of how it differs for each.
  • Performance – Performance may be in good shape on your desktop, but that doesn’t mean it’s consistent for mobile. When 85% of mobile users expect pages to load as fast or faster than on the desktop, testing for performance is not something you want to skip. Test out different pages and record their load time. You also might want to test out different networks, locations, and even battery charges to see how it affects speed.
  • Popups and Alerts – Checking pages that have popups and alerts is important because while it may look fine on a desktop, it could be intrusive on mobile. Alerts that are too large and unresponsive or popups that are layered over each other may even make the app unusable. Additionally, it’s a good idea to see how phone calls, notifications, and other interruptions affect the functionality application.

Once you know which devices you want to test on, you can build out a more comprehensive mobile testing strategy. Keep in mind the ways that devices differ, both from each other (tablet vs Android vs iPhone) and from desktop, to determine which test cases you should focus on during exploratory testing.

Your users aren’t ditching their devices any time soon. Exploratory testing on mobile devices means that you can better understand how users interact with your application.

 

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 Testing 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, a mobile testing strategy is no longer a competitive advantage, but an essential part of your overall QA process.

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. Gather Requirements

The first step to a mobile testing strategy, or really any testing strategy, is to gather requirements. The difference here is that the product manager will likely have separate requirements when it comes to mobile users, so it’s important to understand what those are. A big reason for this is because your mobile users will likely have different testing personas from your normal desktop users and will probably use the application differently. Not only that, but there has to be a consideration for how the user will physically interact with devices such as scrolling, typing, and tapping rather than using a mouse and keyboard. Creating user stories and scenarios will help in this step, and defining requirements will allow you and your team to determine the best way to approach the following steps in this article.

2. 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.

3. 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. 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 native, desktop, and web iOS and Android apps. CrossBrowserTesting, on the other hand, lets you run automated parallel tests across multiple browsers, devices, and OS at once for web testing. 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.

4. 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.

5. Choose between emulators, simulators, and real devices – Desktop or mobile 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.

Browser or mobile device emulators 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.

6. Make sure your website is truly responsive.

Just because your website loads on a mobile device, doesn’t mean it’s responsive. We often talk about the importance of functional and visual testing, and it’s just as true for mobile. For example, if you have a large header image with text that looks good on a desktop, you might want to do more than just scale it down on mobile. By doing this, you could be compromising the image, which is probably going to be a lot harder to see and read on a small screen. Instead, designing responsively means considering what the site will look like on different screen sizes and, in this case, potentially changing the header image so it’s easier to digest.

This should be accounted for in testing, which means that in addition to diversifying mobile models, browsers, and operating systems, you also want a few different screen sizes to get the best understanding of responsiveness. This might include a tablet, a smaller mobile phone, a larger mobile phone, and even testing devices on both portrait and landscape.

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 testing 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.