Categories
Tools

Responsinator (#6)

Today I kick-off a mini-segment on responsive design tools — things to use while developing your website to make sure it works on both desktop and mobile browsers. In short, responsive means the CSS responds to the size of the viewport (which for mobile devices like iPads is the width of the device and cannot be changed). This enables the experience to be delivered seamlessly and without friction on any size screen— from small phones all the way up to wall-mounted television displays.

Today’s tool is Responsinator

http://www.responsinator.com/

Responsinator is a quick-little tool to show you your website on lots of different popular viewports: portrait and landscape for each of iPhone X, Android, iPhone 6,7,8, and iPad.

They’ve adoringly dubbed the iPhone X the “iPhone eXpensive” and the larger of the iPhone 6,7,8 models as “iPhone Plumo” in their display

Here you can get a quick view of how mobile responsive your website is.

Use it today to try to get a feel for how your site looks at different viewports — that is, the width (as measured in pixels) of the devices that will show your website.

Tomorrow we’ll continue to look at similar tools for checking your website for responsive design.

Won’t you subscribe to the newsletter? Be sure to LIKE and FOLLOW, just scroll down.

Categories
Tools

Litmus Email Testing (#5)

Sending emails? Testing your layouts in every email client is essential. Writing markup for emails is harder than writing markup for browsers (because it is more tedious).

The tool is pricey, but it is worth it and you can get a free trail for 7 days.

When you first sign-in you are presented with a screen that tells you to paste your HTML email content. However, it’s easier simply to send your test emails to the auto-accept address they provide you.

When you send off emails to this address, Litmus automatically just pulls them in and lets you look at them.

When you hover over an item in the inbox, buttons appear to let you navigate to a view specific to that email:

For this brief introduction we’re going to right to the “Checklist” view, which shows you how your email looks in every email client.

For macOS (Apple), it even shows you different versions for “dark” and “light” depending on if the user has dark or light set in their browser.

It shows you every email client in a small thumbnail view which you can easily scroll through to test all your emails.

Here’s yesterday’s blog post turned into an email and how it looks in Litmus:

Next check out the “First Impressions” and “Accessibility” sections, which will analyze and give you tips on your subject, name, preview text. Below you get an analysis for alt tags, missing HTML attributes, and things that make your content friendly to non-standard screen readers (for accessibility).

You can also use Litmus’s interactive builder to actually build out your email too.

Although a lot of email marketing tools abstract a lot of these concerns away from content creators, if you are hand-coding emails Litmus remains a strong and solid tool for anyone who wants to build their own custom HTML emails.

Categories
Tools

BrowserStack (#4)

BrowserStack is the herculean all-platform solution for cross-browser testing. You can see and test your browser, quite literally, in every web browser.

Cross-browser testing is super complex, and thankfully the advancements in HTML and browser implementation have made cross-browser implementation take less time than it used to.

Nonetheless, only a fool wouldn’t test their website in a cross-section of the browsers they know are visiting their website. How do you know who’s visiting your website? An upcoming post on Google Analytics will show you how to see your traffic in a pie chart by web browser. I recommend you test any browser that shows 5% of more of your traffic, as a good starting benchmark. [Sign up for the email list now to keep up-to-date.]

When you sign up for BrowserStack’s free trial, it asks you to set a preference if you are testing first for web or mobile (a trick question, so click “Skip”)

Now you come to the main screen. Here you will see the Platforms on the left: Android, iOS, Windows, Windows Phone, and Mac OS/macOS:

You’ll want to start by selecting the platform you want to test on the left.

Next on the right, you’ll see a bunch of devices if you are selecting a mobile platform.

Desktop Browser Testing

When you choose Windows or Mac (which are desktop platforms, not mobile ones), you’ll also need to select which version of the operating system.

Finally, choose the browser to test against. Here, let’s select Firefox version 78

Next, BrowserStack will actually startup a real (virtual) instance of macOS Catalina for you! Then it will launch Firefox browser where you can test your staging (or development) site.

Mobile Browser Testing

On mobile, the most important thing to note is that there are two kinds of testing: (1) Simulated, and (2) on-device. Simulated means a computer in the sky runs a virtual session of your mobile operating system. On-device means that a real device is actually being remotely controlled (they are controlled via connections to computers) available to you as you test. It is really the real thing— sitting in a giant data cluster somewhere— and when you load web pages on it you get the true results. Simulated results aren’t quite as good, so it’s often best to use real devices.

You can see the real devices because they have a tiny little blue “device” icon next to them:

To see the similuated environments, you click here:

see simulated environments

Local Testing, Screen Recording, and More

As a developer, you can use BrowserStack to connect to your local machine running at 127.0.0.1:3000. It’s quite easy actually, it’s called “Interactive Testing” and it works great. From any environment, you’ll have a small control panel that will let you control BrowserStack. Look for the “Local testing” option

Local Testing

You will then need to download and install some software on your machine.

Once installed, launch BrowserStackLocal

Once installed & launched, from back within BrowserStack, you’ll just go directly to 127.0.0.1:3000

Here you can see I’m running the default Rails app on my local machine.

BrowserStack can even do screenrecording and more fancy things like Selenium testing against different browsers too.

Categories
Tools

Browseo (#3)

This tool will show you a hierarchy of particular elements as if you’re looking at your web page as though it is a web browser.

Start at https://www.browseo.net/

Let’s profile this website, blog.jasonfleetwoodboldt.com, to see how good I am at SEO.

Browseo will tell us a whole bunch of meta-information, like our title, our Twitter card, our viewport settings. It’s good to review these because they are easily left off (which will hurt your SEO rank). You will see your SERP preview (“Search engine results pages”) — that’s how your website looks in Google and other search listings.

This tool is useful for a quick analysis to check if you’ve missed any important settings, but it doesn’t offer much in the way of content analysis.