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!  

Why Safari 11 Tracking Prevention Has Advertisers Up in Arms

By Leave a Comment

Safari 11 tracking prevention itp

Apple’s Intelligent Tracking Prevention (ITP) feature was first released earlier this year at WWDC in an effort to increase consumer trust in Apple. ITP makes it harder for businesses to track peoples’ web use for advertising, and with the latest Safari 11 upgrade, Apple has made it even more difficult.

ITP 2.0 uses machine learning to detect whether cross-site tracking cookies from third-party networks can be used for retargeted ads. If so, those cookies only work for 24 hours and are wiped completely in 30 days. Cookies are basically small trackers that follow you around the web and store information about the content that you’re visiting and the actions you’re taking.

By limiting these cookies, it’s harder for online retailers to follow your browser trail. For example, if you were to look at a couch on an online furniture store, that furniture company might use cookies to advertise the item to you at a later time because you are more highly targeted and thus more likely to buy.

While Apple’s limitations are clearly in favor of customers who may find modern advertising tactics aggressive and prioritize data privacy, marketers depend on this information and have been using it for years. Especially as high-traffic shopping occurrences such as Black Friday, Cyber Monday, and the rest of the Winter Holiday season are upon us, ITP could affect the end of the year bottom line for many businesses.

In fact, six major advertising companies recently issued an open letter expressing their concern about the latest Safari 11 version. The letter states that with cookie-blocking technology as part of Safari 11, Apple is “sabotaging” the economic model of the internet.

Additionally, advertisers depend on cookies in order to personalize content. According to Adweek, the letter also stated, “Blocking cookies in this manner will drive a wedge between brands and their customers, and it will make advertising more generic and less timely and useful. Put simply, machine-driven cookie choices do not represent user choice; they represent browser-manufacturer choice.”

Perhaps this wouldn’t be so much of an issue if Apple devices weren’t as prominent as they are. Apple devices take up approximately 44 percent of all mobile devices in the US. And, unlike how Android suffers from fragmentation across operating systems, the majority of Apple users are quick to upgrade and are using Safari 11.

However, just because advertising tactics suffer on new devices doesn’t mean quality has to. While marketing teams struggle to find workarounds for ITP, software teams can continue to test on the newest mobile operating systems and devices with tools like CrossBrowserTesting.

By testing on Safari emulators and real devices, you can see exactly what your users are seeing when they visit your site on Safari 11. Hopefully, if retargeting doesn’t get them to come back, a great web experience will.

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.

 

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

By Leave a Comment

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

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

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

Looking Towards 2018

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

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.

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.

What You Missed from the Apple WWDC 2017 Keynote

By Leave a Comment

Apple WWDC17 Worldwide developer conference 2017

Image via Apple

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

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

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

Top Highlights

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

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

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

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

Other Announcements

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

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

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

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

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