Share Responsive Web Design Layout Screenshots with Chrome Extension “Full Page Screen Capture”

share responsive design screenshots article banner

Are you making every web design preview in Photoshop? Does it take time for every change you need to make for multiple browsers?

If you are in your frontend web development phase and would like to quickly share screenshots of live results, the Google Chrome extension “Full Page Screen Capture” will make your processes so much faster.

You will be able to capture exactly what the Google Chrome browser and user sees, instead of a theoretical design that has not been tested on browsers.

No more cutting and pasting image files!

First, open Google Chrome and get the Chrome Extension at the Chrome Web Store.

chrome store responsive screenshots extension

Select “Add To Chrome” and install to your browser. Restart your browser or computer if necessary.

A “Full Page Screen Capture” icon will show in your Chrome browser menu bar.

share responsive screenshots chrome icon

 

Go to a website you would like to capture a screenshot and select the “Full Page Screen Capture” icon.

Share Responsive Web Design Layout Screenshots  loading screen

Do not touch anything while the extension scans the website, otherwise your progress will be canceled.

 

Responsive Web Design Layout Screenshot Example

Once the capture is completed, a new tab will open with name “Full Page Screen Capture”. A full resolution screen capture will be displayed in the center of the page. Right-click the image and save the image.

 

Screen Capture Responsive Layouts

On the page that you want to show responsive layouts, press F12 to open Chrome Developer Tools. These tools will allow you to test different resolution sizes on the page you are showing.

Responsive Screenshot example

If you cannot see device options, make sure the blue “Toggle device toolbar” icon is selected in the Developer Tools panel.Developer Tools selection for responsive screenshot

Right-click the image to save the full resolution screenshot of your responsive layout.

example of mobile responsive layout screenshot

What You Should Know

Websites that have interactive content and fixed objects may not show correctly in the screenshot. You should disable or fix the interactive objects in the state you would like to show in the screenshot. Otherwise, you can use 3rd party image editing tools to refine your screenshot before delivering.

Get Google Chrome

https://www.google.com/chrome/

Get Full Page Screen Capture Extension

https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Using URL Builder to Improve Analytics Reporting

When using Analytics, Google itself has access to enough information to feed you a lot of data in terms of users’ interactions with your website, as well as where they originated from. However, there are a couple types of marketing efforts efforts that can lead to users accessing your site from sources that Google either can’t identify or can’t segment enough to be useful to you.

The two prominent examples are email marketing campaigns and running multiple ads on a single domain. In the case of email campaigns, google doesn’t have control over your email client, and thus doesn’t know where the email link originated. As a result, without using URL builder, one’s email campaign traffic will likely end up showing up under Acquisition Channels as Direct traffic. When running multiple ads on one website– you may have one banner ad, header, footer, plain text, etc.– google will not be able to differentiate which traffic came from which ad, preventing you from assessing their performance and adjusting accordingly.

In these cases, Google offers a simple tool to feed it the information it needs in order to give you this useful data- URL builder. Using URL builder allows you to create a custom url for your destination page and attribute the desired source information, in turn allowing Google Analytics to better display the exact behavior of users.

 

To access URL Builder click here or search for “URL builder” and ,if you’re logged into analytics, you should see a page like the following:

 

URL builder homepage

 

Taking the example of an email marketing campaign, what you’ll want to do is enter the url of the page that you are linking to in your emails. In this case lets say that I’m sending links to Astral Web’s content page:

 

URL Builder Landing page

I then fill out the boxes as required below:

URL Builder Demonstration image

*when copying and pasting destination URLs, be sure that they do not contain any excess coding or characters- you’ll end up with a non-functional link.

After clicking Submit, we’re given a long link that includes all of the information that has just been entered into URL Builder.

Unique URL from URL builder

This is the link that I’ll want to put into my emails (or ads, etc.) in order to identify them in analytics.

In order to ensure that the link is functional and visible in analytics, paste this link into a separate browser window while you’ve got your viewing your Real Time > Traffic Sources. As you can see below, if the link is functioning properly, you’ll be able to see it almost immediately in Analytics. Furthermore, all the information you’ve input to distinguish the medium, campaign, and target are now identified by Google, and Analytics can give you the kind of information that is really crucial to optimizing your marketing campaigns.

Checking URL builder with Real Time view

If you’d like more information, please check out Ori’s video tutorial on using URL Builder.

 

Beginners link maintenance / Monitoring 404 errors

Your website’s links represent fundamental building blocks of your online presence and visibility. Both routing traffic in from outside, as well as internally within your site, a non-functional link can be extremely harmful to one’s business—Just as one who seeks out a physical address only to find an empty lot, so a 404 file-not-found page is likely to turn away someone who had the intention of engaging with your web site. By accessing your website through Webmaster tools and Google Analytics, one can identify and begin to resolve such errors.

 

Firstly, by accessing one’s site through Webmaster Tools (in this case Astral Web Taiwan), one can see the links that google has been unable to find as it crawls the web. Below, one can see that this information is accessed by selecting Crawl > Crawl Errors and entering 404 in the drop-down box above and to the right of the list of errors.

 

webmaster tools
This is your first list of non-functional links that may need to be addressed.

 

Google Analytics offers a more detailed, customizable display of link errors. Following the steps outlined below, one is able to access a list of 404 errors that have been encountered through external links, which can be particularly undesirable to a websites effective presence.
Once in Analytics, select Behaviors > Site ContentLanding Pages:

 

.Google Analytics Menu
This results in a list of landing pages for your website, which are ranked by frequency. Secondly, you’ll want to add a Secondary Dimension defined by Page Title:

 

analytics secondary dimension
Once this is done, click on the advanced search option:

 

advanced search
Enter 404 to delineate your search to instances of 404 errors:

 

404 advanced search

At this point you should be left with a comprehensive list of all 404 errors that have occurred within your domain, appearing something like this:

 

analytics list 404

By identifying these non-functioning  external links, you have the opportunity to resolve potentially significant numbers of 404s that each represent someone’s intention to access your site’s services or content. Addressing such issues has equally significant potential to affect your site positively. Utilizing Webmaster Tools and Google Analytics, you can maintain your link functionality, taking a significant step in the maintenance of an effective web presence.

Setup Virtual Phone Number & IVR Extensions /w Twilio

This article shows you how to implement IVR extensions with your twilio phone number.

Step 1 – Register with phone number from twilio

If you haven’t done so already, go to twilio.com and get a phone number.

Twilio

Step 2 – Setup scripts and XML on server

Before you tell Twilio to handle your voice calls with the following scripts, you’ll need to create them.

a. XML file – Output to twilio is handled with xml. Your xml file will run as soon as a phone call is initiated. This xml for example has an intro message and asks the user to input a 1,2,3 or 4 and sends response from phone to our second file, a php file.

Please make sure that you input your intro message and specify at the end of xml, the full URL path of your php processing file. In this case it’s http://www.example.com/handle-incoming-call.xml


<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Gather action="handle-user-input.php" numDigits="1">
<Say voice="woman">Welcome to COMPANY.</Say>
<Say voice="woman">In order to further assist you. Please listen to the following:</Say>
<Say voice="woman">For sales, please press 1.</Say>
<Say voice="woman">For technical support, please press 2.</Say>
<Say voice="woman">To speak with Bob, please press 3.</Say>
<Say voice="woman">For all other inquiries, please press 4.</Say>
</Gather>
<!-- If customer doesn't input anything, prompt and try again. -->
<Say voice="woman">Sorry, I didn't get your response.</Say>
<Redirect>http://www.example.com/handle-incoming-call.xml</Redirect>
</Response>

b. PHP file – This file gets the input from xml (number dialed) and checks the day of the week and time. then it runs a few if statements and either redirects phone number and calls a phone or redirects via a twiml to a voicemail with special message recorded in mp3.


<?php

$dayofweek=date('D');
$hour=date('H');

if(($dayofweek!='Sat')&&($dayofweek!='Sun')){
if(($hour>17)&&($hour<23)){

//ok time to call

$ok='1';
}
}

header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<Response>';
$user_pushed = (int) $_REQUEST['Digits'];
if ($user_pushed == 1)
{
echo '<Say voice="woman">Connecting you to, sales.</Say>';
if($ok!='1'){echo '<Redirect>http://twimlets.com/voicemail?Email=info@example.com&Message=http://www.example.com/ftZLg.mp3</Redirect>';}else{
echo '<Dial>+13105551212</Dial>';}
}

else if ($user_pushed == 2)
{
echo '<Say voice="woman">Connecting you to, technical support.</Say>';
if($ok!='1'){echo '<Redirect>http://twimlets.com/voicemail?Email=info@example.com&Message=http://www.example.com/ftZLg.mp3</Redirect>';}else{
echo '<Dial>+13105551212</Dial>';}
}
else if ($user_pushed == 3)
{
echo '<Say voice="woman">Connecting you to, Ori Tzvielli.</Say>';
if($ok!='1'){echo '<Redirect>http://twimlets.com/voicemail?Email=info@example.com&Message=http://www.example.com/ftZLg.mp3</Redirect>';}else{
echo '<Dial>+13105551212</Dial>';}
}
else if ($user_pushed == 4)
{
echo '<Say voice="woman">Connecting you to, operator.</Say>';
if($ok!='1'){echo '<Redirect>http://twimlets.com/voicemail?Email=info@example.com&Message=http://www.example.com/ftZLg.mp3</Redirect>';}else{
echo '<Dial>+13105551212</Dial>';}
}

else {
echo "<Say voice="woman">Sorry, You dialed an invalid number.</Say>";
echo '<Redirect>http://www.example.com/handle-incoming-call.xml</Redirect>';

}

echo '</Response>';
?>

* reference – http://www.twilio.com/docs/howto/ivrs-extensions

Step 3 – Login to twilio.com and reference script

Go to “numbers” page, and click on your phone number. Under the “Voice Request URL”, enter the full path on your server to the xml file and click on “save changes”.

Voice Request URL in Twilio

That’s It!.

Please feel free to view complete “how to” video or comment at bottom of this page with any suggestions or questions.

Video Transcription:

Would like to show you how to implement a virtual phone number via a twilio phone number, setup extensions and an automated system (IVR) and to setup some a timed programmatic addition to redirect phone number based on time of day and day of week. In order to implement this, we use a twilio phone number. Twilio enables you to rent a phone number and do simple programming to enhance phone number (voice and sms). In addition twilio is very affordable.

Let’s dive in and begin. We setup a phone number. the test is, anytime someone calls on a weekday during specific business hours, we want to enable them to go to specific extensions, (sales, technical support, etc), and if not within business hours or weekend, it will redirects to voicemail. Pretty soon, we’ll show you the programming.

Register with twilio.com, get a number and login. Go to the “numbers” page and click on phone number. We want to tell twilio what to do when a voice call comes in via the field of “voice request url”. We can select all or inbound and outbound. Also you can set what script to run in case of a sms message. Right now, we’ll go over the voice option. We setup a file on our webserver. In order to actual ger more information, go to twilio docs (http://www.twilio.com/docs/howto/ivrs-extensions). you can download their zip file and read their examples and documentation to help you understand more. IVR allows you to create extensions. For example, an intro message and “for this, press 1, for this press 2″ and the script will know how to handle it. Other than php, the examples may be in other languages as well. The docs explains what happens. when a customer dials a twilio number, it goes to twilio’s server and the server triggers the url we just specified. I’m going to dive into this pretty quickly. We’re now going to go to the ftp and create this file. Now’s we’re using our ftp client and editing our php script. In our voice request url, we told it to go to our xml file named
handle-incoming-call.xml. Let’s edit this file. It’s a simple structured xml file which says the following. Whenever you gather an input from the phone call, send it over to another file, our php file. Say in a woman’s voice “welcome to astral web”, then pause and say “in order to proceed”… “for sales press 1″, etc etc. The gather field will listen to the phone and will send info to the php file and if someone did not press a correct number the xml repeats the same menu and waits for correct dial/input. Now let’s edit the php file and look inside. Again the output of the file is in xml and the file listens to the input. If the user presses 1, it will run the first part, if the user presses 2 and on and on. If nothing was presses, it will say in a woman’s voice, sorry you dialed an invalid number and will redirect to the original xml.
the script will check if it’s during business hours and if so, it will redirect/dial to another phone number and if not, it will play the mp3 from twimlet which we earlier recorded for voicemail. Twimlet is twilio’s own language which enables us to add more coding at we did via the twiml is redirect to voicemail, send an email and play as the message on voicemail an mp3 that we recorded.
Instead of mp3, you can input regular text. for example, hi i am not in but remember that in the url, you cannot have spaces. Replace spaces with plus signs “+”. Above in the code, we set the time and date and then checked in if statements.That’s it! I wanted to give one more tip on xml. Make sure you always have double quotes and quotes are closing correctly and that your header is in xml. If you have a problem, you can diagnose via your dev tools and logs area. Don’t forget to test that everything works.

Phone Call Event Tracking with Google Analytics & Twilio Number

This article explains in a simple manner how to track phone calls and call duration with twilio phone numbers and input into google analytics (universal) for event tracking.

Step 1 – Make sure you have google universal analytics on your website

If you don’t, please install the latest tracking code or upgrade at google.com/analytics

Google Analytics Universl Code

Step 2 – Register with twilio and get a phone number

Register and login to twilio.com

Twilio

Step 3 – Create script to input into google analytics

All you have to do is add the following code to a webpage on your server.
DON’T FORGET TO:
a. change ANALYTICSACCOUNTID to your account analytics account id (“UA-xxxx-xx”)


<?php

$datetime = date('m-d-Y--H:i:s');
$call=$_GET['CallDuration'];

header("Location: http://www.google-analytics.com/collect?v=1&tid=ANALYTICSACCOUNTID&cid=123&t=event&ec=Contact&ea=Call&el=$datetime&ev=$call");
exit;

?>

Step 4 – Reference script in twilio

After you login to twilio, on main dashboard page, click on “numbers” page and click on your phone number. Under “voice” section, click on “optional voice settings” in order to open more options and add url of script we just created to “Status Callback URL” and click on “save changes”.

* see google guidelines at Google Analytics Universal – Measurement Protocol Developer Guide -https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide

Status CallBack URL

Step 5 – Test in Analytics

Make a phone call and look at the real-time events section and test over time.

Look at analytics events

Hope you enjoyed this simple video. We love twilio and analytics, especially the bridge between offline and online.

Let us know if you have any questions. We’ll be happy to help!

Video Transcription:

Hey everybody. This is Ori from Astral Web. I’m very excited to create this video to show you how we bridge the gap between the offline and online world. in this video we’re going to track everytime someone calls our phone number, we’re going to put into google analytics the duration of the call. This is a very simple example so you can understand what’s going on and you can build upon that. Very cool thing – let’s dive into it very quickly. The first thing we want to do is buy a twilio number. Twilio is a really nice company and enbales you to add programmatic addons. Go to twilio.com and register and we recommend them. After you register with twilio , login and click on phone number and go under the voice section under optional voice settings and status callback url. What that means is anytime a phone call is completed, at the end of the call it will trigger the url you specify. We will create this script in a second. The script will then take information from twilio and input it into google analytics. Very cool!

Let’s look at the file. eventtracking.php. Let’s go to our server via ftp client and edit eventtracking.php. All you have here are 3 or 4 lines. What i actually did was included the date and the time in order to track in analytics when the call was made and the GET field we receive from twilio. After you get the time and the date from the server plus you might want to adjust the time if your server time is different from you home or work computer. After that you will use the latest google analytics universal url (/collect/). If you don’t have analytics universal you will need to install on website. Let’s look at code and check if we have latest analytics universal code. You can also check in analytics in admin, tracking info and tracking code. It should say, this is the universal analytics code… It came out a few months back (as of 2013). Looking at the redirect header url, google analytics enables you to pass offline information via a collect url in a very simple manner. Now you have to insert different fields. TID is the account id starting with UA dash …. CID is just a userid and this case we don’t use it. Now we specify that we want to track an event. EC category is called contact. EA is the action is called call and the label is the date time and the value is the call duration. So anytime someone calls you at the end of the call, twilio will go to your specified url and the script will give analytics the call duration. And i’ll show you how it looks. In the events section in analytics, you’ll be able to see time of calls and durations. You can translate into minutes instead of seconds. To test, make a phone call and go to google analytics, real-time and look into events and make sure it works correctly.

If you’re running a pay per click campaign, you might want to have different phone numbers
for your landing pages or from SEO. Try to have a unique twilio number for your website, different from your regular store or other numbers for better tracking. Super simple code and works real well. If you have any questions, i’ll be happy to share and answer questions.

Check Load Speed of Webpage

In order to analyze how fast your website or specific webpage loads, you will want to use an analysis tool. We like using gtmetrix.com especially because it shows the specifics of load time and helps us find bottlenecks and issues with our site.

Step 1: Go to Gtmetrix.com

Gtmetrix Tool

Step 2: Check Website/Webpage

Enter into text box your specific webpage and click on “Go”

Step 3: Look into Data

Take a look at the “Breakdown” and “Recommendations”

Especially look into tabs

– pagespeed
– yslow
– timeline
– history

Page Speed Data

Page Speed Timeline

Video Transcription:

Hey everybody. creating another site speed tip video and just wanted to talk about how do i and webmasters, site owners figure out how fast is there website loading. one tool that we use a lot is gtmetrix.com. it’s not our site, just a simple tool. i think they do a really great job at diagnosing each part of how the site loads. so all you have to do is go to gtmetrix.com, insert your domain name. let’s insert ours for example and click on go. it’ll fetch the page and then figure out what’s taking time and give you some information about how long is it loading, what are the specific parts and what can you improve. so you can take those guidelines and improve the site in general. so once i did this i put our website right here and it gave us a page speed grade of a 96% and y slow page grade of b. and it tells us that the entire website with css and javascript loaded in 2.7 seconds. the total page size size including all external pages, html, javascript and css and there were 47 different files including php and css. so this is how long the website took to load, 2.7 seconds. and you know maybe this is sufficient for you or not but if you go down here, there are 4 tabs and it’ll tell you what you’re scoring in each of the things, and of course try to improve the ones that you have bad grades. one example of speeding up website load is instead of having separtae images you can combine some of them in css sprites and have multiple in one so the browser fetches less images. the next tab is yslow, and on and on. so you can see all of these improvements to do and the other thing i really like looking at is the timeline and that shows you how long ever single file took to do fetch and not just how to fetch but also each component of dns, server wait and transfer. so you can see the php file, the index file, took .1 seconds and on and on. and you can figure out if you have 404’s or specific very large files or take a long time to download. hope you enjoyed this. thanks!

Google Browser Size Tool

All web designers today must pay attention to additional aspects such as SEO and conversion data.

See Google Browser Size Tool to get a better idea about what users can actually see without scrolling (numbers ofcourse don’t include less space taken from toolbars and funny browser bars)

Oh, users can only see first row of 3 products without scrolling

Enjoy!

Nofollow Chrome Extension

See Astral Web’s Chrome Extension for easy to find out nofollow links on any page.

Description – Hover over a webpage link to discover if it is a follow of nofollow link. Great for SEO work & link building. Utilizes robots.txt, meta robots tag and rel for nofollow diagnosis. Currently does not work with javascript links.

Get nofollow chrome extension