Monday, November 26, 2012

Digital Inspiration Technology Blog: Track the Browser Size with Google Analytics

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Track the Browser Size with Google Analytics
Nov 26th 2012, 10:46

Google Analytics reports the “screen resolution” of the visitor’s computer but skips the other important metric which is the size of the browser window. These two numbers will be approximately similar if the browser window is kept in maximized state but not otherwise.

Take a look at the example below. The screen resolution of the desktop is 1920×1080 (this is the number recorded by Google Analytics) but the actual browser window size (where your website is displayed) is a little over 900×600 pixels.

Browser Size vs Screen Resolution

Google Analytics displays the Screen Resolution and not the actual Browser Size of the visitor.

The screen resolution is a less-useful metric and what you really need to know is the actual size (or range) of the browser window of your visitors. This data can be easily gathered through Google Analytics – simply copy-paste the following code snippet just before the closing </body> tag of your website template:

<script type="text/javascript">   var width  = window.innerWidth  || document.body.clientWidth;   var height = window.innerHeight || document.body.clientHeight;     width  = Math.round(width/100)*100;   height = Math.round(height/100)*100;     var size = width + "x" + height;   _gaq.push(['_trackEvent', 'Browser Size', 'Range', size]);  </script>

It calculates the actual height and width of the browser window and then rounds off these numbers to the nearest 100. For instance, a browser size of 985×1190 pixels is recorded as 1000×1200 pixels. You can then access this data in Google Analytics through Content -> Events -> Overview and then choose “Browse Size” as the Events Category.

Once you know the popular “ranges,” you can update the site layout and placement accordingly so that visitors can see all the important elements on your pages Above the Fold without having to use the scroll bar.

Also see: Getting Started with Responsive Web Design

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Track the Browser Size with Google Analytics, was originally published at Digital Inspiration on 26/11/2012 under Google Analytics, Web Design, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Digital Inspiration Technology Blog: Play any YouTube Playlist with VLC Media Player

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Play any YouTube Playlist with VLC Media Player
Nov 21st 2012, 19:54

Do you know that VLC Media Player, the world’s favorite video player that supports nearly every video format, can also play YouTube videos on your desktop without requiring the web browser or the Adobe Flash player.

To get started, open the VLC player, press Ctrl+N to open the Network URL dialog and paste any YouTube video URL in the input box.

YouTube in VLC Media Player

The Benefits of Watching YouTube Videos with VLC

The streaming videos will play inside VLC Media Player just like any other local video file while offering some additional benefits not available inside the standard YouTube player. For instance:

  1. You can choose Video -> Always on Top inside VLC and the YouTube video window will stick to the foreground while you work on other tasks.
  2. Press the Loop button in the player controls and the YouTube video will play non-stop in a loop (also possible with Chrome add-ons).
  3. You can change the Playback speed of the YouTube video and make it run slower or faster than the normal speed.
  4. Use the Tools -> Take Snapshot option to capture a screenshot image of any frame or scene in the YouTube video.
  5. Watch the YouTube videos without the ads. I played a couple of movies and music videos inside VLC and none of them carried any pre-roll ads.

Play YouTube Playlists inside VLC

VLC, by default, only supports single YouTube URLs but it also possible to import an entire YouTube Playlist into VLC and watch all the videos in sequence.

Play YouTube Playlists inside VLC

You can watch an entire playlist of YouTube videos inside VLC Media Player.

Here’s the trick. Right-click and save this file to your desktop. Now open the VLC installation folder (%ProgramFiles%\VideoLAN\VLC) and move the .lua file into the exiting /lua/playlist folder.

Restart the VLC Media Player and choose Media -> Open Network Stream. Now paste the URL of any public YouTube Playlist here and the enjoy the videos.

Also see: Watch YouTube Playlists on your iPad

In addition to YouTube, VLC Player can also play DailyMotion videos outside the browser. It is supposed to work with Vimeo videos as well but that is currently broken possibly due to a change in the URL structure at Vimeo’s end. Thanks @igrigorik.

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Play any YouTube Playlist with VLC Media Player, was originally published at Digital Inspiration on 21/11/2012 under YouTube, Software.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Digital Inspiration Technology Blog: Geotag your Tweets with any Random Location

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Geotag your Tweets with any Random Location
Nov 21st 2012, 12:16

On Twitter, if you do not wish to reveal your geographic location in your tweets, you can either completely disable the location feature from Twitter settings or you can can attach some random (read, fake) location to your tweet.

For instance, here’s a recent tweet that specific my location as the White House in Washington DC though it was written from a place that is at least 8000 miles away.

Tweet Location

Fake your geographic location on Twitter

Attach any Location to your Tweets

Now most Twitter mobile clients won’t let you attach random locations to your tweets but there’s a web-based app called PleaseDontStalkMe.com that may come handy here. Here you can pick any location on a Google Map – either drag the marker or use the search box to reach an exact address – and tweet.

Since the Twitter website no longer displays the app name that was used to send that tweet, your followers on Twitter are less likely to know that you faked your location in the tweet. Do remember to limit the length of your tweet to 140 characters else the tweet would fail but without offering an explanation.

You can geotag your tweets from the Twitter.com website as well (click the Location icon near the tweet button) but in that case, you can only attach a city-level location to the tweet and not an exact location.

Also see: How to Fake Twitter Conversations

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Geotag your Tweets with any Random Location, was originally published at Digital Inspiration on 21/11/2012 under Location, Privacy, Twitter, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Digital Inspiration Technology Blog: Download the Evernote Bible for Free Today!

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Download the Evernote Bible for Free Today!
Nov 26th 2012, 05:35

