I recently setup a Nginx proxy server on a UK based provider, this is to test UK centric features of the BBC News website. We use AWS for most of our tooling, so adding a couple of extra options on AWS to enable this testing seemed like the best approach. Not quite.
PhantomJS
The tool I was using to test was Wraith, a visual regression testing tool. We allow users to set command line arguments and this is passed to PhantomJS on the command line. One of the available options for PhantomJS is a proxy server and proxy auth, but it isn't that simple. In testing the --proxy options on it's own, it works fine, but adding auth seems to be a bit more tricky. Nginx supports basic auth, seeing as that is just a username and password, you'd expect the command to be something like this :
This simply doesn't work, even though using curl and a desktop browser confirmed the proxy to be working. The next step was to see if Slimerjs worked, it didn't. Assuming all Phantomjs does is take the command line argument and pass that as a header, it seemed possible to use my Javascript file to send the credentials.
In the JS file
By setting the following, Slimerjs authenticated and took the screenshot. The same could not be said of Phantomjs, it still didn't work.
The solution was to set a custom header, this was successful in enabling access to the proxy. It seems that for some use cases, the proxy auth works from the command line, but for my situation, the proxy must be set by the command line and the credentials via the javascript file.
Screen recording and coversion for using GIFs in pull requests
Sometimes you need to show someone something on a phone, words are just not good enough. With testing moving more to mobile, having the ability to show a colleague the issue has become a little harder. Google introduced screencasting in Android 4.4, a way to record everything you do on screen. Great, but that makes a big video that is difficult to look at on Github, so lets convert that video into a GIF.
For this you will need the Android SDK, FFMPEG and ImageMagick. Install on Mac by using Homebrew. You will need and Android 4.4 phone to make this work, these instructions are also tailored for OSX system.
This is now the video file we will work with. If you want to delete lots of files you didn't use, you can adb shell in terminal to access the phones storage.
-vf is the video filter graph for setting FPS and scale
scale=360:-1 is the WxH, so 360 as that is 1/4 the width of the Nexus 5, this is to reduce file size. Using -1 sets the aspect ratio automatically for us based on the input video size, 16:9 in our case, meaning less guess work.
-r is the frame rate of the GIF, I have used 5, but you could go to 6 or 7.
output.gif is our finished file name.
Compressing the GIF
This is the hard part, finding a balance for the quality Vs file size. We ended up with a 3.5MB GIF from a 20 second video clip, using Imagemagick, we got that down to 1.3MB, but the results were not that useful. Instead, I have decided on a 10% fuzz to give a nice result, but still reducing file size to 2.1MB, meaning it is roughly 100k per second.
I recently got Battlefield 4, an intensive first person shooter with high detail graphics and enough shooting to satisfy any teenage angst. I purchased the game on the PC, meaning I am locked into EA's(Electronic Arts) distribution software called Origin. This software enables buying, trading, chatting, it also has a social aspect in the form of profile pages, but it also has an inbuilt web browser. This browser isn't actually accessible from the Windows desktop, it is designed for use within the game itself.
This is not a new concept, the main rival in this space is Valve, with a similar distribution software called Steam. Steam also has a browser, similar to Origin, and is also only accessible inside a running game. The browser is accessible via a shortcut key which displays an overlay, the overlay exposes a slue of features for the now dead/bored gamer. These browsers are meant to eliminate the need to leave the game and return to the desktop, which in theory, should lead to extra sales of in-game content. In any case, these browsers exist, but I have never actually thought about what they are capable of, they always seemed ok, but I took some time to find out what's under the hood of these browsers.
The Browsers
Steam
A quick look at the UA string says a lot about where these browsers started, for Steam, it is Chromium, or more importantly, (CEF)Chromium embedded framework. This version of Chromium is quite old, version 18 with Web kit build 535.19, though the CEF doesn't get the same treatment as regular Chromium in update terms. There is also a reliance on Valve to update Steams CEF to the latest, another barrier to the latest standards. The general experience of Valve's browser is good, flash can be installed if the user decides to, with generally OK performance. There is a tab interface, but that is about all it does have. It wont win any speed contests, sometimes it can be slow to load big pages. Responsive sites work as expected, though there is another dynamic to web browsing in Steam, the viewport.
Although you may have a 24 inch screen with HD resolution, some gamers like to run low resolutions to get the best performance, some will even run in a different aspect ration. What this can mean is a 1920x1080 display is reduced to a 800x600 viewport, leaving responsive sits below what some would call "desktop" resolutions. Steam respects the resolution of the game and limit the browser accordingly, so even on a large desktop monitor, responsive websites have an important home.
The scores from this browser follow from Anna Debenham's console browser scores, using Acid3, CSS3test and HTML5test.
CSS3 51%
Acid3 100%
HTML5test 354
UA String : Mozilla/5.0 (Windows; U; Windows NT 6.2; en-US; Valve Steam GameOverlay/1383158641; ) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
Origin
Origin is little less forthcoming about it's origins, yes, I went there. It points to a custom build of web kit, 534.34, while actually indicating it is Safari. The interface is slightly different from Steam, but overall is a basic browser with tabs. Flash can be installed in Origin too. As both clients allow for chatting in the overlay, resizable browsers are key, which is very convenient for responsive sites. Origin seems to have the same limiting in-game performance as Steam, scrolling and general use can have a element of lag to it. If you stick to Facebook, Twitter and BBC News, you should be fine, but some parallax sites were noticeably janky.
Scores :
CSS3 45%
Acid3 100%
HTML5test 270
UA String : Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/534.34 (KHTML, like Gecko) Origin/9.3.10.4710 Safari/534.34
Testing
Some of the more interesting results came from simple tasks such as loading images, both browsers had strange results. On websites like the Guardians new responsive site, Steam simply gave up trying to load javascript, so only a core experience was usable. In Origin, images loaded, but the browser had serious issues with layouts of some responsive sites, they just didn't look right.
Video was interesting, Origin behaved itself and didn't attempt to load HTML5 video, but Steam did, leading to a disappointed user experience. On BBC News for example, clicking the video would remove the poster image and leave a disappointing non functional video player in place.
Scroll bars were also an issue for Steam, lets hope an important button isn't hidden away.
Conclusion
In-game browsers have been around since 2010, but Steam recently hit 60 million users and Origin is growing rapidly, though it is likely that Origin and Steam share a lot of users. This growth could lead to yet another issue for more mainstream websites, testing browser compatibility for an audience that is typically quite good with a computer and it's capabilities.
I suppose the best part about in-game browsers for Steam and Origin is that they are limited to PC's on a desk with a keyboard and mouse...........sigh
Today we are announcing the release of a front end regression testing tool called Wraith. This tool is something we have been using for the last 6 months, it has proven invaluable in testing CSS changes, both deliberate and unintentional.
Microsoft have released a series of tools aimed at better testing and support of Internet Explorer. http://www.modern.ie/
What Microsoft are offering is actually pretty cool, a 3 month trial to browser stacks, a remote testing VM. This allows you to connect to a browser running on a Windows OS using a particular version of IE, from IE6 to 10. The only concession is 3 fixed resolutions, 800x600, 1024x768 and 1280x1024. This tool will be a big help to those looking for a way not to have local VMs or spare computers. It costs $19/month for a single user if you like it after the 3 month trial.
Microsoft have also included a series of Virtual machines on several platforms for testing. You can also select different VM packages such as virtual box. http://www.modern.ie/en-us/virtualization-tools
The best feature available here is the IE report, a quick way to test your websites browser rating according to IE's abilities. It outputs a list of areas you can improve your site such as vendor prefixes, browser plugins, compatibility modes and more.
Hopefully this will help those looking to better serve IE.
In this post I will show you how to take lots of screenshots at lots of breakpoints, compare live sites to local changes, then use a diff tool to compare them all. The outcome, a quick and easy way to test front end changes. This is achieved by using a screen shot service, an image diff tool and a browser, screenshot as a service, PhantomJS and ChunkyPNG. You will also need to have NodeJS installed.
Having a large device lab is great, you can check changes against every browser at every resolution, though the downside is that you have a lot of manual checking which takes up time. Having a faster way to check all your changes without devices all over your desk can be a time saver, but also a simpler way to test changes.
The Tools
PhantomJS is a headless browser that allows you to test without the need for a UI. This is great for automating tests, such as taking lots of screenshots. The second part of the process involves taking 2 screenshots and comparing them using a diff tool, Chunkypng. This tool can output different visual cues as to how your changes have affected your site, the outputs we are going to cover are a bounding box and a colour map.
The process is dependant on you checking work locally against your current live site, in my case, my sandbox Vs the BBC news site.
I have missed one more part out, which is a free tool called screenshot as a service. This includes an app that uses Nodejs to host an internal PhantomJS server, as well as all the configs required to take advantage of PhantomJS.
We take our 2 URLS and curl them using terminal. You can see below the different options I have included in the command, the localhost server address, the URL I want to screenshot, the max width of the browser, a delay to allow the page to load and the file name of the screen shot. What you can do here is set the width to loads of different sizes to gain lots of screenshots. There are additional options that you include, which can be found in the screenshot documentation. For RWD, this approach is probably going to help the most.
In the case below, I have added an L to indicate the live site. The second URL is my sandbox and will take the screenshot 5 seconds after the first.
What you end up with are 2 images in the folder that are of your 2 URLs. That's great, but the next step is really what we want to do, compare the 2 images automatically and output a single image to show where the page has differed. For that we use ChunkyPNG.
Special Sauce time
A simple Ruby script runs that compares the 2 files, then outputs the diff you want. My approach is to take 2 diffs, one which shows a bounding box around the area of the page that has changed, another shows a black page with changes highlighted in colour.
This method has been developed by a few different people, thanks to Jeff Kreefmeijer for a great blog post on the subject. This is good for skimming over the first set of images to see what's changed, then looking at more detail with the colour map.
In my case, the script would be ruby compare.rb bbc1 bbc1L diff1
In working out how to best approach this type of regressions testing, I first looked at existing tools, PhantomCSS was one of them. PhantomCSS does essentially what we have acheived here, though the way in which the image is captured is different with more screenshot variables available via curl. The processing of the image is also different, it is completed by js-imagediff, rather than using ChunkyPNG. PhantomCSS is a little simpler in setup, so it might be something you also consider instead of my method.
The automation benefits really come into play when writing longer scripts, here is a simple script that will take 6 screenshots at 3 different sizes, then compare them. This type of automation is going to be beneficial to those working on lots of types of pages. This is simply a .sh file that I run by using the following in terminal - sh compare.sh
Where you may spend a couple of hours testing 15 different mobile devices, you can now look at a small amount of diff images that will indicate the changes within minutes. For testing CSS changes, this is the closest you can get to automated tests.
The output you can see above is the front page of the BBC news site, I waited for a story change before running the second curl. This is a good example of differences, the image, the headline, the time stamp have all changed.
For BBC news, we have the front page, story pages with video, without video, correspondent pages, media asset pages and live event pages. That is six pages, at 8 different resolutions, with JS on and off, that totals 192 individual screenshots with 96 diff screenshots. If there are lots of front end changes, we can leave the bounding box output and just look at the colour map, this is simply because i know there will be changes.
The workflow of how you use diffs is really up to you, but the ability to have a single image showing differences between how your site looks now, with how it will look, is one of the best ways i've found to test front end changes.
In this post, i will talk about how to view network traffic and the HAR (HTTP Archive) file. This is useful for doing several things, my initial intention was to discover network traffic from mobile devices. This was something i wanted to view in order to find out whether our vary headers and stats were correctly being logged, but there is also an interesting way to measure performance.
Requirements
OSX
tcpdump
http://pcapperf.appspot.com/
https://github.com/andrewf/pcap2har
The basic usage is to capture the HAR file, you will use tcpdump to capture TCP traffic and save it to PCAP file. The website above, you guessed it, shows you the PCAP file in it's HAR form. This will allow you to view the HAR timeline, request headers, UA string etc.
Run this command in terminal. This takes the tcpdump from my bridged adaptor, the best way to do this is to share your wired conniption through your wireless and connect any mobile device to the new wireless access point.
sudo tcpdump -i bridge0 -n -s 0 -w nameoffile.pcap tcp or port 53
Once you have done all of you browsing, in some cases this will simply be loading a web page, hit control + C and the file is created in the directory you are in. The next step either requires you to have a local instance of the HAR viewer on your machine, or use the online version. Which ever you decide to use, the output will seem very familiar to most.
By using this tool, we can see how each device loads the page, where you could improve upon for certain devices and what, if any, are the issues with your website.
While this isn't as good as Chrome for Android that shows you all of this in real time, for very old devices, this is the best way to inspect your traffic.
Unlike most tablets, the Surface is intended for use in landscape, but also to be used with a keyboard, the Touch or Type cover. This is a different type of interaction than any tablet I have used before, it is strange, but I switch between the touch screen and the keyboard seamlessly, without thinking and without looking at the keyboard. It offers the accuracy of a laptop, with the simplicity of a touchscreen.
The Surfaces large, 10 inch screen at 1366x768, is a little unwieldily in portrait mode, but offers the best landscape browsing experience. There have been a few articles detailing the usage of tablets and web browsing, with most people using a tablet in landscape mode. This is how I found myself using the tablet, though for long pages, portrait is a curiously nice experience.
The Operating System
The Surface uses Windows RT, which is not quite Windows, but offers a lot of the same functionality of the core OS, without the ability to install ANY Windows applications. Only Windows store applications that run in the Modern UI can be installed, so that offers a big limitation for people wanting to replace a laptop. It also offers a big limitation for software in general, so you are reliant on the Microsoft store for everything, problem number two. The store doesn't have a lot of the basics, no Facebook, no Twitter, no Instgram…
This means ultimately the average person is going to use something a lot of people don't really like to talk about, Internet Explorer, known to the average user as "The Internet"
The browser
Internet Explorer is no slouch, so don't think I am at odds with it, in fact, I'm very impressed. Since 2003, I have been using Firefox or Chrome, so going back to IE is something that I initially dreaded, but the Modern UI took away all of the clutter that IE used to come with. The performance is excellent and the browser has some of the latest web standards. The browser also has a few different size options, full screen, mostly full screen, and sidebar style size. This is great for working on the desktop on a document, while having BBC News open with the latest live event rolling throughout the day.
In that one short paragraph we have unveiled one big problem with the Surface, it appears a lot of people weren't really ready for such a device.
Issue number 1 - Is it a desktop?
One of my favourite new websites is Polygon.com, it is a great responsive website with some terrific gaming journalism. It is a beautiful look, with a simple navigation, sort of. On a touch screen phone you hit the navigation button to display the various sections, the first time I visited this site was on a phone, I think that is the first time I have done that on a mainstream site. In any case, I touched the section I wanted and away I went, though once in the office was confronted by an issue, my Surface couldn't use the navigation. The screen is wide, the resolution is big, it runs Internet Explorer, it must be a desktop right? This means the hover style navigation for desktop users was being forced upon me :(
While using a navigation on my Android phone, pushing the navigation button didn't open it and leave it there for me to peruse the sections, rather it opened a closed in a flash, leaving me unable to navigate. I was actually surprised that this style of navigation was used, as i continued to use the Surface, it seems clear many websites are bound to the idea that if it is IE10 using your site, the user must be using a keyboard and mouse input.
This is actually a problem with many sites, the fact is, the device shouldn't matter, therefor the input method should be universal, but this type of device is so new, it blurs the lines between what is a desktop and what is a tablet. Does that show that some websites are only building for phone, tablet and desktop, with devices slipping through the cracks…Maybe, but it should be a good example that IE 10 is not a desktop computer, it is a browser that can run on a host of different devices with different inputs.
Issue number 2 - The sidebar browser
This is a great idea from Microsoft, multi tasking in terms of a mobile OS is actually quite a difficult thing to grasp for some, so putting two things on one screen is a neat idea, something to quickly glance at. This issue has been summed up quite nicely by Tim Kadlec, but many websites simply haven't implemented the @-ms-viewport rule, thus leaving Windows 8 users high and dry. My concern here is that many websites simply won't bother to do this, leaving this potentially useful way of browsing to those who have the time and availability to test.
Closing thoughts
After using my Surface for the past week or so, it has shown me first, how bad most Android tablets are, but secondly, that navigating the web is hard when something thinks you are a desktop computer. Imagine being at a high school reunion with the wrong name tag on, if people don't remember your face, it can be a pretty awkward experience, which is how i found the Surface while using the web. In time, things will change, but in the mean time, the web is going to be a interesting experience for Microsoft tablet users.
With Windows 8 now out, the final release of IE 10, both Desktop and Modern UI(formally Metro) browsers. They are the same, but have very different user interfaces, one touch based, the other a conventional Desktop browser. The RT verions, this is not Windows 8 RT, rather a seperate OS callled Windows RT, has an ARM implementation of the browser to.
The best devices to get in order to test IE 10 on are probably the Samsung Ativ or the Microsoft Surface. Both available now.
In testing out the browser, there are a few things to help you in terms of gestures and shortcut keys.
Touch in IE 10:
Swipe down from top of screen to show tabs and URL bar
Swipe left from off the right side of screen to show the Charms menu for IE settings
Swipe right from off the left side of screen to show other apps
Swipe right from off the left side of screen to drag and pin another app.
The app pinning is quite cool because you can have your favourite site open while you do work, such as BBC News :)
Keyboard Shortcuts
This list is available from the Microsoft site, as is other information about Internet Explorer 10. This is the complete list as most of you are either using on windows machine, or putting Win8 into a VM for testing, so other keyboard short cuts might help. On OSX, this would just be right CMD key and any of the keys if you use Virtual Box.
Windows key: Switch between Modern Desktop Start screen and the last accessed application
Windows key + C: Access the charms bar
Windows key + Tab: Access the Modern Desktop Taskbar
Windows key + I: Access the Settings charm
Windows key + H: Access the Share charm
Windows key + K: Access the Devices charm
Windows key + Q: Access the Apps Search screen
Windows key + F: Access the Files Search screen
Windows key + W: Access the Settings Search screen
Windows key + P: Access the Second Screen bar
Windows key + Z: Brings up the App Bar when you have a Modern Desktop App running
Windows key + X: Access the Windows Tools Menu
Windows key + O: Lock screen orientation
Windows key + . : Move the screen split to the right
Windows key + Shift + . : Move the screen split to the left
Windows key + V: View all active Toasts/Notifications
Windows key + Shift + V: View all active Toasts/Notifications in reverse order
Windows key + PrtScn: Takes a screenshot of the screen and automatically saves it in the Pictures folder as Screenshot
Windows key + Enter: Launch Narrator
Windows key + E: Open Computer
Windows key + R: Open the Run dialog box
Windows key + U: Open Ease of Access Center
Windows key + Ctrl + F: Open Find Computers dialog box
Windows key + Pause/Break: Open the System page
Windows key + 1..10: Launch a program pinned on the Taskbar in the position indicated by the number
Windows key + Shift + 1..10: Launch a new instance of a program pinned on the Taskbar in the position indicated by the number
Windows key + Ctrl + 1..10: Access the last active instance of a program pinned on the Taskbar in the position indicated by the number
Windows key + Alt + 1..10: Access the Jump List of a program pinned on the Taskbar in the position indicated by the number
Windows key + B: Select the first item in the Notification Area and then use the arrow keys to cycle through the items Press Enter to open the selected item
Windows key + Ctrl + B: Access the program that is displaying a message in the Notification Area
Windows key + T: Cycle through the items on the Taskbar
Windows key + M: Minimize all windows
Windows key + Shift + M: Restore all minimized windows
Windows key + D: Show/Hide Desktop (minimize/restore all windows)
Windows key + L: Lock computer
Windows key + Up Arrow: Maximize current window
Windows key + Down Arrow: Minimize/restore current window
Windows key + Home: Minimize all but the current window
Windows key + Left Arrow: Tile window on the left side of the screen
Windows key + Right Arrow: Tile window on the right side of the screen
Windows key + Shift + Up Arrow: Extend current window from the top to the bottom of the screen
Windows key + Shift + Left/Right Arrow: Move the current window from one monitor to the next
Windows key + F1: Launch Windows Help and Support
PageUp: Scroll forward on the Modern Desktop Start screen
PageDown: Scroll backward on the Modern Desktop Start screen
Esc: Close a charm
Ctrl + Esc: Switch between Modern Desktop Start screen and the last accessed application
Ctrl + Mouse scroll wheel: Activate the Semantic Zoom on the Modern Desktop screen
Alt: Display a hidden Menu Bar
Alt + D: Select the Address Bar
Alt + P: Display the Preview Pane in Windows Explorer
Alt + Tab: Cycle forward through open windows
Alt + Shift + Tab: Cycle backward through open windows
Alt + F: Close the current window Open the Shut Down Windows dialog box from the Desktop
Alt + Spacebar: Access the Shortcut menu for current window
Alt + Esc: Cycle between open programs in the order that they were opened
Alt + Enter: Open the Properties dialog box of the selected item
Alt + PrtScn: Take a screen shot of the active Window and place it in the clipboard
Alt + Up Arrow: Move up one folder level in Windows Explorer (Like the Up Arrow in XP)
Alt + Left Arrow: Display the previous folder
Alt + Right Arrow: Display the next folder
Shift + Insert: CD/DVD Load CD/DVD without triggering Autoplay or Autorun
Shift + Delete: Permanently delete the item (rather than sending it to the Recycle Bin)
Shift + F6: Cycle backward through elements in a window or dialog box
Shift + F10: Access the context menu for the selected item
Shift + Tab: Cycle backward through elements in a window or dialog box
Shift + Click: Select a consecutive group of items
Shift + Click on a Taskbar button: Launch a new instance of a program
Shift + Right-click on a Taskbar button: Access the context menu for the selected item
Ctrl + A: Select all items
Ctrl + C: Copy the selected item
Ctrl + X: Cut the selected item
Ctrl + V: Paste the selected item
Ctrl + D: Delete selected item
Ctrl + Z: Undo an action
Ctrl + Y: Redo an action
Ctrl + N: Open a new window in Windows Explorer
Ctrl + W: Close current window in Windows Explorer
Ctrl + E: Select the Search box in the upper right corner of a window
Ctrl + Shift + N: Create new folder
Ctrl + Shift + Esc: Open the Windows Task Manager
Ctrl + Alt + Tab: Use arrow keys to cycle through open windows
Ctrl + Alt + Delete: Access the Windows Security screen
Ctrl + Click: Select multiple individual items
Ctrl + Click and drag an item: Copies that item in the same folder
Ctrl + Shift + Click and drag an item: Creates a shortcut for that item in the same folder
Ctrl + Tab: Move forward through tabs
Ctrl + Shift + Tab: Move backward through tabs
Ctrl + Shift + Click on a Taskbar button: Launch a new instance of a program as an Administrator
Ctrl + Click on a grouped Taskbar button: Cycle through the instances of a program in the group
F1: Display Help
F2: Rename a file
F3: Open Search
F4: Display the Address Bar list
F5: Refresh display
F6: Cycle forward through elements in a window or dialog box
F7: Display command history in a Command Prompt
F10: Display hidden Menu Bar
F11: Toggle full screen display
Tab: Cycle forward through elements in a window or dialog box
PrtScn: Take a screen shot of the entire screen and place it in the clipboard
Home: Move to the top of the active window
End: Move to the bottom of the active window
Delete: Delete the selected item
Backspace: Display the previous folder in Windows Explorer Move up one folder level in Open or Save dialog box
Esc: Close a dialog box
Num Lock Enabled + Plus (+): Display the contents of the selected folder
Num Lock Enabled + Minus (-): Collapse the selected folder
Num Lock Enabled + Asterisk (*): Expand all subfolders under the selected folder
Over the last week or so, Nokia have been pushing updates to lots of phones, these are running the latest versions of Symbian, S60 V10 or Symbian Belle. Although the support list for this version of the OS for devices is small, the main ones are covered. These phones now have access to the latest version of the Symbian browser, Nokia Belle Refresh for Nokia N8, Nokia E7, Nokia C7, Nokia C6....
What this means for us is that the new version has enough support to cut the mustard, in this case the N8 loads the smartphone version of the website. This change of browser is something we dont see often, but when it happens, it opens up a lot of possibilities for users, but also exposes some issues. As you can see in the image, the font embedding support is spotty, so worth testing all aspects of your site for other issues.
Ultimately, this is a good example of why you should be checking phones for updates all the time, ensuring you are testing the latest releases.
The interesting thing about Android is it can sometimes behave differently, even on the same hardware. Here is a video playing on 2 Galaxy Nexus phones, the top is using Android 4.1(Jellybean), the bottom is using Android 4.0(ICS). When both phones are using the same auto brightness option, the phone will give a slightly different colour, note the individuals jacket. Nothing you can do here as many different phones have very different brightness options, but something to keep an eye on when testing. Hopefully the user will never notice....
The end has come for our little Blackberry OS4 device. Eight or nine months ago it was still relevant, it had a solid user base which was slowly shrinking. However, the pressure for Blackberry juicers to upgrade seems to have become too much, mostly bowing to Android and iOS.
While many of you will have given up testing on OS4, or perhaps not even started....It remained a more highly used OS than Windows Phone 7 until the last couple of months, so ensuring this user group remained happy was still important to me.
Finally though, this 6 year old OS with terrible browser support is nearly dead. It joins the ranks of webOS, Meego, Windows Mobile, Android 1.x and early versions of iOS. We salute your Blackberry OS4, the first real "smartphone" OS is put to bed.
Here is a question, are you still supporting BB OS4?
Weinre, a WEb INspector REmote tool for webkit browsers. It has been included in some tools such as the Adobe Shadow application, though this requires the device to have the application and the computer to have the app....and the browser to have the plugin.
Weinre is a more difficult set up, but once down, allows for a more immediate benefit. If you were only looking to use the inspector tool of an Adobe Shadow type application, then using basic weinre is probably best for you.
Firstly, here is the page where you will lots of information, guides, links, support etc. Check it out and have a read to get the most out of weinre
Weinre can be installed anywhere, so just create a folder in your preferred location. I should say that these instruction are for OSX, Windows users should refer to the manual.
1. You first need to install node.js here http://nodejs.org/#download
2. Next you should install npm (package manager)
sudo curl http://npmjs.org/install.sh | sudo clean=yes sh
You dont have to run this full command, it just makes it easier in case you have conflicted installs or permissions.
3. Once you have that, create a folder to store wierne and cd to it, then run the following command in terminal
npm install weinre
4. You can now start the server with the following command. The main thing here is to ensure you have the right path. My folder is on my desktop so the command is
node node_modules/weinre/weinre
5. This is now running at localhost:8080, so you can have a look now, but we havent got anything going, so we can add an IP address to allow devices to access the server. We can run the following command
7. You can now browser to your page and the inspector should be working. Just visit either your local host or IP forwarded address, (localhost:8080) and click debug client user interface link. This is compatible with Android browser, Chrome, iOS Safari, webOS, Dolphin, Blackberries and more.
Summary
The benefits are that you dont need to rely on applications or support for this tool to work. It allows you simple access to debug web pages on any web kit browser. Apart from Opera and Windows Phone, it nearly gives you full coverage over smart phones. I would say the biggest benefit here is support for other browsers based on webkit but not native, which Adobe shadow uses. The next big plus is that OS's like Blackberry and QNX, webkit browsers, are also supported. So the potential for checking browsers and editing the page on the device is great. Although you could use Ripple, a Blackberry emulator tool, to inspect browsers, there is nothing like the live experience on a device.
If you are the kind of person who wants to share your work and have other people look at it, check it, change it, you can use the IP address technique i mentioned in the guide to allow them to do this. If you use this method, the debug tools will be accessible from any computer on your local network, meaning only 1 computer needs to run the services. http://192.168.1.78:8080/ If this was an IP address of the server, type this into Chrome and you will be shown the control panel of the weinre, then clicking on the client user interface will bring up the Chrome tools. If you are working with branches and someone notices a bug, being able to fix it right there and then on any webkit device could help you speed up release.
While im sure many of you have used this tool in the past, or have heard of it, i think this is a better way to work than use Adobe shadow for inspecting. Shadow will speed up time looking at pages for sure, but it needs total device support to make it a really powerful tool, as it stands, using the normal weinre is the best way to go.
There have been a lot of articles recently that are talking about when to stop/drop support for IE, specifically IE8. This is a big deal for those who are stuck on Windows XP or Vista, but don't have the option to update. So i started looking at what people will do with mobile browsers.
The likes of Meego, WebOS and QNX have come and mostly fizzled away. In some cases, you may decided not to even test against the device, let alone support it. We also have to deal with browsers that are not fully baked yet, Windows phone for example. Finally, the choice of when to drop support for older browsers, how long do you wait, what is the tipping point?
In a lot of ways, it will depend on your market and when you live, but i think any phone that you can into a shop and buy should be in your first line of supported devices. This may cause you a little amount of pain as you will probably dealing with at least 1 or 2 crap phones. However, as Android and iOS move on, the browser support gets a lot better, so the days of some Android browsers are numbered.
What is on the way out?
A lot of what I am about to say is speculation, it is based somewhat in trends that we have seen, what our stats indicate, research on sales figures and market data. We will look at 3 main browsers, Android 2.1, Windows Phone 7.5 and iOS. With IE8 still in the game, we will look at some mobile browsers that hanging around, but which may be reaching the end of there lives.
Android 2.1
From what we have seen from our stats, Android 2.1 is nearly gone, with most of the Android users on 2.2/3, which reflects the global stats.
When looking at Chrome and Firefox, the version a lot of people are now supporting is the latest one, as the auto update feature takes over. Android is essentially the IE of the Android world, the versions are tied to the OS version and users may not want to update the OS.
What I predict is a lot of people dropping support and not testing Android 2.1 after it hits 3 years old, October 2012, this is for a couple of reasons. Firstly, most phones are sold on 2-year contracts, with some 2.1 phones on the shelves for sale in late 2010, this prolonging the support. Also, some Android OEMs will not have launched a phone until they got the source code and updated it, which means a delay in 2.2 adoptions. Secondly, Android 2.1 users will be tempted by iOS 6, Android 4.1, Windows Phone 8 and maybe BB10 in the next few months.
Windows Phone 7.5
Windows Phone 7 hasn't really grown to a big user base, so should you support Windows phone 7 and 8? If you take a look at the BBC news site, m.bbc.co.uk/news, on a Windows Phone, you will see our arrows are missing. Thanks to a post on ubelly, downloadable fonts, as well as other features, are missing from WP7, which is really annoying.
When WP8 comes out, it hopefully be a fuller version of IE10, so much better support than most other browsers today, but given how small the WP7 market is, we will most likely support WP8 straight away, with a more relaxed approach to WP7. As always, we will look at our stats, but given how long WP7 has been out, it seems clear that MS is putting it's money on WP8 and it's shiny new browser. WP7 should be put to bed in 6-8 months, knowing it helped a better browser on a better OS. The main downside of better support from WP8 is not upgrade path for existing WP7 users, which means you will be forced to support both, unless you cut the cord early and chose WP8.
Apple iOS
iOS has a 80% change in versions once a new one is released, which bucks the trend in the rest of industry. This is good for support as most of the user base are on either 4.3 or above, given excellent support. We test back to 4.0 though, as well as supporting versions in between. Anything before 4.3 doesn't get support by our media player, which is most likely where i see our version testing moving to when iOS 6 comes out. I don't know how many of you support below 5 still, it might be good to know, but testing against a version of iOS with just a few percent market share may start having no return in visitors.
Summary
What i see happening in the next few months is WP7.5, Android 2.1 and iOS 4 being made redundant, this will free up time testing for more modern browsers.
Based on the fact Android 2.3 phones are still on sale, with only the second Android 4.0 phone coming out in April of this year, will we be supporting Android 2.3 in 2014, 4 years after in launched? Will mobile browsers start auto updating independant of the OS? Will we see the browser move into the app arena like Google have done with Chrome on Android?
I didn't really want to finish on a question, but if you have any for me, or how the BBC builds our site, you can tweet me and our team @davey_blooman @danscotton @kaelig @tmaslen @jcleveley @AndrewVos
A few things to remember when doing a bit of testing.
10 - phones are bad
A lot of phones are slow, have lots of bloatware and use the browser as a way to search Google, rather than look at your beautiful website. Symbian, Android, BBOS and Windows phone can be put onto very slow hardware, so buying that hardware is essential. More importantly though, if you only test on high end android and iphones, you will probably not realise the world of pain you are causing to bad phone users. Remember, phones are bad.
9 - browsers are bad
Older browsers may cause you a headache, so while Android 2.1 and iOS 4.0 are fading away, these two naughty browsers still need attention.
8 - rotate that device
It seems that most people use a phone in portrait unless they are playing games or watching movies. But there can be issues when using a web page in lanscape, layout changes, column placement, text alignment. It is worth spending some time on this, even if you feel most people wont interact with your website this way.
7 - android can catch you out
An android phone can be a well made, well designed customised experience, it can also be a load of bloatware and unnecessary browser tweaks. If you can buy multiple phones, the less popular phones, differentiating on software and not hardware can sometimes make a web page look odd, using single column mode by default for example.
6 - blackberry users still exist
Despite the doom and gloom of RIM, the blackberry maker, users will be around for a while yet. For that reason, we always test fully on all blackberry phones and OS versions. So when testing, remember, blackberry users still exist.
5 - loading times are good
On a 2G connection, which in a lot of areas this is still the case, it can take time to load the page and interact with it. I loaded a few websites, itv news, BBC news, the Guardian and Boston Globe on a 2G connection. BBC news and the Guardian were very quick, with itv also loading fast. The Boston Globe was actually slower than the others, with headlines and images taking longer to load in. Try out some sites for yourself.
4 - If you think it is complicated, it probably is
This is something that user testing will have to prove for you, but it can very useful. Testing your website with users from off the street can show you what things they look for in a page, how they navigate, what the steps are for them to get to content. If you learn these things, it will help you to identify if your page is going the wrong route in terms of user interaction or design.
3 - data is limited
According to recent reports, web pages are getting bigger. Mobile operators are still making everyone pay through the nose for data, so if a use visits a 1MB page 15 times a day, every day, it doesn't leave much room for twitter or Facebook. Our maximum page weight target is 70k.
2 - everything isn't an iphone
We test the iphone the same amount as every other phone we have defined as our core user base. Although it may seem like the phone that everyone has, it isn't the number one browser in our stats, is it on yours?
1 - does it work on everything?
You might say this is a pillar of RWD, but does your page work on any device at any resolution, at any pixel ratio and still look good with all the functionality of non RWD page? Not sure if you want to answer that one, but the more you test, the more devices you test on and the wider browser support you employ, will hopefully lead to this goal.
The idea of a 720p display on a phone is the norm, with 1080p probably coming over the next year or 2. With other devices like the iPad and iPhone with huge pixel counts, the use of images that exploit screens that have a pixel ratio of 2 is something everyone should look into doing.
In my device selection post a few months back, i only had 2 HD phones, no i am not going to use the term RETINA as a standard. These 2 phones were the iPhone and the Galaxy nexus, both had pixel ratios of 2. Since then, tablets and phones have appeared with similar specifications and more, such as "The New iPad". In terms of device selection, if you have no plans to support HD images, then this is slightly less important, but for those that are, device selection can be slightly tricky.
The Samsung Galaxy Tab 7.7 for example, has a 1280x800 screen, yet uses a pixel ratio of 1. More content, but lack of HD images, so one to avoid. The iPad 3, clearly the favourite, but the big thing coming out is the Nexus device from Google. This device will be sold everywhere, use Chrome as the default browser and have a PR of 2, giving a good device to test those lovely images on.
For phones, the G Nexus, iPhone, HTC One X, Galaxy S3 are all good choices, though the iPhone has the highest PPI, followed closely but the Galaxy Nexus, so they could be your 2 bets choices.
Below we have a couple of images showing the difference in News Banner, this is a version of the site that has the enhancement and a version that doesn't, the second image is the HD image.
If you are going to make you images HD, then picking the right device is important to test on, the pixel ratio is ultimately set by the manufacturer of the device, so high resolutions screens are not always going to be supported. For hybrid devices with strange ratios, it might be worth looking at your site traffic and seeing which devices are going to improve from getting HD images, only time what tell what frankenstein creations will be hitting the market soon with Windows 8 and Jelly Bean.
Here we have the web page in landscape view. The latest version is on the right, the older version on the left. The layout has changed in order to use the available screen width while keeping the larger image and maintaining the look and feel of the portrait layout
Testing For Dummies @mobiletestingfordummies-bl-blog1 - Tumblr Blog | Tumgag
