Directions for using BrowerShots to improve mobile SEO

Mobile device WIDTHS must be correct or your SEO score will be affected. Search engines check websites to see if they are "mobile ready". A web page that is wider than it should be for a particular device will hurt its overall SEO score. Nearly 50% of all Internet traffic is performed using mobile devices (Cell Phones and Tablets). The importance of Mobile SEO can no longer be ignored!

BrowserShots

Use BrowserShots to take screen shots that allow you to quickly see HTML Width ERRORS on over 350 devices.

[1] Visit BrowserShots and type in a URL, then check the boxes in the grid/table to select the mobile devices you wish to use and hit Submit. Note: A lot of times the URL will be updated (adding www or https) and you will have press the submit button again.

[2] You will be redirected to the ScreenShots page. Every 30 seconds the grid/table is updated to display screenshots as they are taken. (Normally a screen shot only takes 1-2 minutes to be taken).

[3] If your screenshot(s) are taking too long or you're just inpatient you can visit the Pending ScreenShots page to see if they have been put into Queue yet. Once the Pending screenshot(s) have been taken they will disappear from the Pending ScreenShots page.

Important Notes: For your own safety and protection all screen shots are uploaded and displayed via Amazon Web Services S3 buckets. If a webpage contained a virus and infected the screen shot Amazon will not let anyone view it (you will get an error message instead). If BrowserShots takes a screenshot of a large webpage or one that loads slowly, the screenshot may not contain all of the pictures or text in it.

BrowserShots - Tech [1]

Frontend: Python/Django, JavaScript, JQuery, Ajax, HTML5, CSS, Bootstrap 4A, FontAwesome, Datatables
Backend: Postgresql, Ubuntu, Apache, cron jobs, PhantomJs

BrowserShots uses a combination of open source technologies to provide PRIVATE screen shots of webpages for cell phones and tablets. User Agent strings are passed to a headless browser called PhantomJS running on Ubuntu Linux to take each screenshot. A user agent string provides useful information about the device visiting a website -- computer, cell phone, tablet, OS, browser name, etc --. However; user agents do not provide one key piece of information -- the device's screen width --. Through additional data gathering I created a database that paired the width size to its corresponding user agent for over 350 mobile devices (cell phones & tablets).

BrowserShots - Tech [2]

I am running BrowserShots.net using Amazon Web Services (AWS) using 1 RDS PostgreSQL database, 3 EC2 instances (2 are spot instances) and an S3 bucket. I use the Elastic Beanstalk Command Line Interface (EB CLI) from my remote Ubuntu computer to upload or make changes to my website. The First time uploading a website/app using (EB CLI) will (1) securely create an EC2 instance, (2) create security groups and (3) create load balancers. I then access my web-browser and login to my AWS account. From there I manually connect the newly created security group to my PostgreSQL database and configure DNS using Route53. Once this first time process is completed I only need to type two commands from the bash shell to update any of my code on BrowserShots:

eb init
eb deploy

BrowserShots - Tech [3]

The 2 spot instances are running a custom Python script that I created. This script uses Select statements to see if any new screenshots need to be taken. This database connection takes place every 60 seconds. When pending items are found in RDS PostgreSQL database the Python script uses a headless browser called PhantomJS to take the screen-shots. While taking the screen-shots the script updates and inserts information into the database while uploading each image taken to an S3 bucket. When the process is complete a website visitor can view the screen-shots taken and all of the additional information I provide. The statistics provided on the ScreenShots web-page includes the target width(s) and the actual width(s) that were observed when the screen-shot was taken. BrowserShots stores a cookie on the visitors computer that contains every domain name submitted with the last 48 hours. This keeps all of a visitors screenshots almost exclusively private. The only way another visitor can view your screen shots is if they submit the same domain name (URL) for screenshot(s) within the same 24 hour period. This provides privacy but also introduces a unqiue sharing ability for co-workers, by allowing a co-worker to view all of the screenshots you've taken with only have to submit one screenshot for a given Domain Name. The Domain Name cookie expires after 48 hours, but FREE screenshots are only available for 24 hours.