Evernote

Whether you are an experienced Evernote user or a newbie who is just trying to make sense of the various features available inside Evernote, here’s something useful for you.

The Evernote Bible is a $9.99 ebook loaded with tips on how you can use the Evernote software more effectively. It discusses the various scenarios where you can use Evernote, how you can perform advanced searches, how to automate Evernote with IFTTT, and encryption among other things.

My favorite part though is at the end where the author shares 99 creative uses of Evernote. For instance, since Evernote can encrypt text, you can also consider using the software as an online Password manager.

The Evernote bible is available as a free download on Amazon today. You can read it on your computer, mobile phone or the Kindle, if you have one. [via Computer Books]

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Download the Evernote Bible for Free Today!, was originally published at Digital Inspiration on 25/11/2012 under Evernote, Offers, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Monday, November 19, 2012

Digital Inspiration Technology Blog: Run the iOS Simulator in your Web Browser

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Run the iOS Simulator in your Web Browser
Nov 19th 2012, 20:27

iOS Simulator App

The iOS Simulator is primarily targeted at Apple developers for them to develop iPad and iPhone apps on a Mac. That said, if you create websites, you can also use the iOS Simulator app to test your web designs on an iPhone or iPad without actually having the device. The iOS Simulator includes the native Safari app that is very close to the real thing.

The iOS Simulator app is only available for the Mac but if you are Windows or Linux, you can use the Browser Stack tool to run the “official” iOS Simulator directly in your web browser without installing any software.

To get started, create an account at Browser Stack and then choose “iOS” as the platform. Put your website URL in the input box and choose an iOS device – they offer the iPhone 3GS/4/4S/5 and iPad 1/2/3 loaded with various version of iOS. You can also switch devices while you are inside the iOS Simulator (see the above screenshot).

This is like you are connecting to a remote Mac using your browser and that computer is running the iOS Simulator app. While you are inside the Simulator, tap (i.e., double click with your mouse) the Safari icon and launch any of your websites.

iOS Simulator in Windows Browser

Unlike the fake emulators, what you are now using i very similar to the actual Safari app that available on a physical iOS device except that you have to use the mouse and not touch gestures to interact with the app.

The free plan offers 30 minutes of testing. And in addition to the iOS Simulator, Browser Stack also includes emulators for various Android devices.

Also see: Test your Website on Mobile Phones

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Run the iOS Simulator in your Web Browser, was originally published at Digital Inspiration on 19/11/2012 under IPad, IPhone, Web Design, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Digital Inspiration Technology Blog: SEO Tip for Blogs – Don’t Waste the PageRank

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
SEO Tip for Blogs – Don't Waste the PageRank
Nov 19th 2012, 13:47

Most blogs use the following layout for their home pages and the archives. There’s the title of the post, a short excerpt (description) and a “read more” link that points to the full article. Some blogs may also add a featured image near the post’s excerpt.

Blog Layout

A common layout for blogs

There’s one little problem with the above layout though – it wastes your Google PageRank and thus may not be the most optimal layout as far as SEO is concerned.

Let me try explaining it in simple English.

Your blog’s homepage has a finite amount of Google PageRank that is equally distributed among all the links that exist on that page. Thus, if you put 10 links on a web page whose PageRank is 5, each of those links is passed 0.5 PageRank. If you decrease the number of links from 10 to 5, each of the links will be awarded with a PageRank of 1.

In the above example, there exist 2-3 links per post on the homepage – the post title (1), the featured image (2) and the “read more” link (3). If you can have just create one link from the home page to the inner post page, the linked page will get more PageRank which may benefit them in organic search rankings.

How? A possible solution is that you get rid of the “read more” link on the blog homepage (and archive pages) and instead apply a different CSS style to the post titles so that they instantly appear as links – you can use a different font family, increase the font size and maybe apply a different color (like some shade of dark blue).

Also see: Don’t Use NOFOLLOW for Internal Links

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, SEO Tip for Blogs – Don’t Waste the PageRank, was originally published at Digital Inspiration on 19/11/2012 under SEO, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions

Digital Inspiration Technology Blog: Embed YouTube as an Audio Player

Digital Inspiration Technology Blog
Digital Inspiration is an award-winning how-to tech blog around all things related to computer software, web applications, mobile and personal productivity.
Embed YouTube as an Audio Player
Nov 19th 2012, 09:03

How do you embed only the audio portion of a YouTube video in your web pages.

A popular option would be that you extract the audio portion of that YouTube video and then use the Google MP3 player to embed that MP3 fil into your website. This will work but YouTube is very likely to have a problem with your approach.

The other approach could be CSS based where you embed the regular YouTube video player and then use the magic of CSS styles to hide the video inside the embedded player. See demo:

This internally renders the YouTube player using the IFRAME player and should therefore work on both desktop (Flash) and mobile (HTML5) browsers.

Without boring you with the technical details, here’s the little HTML code that turn the YouTube video player into an audio player. Simply replace the youtubeID with the ID of your YouTube video and you are done.

  <div style="position:relative;width:267px;height:25px;overflow:hidden;">    <div style="position:absolute;top:-276px;left:-5px">      <iframe width="300" height="300"         src="https://www.youtube.com/embed/youtubeID?rel=0">      </iframe>    </div>  </div>  

The YouTube logo inside then player, when clicked, will transport you to the original video hosted on the YouTube website.

Tweet this Share on Facebook


Digital Inspiration @labnolThis story, Embed YouTube as an Audio Player, was originally published at Digital Inspiration on 19/11/2012 under Embed, YouTube, Internet.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions