Blog

A Day with Google Glass
jpleakis

A Day with Google Glass

  • By jpleakis
  • March 28, 2014
  • Tech

I was lucky enough to borrow a pair of Google Glass from the team at the USC School of Medicine Greenville. One of their Information Technology guys was even more lucky to get invited to have the chance to purchase them. ¬†Here’s a quick rundown of my thoughts on this groundbreaking piece of wearable computing.

The Hardware

They’re lighter than you might expect. ¬†They have only a few buttons, and the majority of the interface is controlled through touch gestures via a touchpad integrated into the frame on the right side. ¬†They take some getting used to, and the display is translucent, and only takes up about 5% of your entire field of view. ¬†After wearing them for awhile, you can start to “look past” them, and almost not even notice that they’re there. ¬†If you’ve worn glasses before, you know that initial feeling of seeing the frames, and after awhile, you don’t really notice them.

photo (5)

Battery life is quite poor, especially if you’re using them for a video call. ¬†I charged them quite a few times throughout the day. ¬†The wifi signal also tends to be rather poor – walking around our office, which is well blanketed with access points, a video call tends to get choppy if you get too far away from an access point.

Setup & Glassware Apps

There is an app available for iOS and Android that aids in setting up the device, since you have no keyboard and really no way to input data, things like setting up a wifi password are done through the app.  You type in the AP name and password, and a QR code is generated on screen, which you scan with the glass to get access to the Wifi.

You can then begin installing “Glassware” apps. ¬†There is a very limited selection of glassware available, but it’s very much a beta product. ¬†Here’s the Glassware I had installed on my borrowed set:

Allthecooks

A recipe app. Very simple, but I could see how useful this would be in the kitchen. ¬†Just say “Ok Glass, find a recipe for bourbon chicken” and within seconds, you’re presented with “Cards” of different recipes that you can then click on, and view the instructions on how to make a certain dish. ¬†You can simply tilt your head up to see the ingredient list at any time. I can see a lot of potential with this.

Facebook

Facebook integration is dead simple. ¬†Take a photo or a video and you have an option to “Share” to facebook, and add a comment by your voice.

Google+

Much the same as the facebook glassware app, you can snap a photo or video and share to your google+ page to any of your circles.  Photos and videos are also automatically backed up to your google+ profile for easy retrieval on another device.

The New York Times

I didn’t play too much with this one. ¬†It periodically adds “Stories” to your Glass Timeline (an aggregation of all the apps and photos and videos you’ve taken and shared recently) and gives you the option to listen to a small audio narration.

WordLens

An augmented reality language translation app. I thought this was by far the coolest glassware app.  Simply look at something in a foreign language, and it changes the words out to their english counterparts instantly.  Is it buggy? Sure. Is it perfect? Not even close. Is it a perfect example of the great things that this technology can do? Absolutely.  I can imagine a traveler wearing these in a foreign country and looking at signage to figure out where the bathroom is, or what to order on a menu.

Youtube

Being a Google Product, it’s no suprise that YouTube is basically baked right in. ¬†Take a video, share it instantly to Youtube.

The Appeal

I don’t think I ran into a single person today that had seen a pair in the flesh before. ¬†These are still incredibly rare, and a few people didn’t even know what they were. ¬†Plenty of people were shocked at the $1,500 price tag, but it’s the price you pay to be an early adopter. I think back to the day I waited in line that hot day in june in 2007 to plunk down $499 for the first iPhone, which didn’t have any apps, 3G, and couldn’t do MMS, features that even the dumbest phones at the time had standard.

I feel glass is in a very similar spot, very few people have it, and there is basically nothing you can do with it now, but it has an incredible amount of potential. ¬†I didn’t even get to test out one of the best features – turn by turn directions – you need the personal hotspot feature active on your phone, which I don’t have.

The Stigma

I didn’t wear them outside the office really, and I was cautious even in the office to be seen with them on. ¬†You feel like everyone is watching you when you have them on. They’re fairly discreet. ¬†You can snap on a pair of sunglass lenses and they wouldn’t look too much different from a pair of designer sunglasses.

 

There is already plenty of press about where these are, and aren’t allowed – and all the privacy violations that go with it. ¬†I see them igniting a debate much like e-cigarettes – it’s a new world and there aren’t definitive rules about how and where they can be used lawfully.

Will everyone be wearing a pair of these five years from now? ¬†I can remember scores of people who wrote off the iphone as a novel piece of technology, just a toy. Is this the next iphone? I guess we’ll just have to wait and see.

 

How to Create Razor-Sharp Share Photos for Facebook
jpleakis

How to Create Razor-Sharp Share Photos for Facebook

“The answer’s not in the box, it’s in the band” says Gary Winston, character from the 2001 film Antitrust. ¬†The generic CEO character loosely based on Bill Gates. I always thought it was a pretty cool line, and up until now, never really found anything that it applied to.

Enter OpenGraph Protocol

You’ve no doubt shared a webpage on facebook before. ¬†Usually, Facebook will crawl the page, looking for explictly set OpenGraph meta tags. ¬†If they are absent, it will pull the title, and the first image and description it deems to be the best representation of the page. ¬†You won’t see them in your browser – they’re hidden in the code.

If you’re a web developer, you no doubt know about the OpenGraph protocol, which allows you to specify the image, description, title and URL of your webpage when it’s shared on facebook. ¬†Like most developers, you probably save a 1200×630 JPEG image using Photoshop’s “Save for Web As..” option. ¬†This is a great option when you’re trying to balance image quality and image size, but no matter how high quality you save the image, facebook will recompress the image, causing artifacts and a generally poor image quality.

PNG to the Rescue

JPEG is pretty much the go-to image format for the web. ¬†For photography, it’s a superb trade-off of image quality for image size. ¬†On a typical webpage, when displaying a photograph, it’ doesn’t get much better. ¬†Things start to derail when Facebook gets a hold of it, and recompresses it to save space on their server.

I won’t go into the differences between a JPEG and PNG image – there is plenty to read with a simple google search. Just know, if you’re sharing on facebook, make your share images PNG files.

PNG files are lossless, meaning there is really no compression algorithm in place. ¬†The result is a crisp, clean image, with no artifacts, ghosting, etc, whether its a photographic image, vector art, or a combination, it looks pretty damn good. ¬†That being said, PNG is not a vector format. ¬†It’s a raster format with lossless compression. ¬†Don’t expect to get the same results from a PNG that you would an EPS file.

The Proof

So long story short, here’s the proof. I’ve taken a ¬†single high-resolution stock photo, and saved it as the Open Graph image for a page. ¬†I saved it twice. Once as a JPEG at maximum quality and once as a PNG. ¬†Both files were 1200×630 – the minimum that facebook recommends and shared them as a page test to see what would happen, and here’s the results:

In this example, I’ve copied the result of what facebook did to the same image, uploaded in both JPEG and PNG format and blew it up double the size. You can plainly see the areas where JPEG artifacts have come into play.

The original JPEG image was 232k, the facebook result was 16k, a difference of about 93%

The original PNG image was 133k, the facebook result was 60k, a difference of only about 54%

So for the exact same image, which is reduced to 398×207, the JPEG image loses almost twice as much of it’s data as a PNG image.

(Click on the image below to get the full effect)

difference

The Facebook Linter

The tool for checking how your shares show up on facebook is lovingly known as the linter (I have no idea where that name came from) or more professionally as the URL Debugger. This is a great way to check how your pages willl share before you actually share them, and alert you to problems.

Whenever you have added your OpenGraph tags, and you’re ready to share a page on facebook, use this tool to give you warnings or information about how it’s going to look when you finally pull the trigger.

Foundations of a Well-Designed Website
jpleakis

Foundations of a Well-Designed Website

I was asked by a coworker to come and speak to a class she teaches at a local university about what makes a good website. Like most students, I waited until the night before, and typed this up – my quick talking points for what I see as the building blocks for a successful website.

1. Content Management System

Primary functions of a CMS are to 1) Separate the content from the design. 2) Allow non-technical users to update website. Popular CMS platforms include WordPress, Drupal, and DotNetNuke. Most offer ‚”Plugins‚” or ‚”Add-ons‚” which extend functionality of the site (Calendars, Forms, Calculators)
cmscritic.com/dir/

2. Information Architecture

A properly designed page hierarchy makes the site easier to navigate. Poorly structured sites will cause users to give up when looking for something. Visually, imagine a tree structure, with the home page at the top, landing pages below, and further levels of content below each primary landing page.

webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html

3. Visual Design

Poor visual design is easy to spot. Good visual designs should be things that you don’t even notice. Large, clear typography. Proper line spacing. Good contrast. Plenty of white space and padding between block elements all play into a solid design.

heydesigner.com

4. Interface Design

Parts can be subjective, but there are plenty of best practices that everyone can agree upon. Logo at the top left corner, Navigation menus typically horizontally across the top. Content in the middle with sidebars either on the left or right. Usually the content column is 2/3 the width of the page, and the sidebars are 1/3

designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

5. Responsive Design

Separate Mobile Site vs Responsive Design. – The site detects the device, more specifically it’s ‚”viewport‚” and switches between different sets of CSS code to display the site differently for different size devices. Much more complex than traditional designs, easier to purchase an existing theme.

themeforest.net

6. On-Site Search

On a typical website, less than 5% of visitors to most sites will use search. It’s a good backup plan if our navigation proves to be less than useful. Often seen as a last resort if a user can’t find what they’re looking for. The built-in site search capabilities of most CMS platforms is typically poor.

google.com/cse

7. Google Analytics

Powerful tracking and reporting software. Great for testing the effectiveness of a campaign. Free. Stores a multitude of data points focused into three areas – data about your visitors, where they came from, and what they looked at.

google.com/analytics

8. Google Webmaster Tools

A suite of tools that help improve your site. See what google sees when it crawls. See who is linking to you. Submit a sitemap etc. Some features are already found in Analytics.

google.com/webmasters

9. Search Engine Optimization

Techniques used to improve ranking. White hat and Black Hat. Many of the popular CMS platforms have SEO modules or plugins that can be added. At a company that participates in e-commerce, there may be one or more people dedicated to SEO. In other cases, it may be a duty assigned to a web designer.

searchengineland.com

10. Social Media Presence

The most important part of having Social Media Presence is staying active. You also must decide how you want to interact with your followers and have plans to deal with negative interactions – turn them into a positive. Hootsuite is a great tool for managing posts across several networks.

hootsuite.com

11. Social Sharing

Facebook and Twitter both provide a range of tools designed to make sharing easier from your website. AddThis and ShareThis make the process even easier.

developers.facebook.com/docs/plugins/

dev.twitter.com

addthis.com

sharethis.com

12. The User Experience

Doing as many of the above things correct as possible is the start of creating a positive user experience. These things must be constantly checked and rechecked, and changed as needed. Providing a ‚”Feedback‚” form or survey is a great way to gather real data on how well your site is working.

mashable.com/2011/03/06/user-feedback-apps

 

Other Useful Tools

Google Alerts

Sign up to get notifications when a new page or article is indexed by google matching your keywords.

google.com/alerts

W3C Validator Service

Free service checks the validity of the html code on your site, which can affect SEO and even the way the page looks or works in some browsers.

validator.w3.org

Basic WordPress Security
jpleakis

Basic WordPress Security

WordPress has no doubt exploded in popularity over the last few years. I use it on almost a daily basis not only to power this site, but at least a few dozen other sites for my job, and for personal projects. ¬†But it’s not infallible – because of its widespread use, it’s a popular target of hackers, which prey on a basic set of vulnerabilities that a novice user doesn’t always think about. ¬†Here’s a few tips to harden your WordPress installation and give yourself a little peace of mind.

Passwords

Probably one of the easiest ports of entry for a would-be intruder. Luckily, it’s also one of the easiest exploits to guard against. ¬†If you are running a site with multiple users, it may be good to install a plugin that enforces strong passwords.

Here’s some general tips for picking a strong password.

  • Don’t use simple dictionary words (password, 1234, colors, iloveyou, baseball, all made this list of the top passwords of 2012)
  • Don’t use the same password you’ve used elsewhere. ¬†Once your password is cracked on say, yahoo, hackers will often try it on other sites using the same username and password until they get in.
  • Use a mixture of Upper and Lower case Letters, with numbers and symbols – the more the better.

It’s not just your wordpress accounts that are vulnerable. ¬†Create super-strong passwords for your server user accounts, and your database connection as well.

File Permissions

Depending on where your site is hosted, you may, or may not have to worry about this as much.  If you have full root control over your server, make sure your permissions are in order.

Here are the basic linux commands for a quick, basic security blanket over your file permissions.  Read the full article on Hardening WordPress here.

For Directories:

find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} ;

For Files:

find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} ;

.htaccess

There’s a good chance your hosting enviornment is running Apache or Apache2, in which case you’ve probably already changed your permalink settings, which modifies a little file called .htaccess that lives in the root of your web directory.

Take the time to open this file, using nano .htaccess (or sudo nano .htaccess)

There should already be a little bit of code there that looks like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

This is the basic permalink writing code. Make sure you add stuff either before or after this block.

Here’s the stuff you want to add. ¬†The first block prevents anyone from writing to the wp-config.php file – a common intrusion point. ¬†The second block keeps scripts from using rewrite in directories they have no business using.

<files wp-config.php>
order allow,deny
deny from all
</files>

RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ – [F,L]
RewriteRule !^wp-includes/ – [S=3]
RewriteRule ^wp-includes/[^/]+.php$ – [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+.php – [F,L]
RewriteRule ^wp-includes/theme-compat/ – [F,L]

Save your .htaccess file and move on.

Security Through Obscurity

It’s a pretty novel concept, but few people seem to take into account how effective it really is. ¬†Don’t use “Admin” or “Administrator” as your main administrative account. ¬†It can be anything you want. Hackers know most people are going to simple use the recommended “Admin” as the Administrator Username, giving them an edge when it comes to brute-force attacks of your site logon.

When you are first setting up your site, choose a different table prefix for your site to prevent scripts that target the standard “wp_” prefix – make it “4f9A_” ¬†and give them something difficult to figure out.

Core and Plugin Updates

Keeping your site up to date with the latest patches and updates is a no-brainer.  Although it can be an exhausting exercise if you have more than one site to maintain, the latest WordPress Core updates and Plugin Updates contain the best protection against the most current threats.  If you see a message nagging you to update your WordPress core Рtake the 15 seconds to run the update.  It will be worth the hours of time it could possibly take repairing an exploit run on outdated software.

Backup and Recovery Plan

When the shit hits the fan, it’s good to have a plan. ¬†If you watch Doomsday Preppers, you know these people have a solid, executable plan when things get ugly. ¬†The first line of defense if making sure your site is backed up. ¬†The second line is knowing what changes to make when your site has been exploited to make sure it doesn’t happen again. ¬†Start with your database. ¬†Change the actual password to your wordpress database, then work on your user account passwords. ¬†Restore your site and monitor for 24-28 hours to make sure the exploit doesnt happen again.

Most of the time, it’s a brute-force attack on a weak password. Educate your users on keeping strong passwords, and move on.

Monitoring

Pingdom offers a free service to monitor your site from downtime. ¬†It’s a decent front line defense – but realize your typical attack is aimed at causing nearly imperceptible disruption to your site – hijacking links or tricking your users into downloading malware – all without making it obvious your site has been hacked. ¬†Make it a weekly ritual to open up wp-config and a few other files and look for lines like this:

<?php eval(gzinflate(base64_decode(‘

They often occur at the very top of the infected page, and have to be looked at from the server side. Simply viewing the source doesn’t always show any sign of infection.

This particular infection is nasty – it’s code that has been encoded and is decoded only at the time the page is requested, often eluding standard detection techniques.

There you have it – a basic set of rules to keep your wordpress site in check. Threats nowadays are multi-faceted, and no one solution will keep you safe, but deploying as many safeguards as possible will minimize your risk of being hacked.

OCZ Vertex Series 4 SSD Review
jpleakis

OCZ Vertex Series 4 SSD Review

  • By jpleakis
  • November 7, 2012
  • Tech

Solid State Drives are increasing in popularity. ¬†The prices have been steadily dropping, while the capacities get larger and larger. ¬†SSDs are much more expensive than a traditional hard drive per gigabyte, but the performance is well worth the cost. ¬†Even a fairly new computer can benefit from this upgrade if it’s currently using a traditional hard disk.

Read More

Bootcamp: Graphics
jpleakis

Bootcamp: Graphics

Welcome to the first installment of Bootcamp. This series is aimed at covering the basics of web design. In this post I’ll be covering the basics of using graphics – Images, Photos, Pictures, Art – whatever you call them, graphics are arguably one of the most important components of modern web design.

Understanding File Formats

As you’re probably well, there is a wide array of graphic formats. ¬†You’re probably familiar with the most common formats – JPEG, GIF, PNG. Each has a specific purpose and knowing when it’s appropriate to use each one is a fundamental concept any web designer worth their salt should have more than a good grasp on.

  • JPEG – Well known as the industry standard for displaying photography, anything shot with a camera. JPEG is a compressed format – and compressing your images too much can cause artifacts. ¬†I guarantee you’ve seen an image that suffers from too high compression. The result lacks clarity and detail. Be careful with this one.
  • GIF – Stands for Graphics Interchange Format. ¬†This format has been around from basically the dawn of the world wide web. Most people think of Animated GIFs when they think of this format. ¬†GIFs are typically limited to a 256 or less color pallete – meaning there are only 256 (or less) colors available to make up each individual pixel. ¬†The limited color pallete means the file sizes can be relatively small and don’t rely on compression. ¬†The downside is that a photograph saved as a GIF looks terrible. ¬†GIF is typically used for Logos and basic graphics that aren’t photographic, if that makes sense. ¬†GIF also supports transparency – meaning the background can show through the image.
  • PNG – Stands for Portable Network Graphics. ¬†Intended to replace GIFs, it offers sort of the best of both worlds between JPEG and GIF. ¬†The color pallete is 24 or 32-bit, and it supports transparency. ¬†This is a great choice for logos, especially those with alot of colors, that need transparency.

Using the Right Size Graphics

An important part of web design is using the right size graphics at the right time. ¬†If you’ve got a relatively new digital camera, it probably takes photos at 10 megapixels or more. ¬†These gigantic photos are way too big for most web use, and will dramatically slow down your site, because large images take longer to load. Many modern Content Management Systems, like WordPress, do a good job of automatically resizing the images for you as they are uploaded.

Using the right size graphics is a simple matter of efficiency. ¬†If you have a webpage with 20 images, lets say a photo gallery, and you use the photos directly off your camera – they might be 1MB or 1024kb each (or more). ¬†By resizing them to a good standard size for viewing online – lets say 1024×768 – you might be able to get them down to 200kb each, or a total of about 4MB. ¬†So your user downloads 80% less information, and gets basically the same experience. This can be especially important for people still using dial-up (yes they exist).

Determining the right size image to use is not a guessing game, and it’s certainly not rocket science. ¬†If you’re using Google Chrome or Mozilla Firefox as your browser – they have built in “Surveying” tools that allow you to “Inspect” existing pages, to see the sizes, and CSS selectors for existing pages.

In either browser, right click on an existing graphic and choose “Inspect Element” from the dropdown menu. It will launch an inspector pane, where you can see the size of that graphic, and any CSS selectors applied to it.

Usually your best bet is going to be figuring out how wide the element is that contains the image. ¬†Typically a div – both browsers outline the area that the panes are representing. ¬†It’s an amazing useful tool, so just play with it. ¬†Chrome even lets you modify the CSS and affect the page in real-time to see the result, so you can tweak CSS without guessing at the result.

Keeping Things in Perspective: Aspect Ratios

This should be obvious, but you would be surprised at how often this rule is violated. ¬†In Photoshop, and even in HTML and CSS you can explicitly define the height and width of an image. ¬†In photoshop, when you resize an image, you have the option to lock the aspect ratio, meaning that when you resize the image, the height and width are resized at the same rate. If you don’t lock the aspect ratio, your images get that squished effect. If you’re explicitly defining image sizes in CSS, you can explicitly define the height or width, and set the other parameter to “auto” – and your image will be sized correctly based on the image ratio built in to the image.

Optimizing Graphics for the Web (Save for Web as…)

If you’re using Photoshop to manipulate your graphics – and you probably are – learn the difference between “Save…” and “Save for web…”. Launching the “Save for Web as…” option from the file menu gives you a preview of the saved image, as well as a bunch of default settings, that will help you save an image for the web, and optimizing it’s compression and color space.

Depending on the subject of your image – you’ll want to use either JPEG, GIF or PNG – read through the options carefully, use transparency when necessary, and look at the output for christ’s sake. The window shows you exactly how big the resulting image is going to be. ¬†Start at JPEG medium. ¬†If the image looks crummy, bump it up. Look for a good size to quality ratio. ¬†There typically isn’t alot of difference between High and Medium Quality. ¬†If the Medium Quality looks ok, go with it.

 

Don’t: Use Text in your Graphics.

This is a faux pas every green designer makes. ¬†There is a very limited set of fonts that web browsers understand natively, so when you want to use a very specific font, you’re out of luck. ¬†If you want to use fancy fonts on your website – check out Google Fonts. I wont go into Google Fonts in this post, but it’s worth learning. It almost completely overcomes this issue.

So why not use Text in your Graphics? Computers can’t read text in graphics. ¬†Specifically, Search Engine Spiders can’t read text in graphics. Using too many graphics that contain text can really hurt you in the Search Engine Optimization ¬†Arena. The bottom line – Don’t Do it.

Learn CSS and make your backgrounds in photoshop and overlay text using Google Fonts. Your website will thank you for it.

#ProTip: Content Delivery Network (CDN)

Typically, you store your images on the same server as your webpages. ¬†This is a mixed blessing. ¬†It’s simple for you because you can take advantage of relative paths. ¬†This is a disadvantage to you because your users have to download your webpages and images from the same server. ¬†Meaning the webpage downloads, then image 1, then image 2, then image 3, then this jQuery library, then image 4, etc.

There is quite a bit of efficiency to be gained by using a Content Delivery Network (CDN) – namely the fact that your webserver is less taxed by serving up images, CSS files and other libraries needed to run your site. ¬†If you’re not getting much traffic, it may not make much of a difference – but your goal as a designer is to make the web browsing experience as smooth as possible.

In steps the Content Delivery Network.  A CDN acts as sort of a secondary server that only stores your images, css files and javascript libraries.  There are plenty of other files they can host, but these are the typical payload.

How do you get access to a CDN? One way is through the RackSpace Cloud. Alternatively, you can use Amazon Web Services. ¬†I don’t think you need to have a cloud server to access their CDN capabilities, but don’t quote me on that. Once you have access to the CDN, you would upload your files as usual, or use a wordpress plugin, and reference your files on the CDN. The result can be dramatic. For proof, test your site’s current load time on Pingdom Tools, then setup a CDN connection and move your images, CSS and javascript libraries to the CDN and test again. ¬†I know, right?

Ahead of the Curve: Vector Graphics

Rounding out this tutorial, we’re going to talk about Vector Graphics. ¬†Until this point, all the formats we’ve talked about are what’s know as Raster Graphics. Meaning that the image is composed of pixels, or dots. An image that is 200×200 has 200 horizontal pixels and 200 vertical pixels – resulting in 40,000 pixels that make up the image.

Vector graphics are a little bit harder to wrap your head around. They have no true resolution. They look the same at 72DPI as they do at 300DPI. Here’s Why:

Instead of thinking of vector graphics as a set of pixels, think of them as a set of mathematical instructions that determine how the image is built. ¬†Think of the language as something like “Draw a rectangle three times wider than it is tall, the draw a circle that is 5 times taller than the rectangle”. The result is an image that can be infinitely scaled up ro down with no loss of quality. ¬†Obviously there are limitations to this format. ¬†You can’t make a vector image out of a photograph. ¬†The best candidates for this format are simple logos – shapes that can be explicitly defined.

So how do vector graphics fit into the web design world? Think of them as a gold master original of a web graphic. They can be resized later, when you need a larger version of the same graphic that was originally saved for the web.

Good designers create and save their original logo designs in Adobe Illustrator, allowing them to resize them later as needed. Later when you need a larger size, you aren’t compromising resolution when you need to make a larger file. ¬†It’s a difficult concept to wrap your head around, but an invaluable one that will save you massive amounts of time in the future not having to redesign a logo just because you need a larger size.

What’s in a Name?
jpleakis

What’s in a Name?

Your domain name. ¬†It’s often the first thing you secure when starting a new project. ¬†It’s the core of your identity – Your Brand. ¬†There is a multitude of considerations you must parse though when buying a domain. ¬†Think of it as a checklist, and just about any missing check can be a dealbreaker.

Multi-Platform Availability

This is typically the easy first litmus test to check out when you’ve picked what you think is a good domain. Is the same name available on major social networks or other sites or services you intend to utilize? It makes it easier on your audience if jumplittlepixel.com can be found at twitter.com/jumplittlepixel and facebook.com/jumplittlepixel (yes I know – I never secured this one.) ¬†and @jumplittlepixel on instagram.

That sort of solid, consistent branding makes it easy to find me wherever you go. If I was jump_littlepixel on twitter, and jump-little-pxl on instagram, there is a broken continuity there.

SEO

The words that make up your domain have some weight on your SEO value.  Much of my site has to do with web design and development. The world pixel is often used on sites that feature that sort of content, so having it in my domain name helps.  Having the words web and design in there would probably help even more, but the choice to go for jumplittlepixel.com was trumped by the next two points.

Mnemonics

Having an easy to remember domain name is often key, especially if you’re doing billboard or poster advertising where the user is required to remember your website. Lets say you own business that sell high-pressure hydraulic hoses. ¬†Let’s say you really struck it rich and your name is Hector. You could go the safe route and buy HectorsHighPressureHydraulicHoses.com – or you could go for something shorter and to the point, like HectorsHydraulics.com

Cool Factor

Having a domain that sounds hip or interesting is never a bad idea. Look at services like spotify.com and digg.com – their names just sort of ooze web 2.0 goodness. ¬†Does anything about spotify tell you that it’s a streaming music service? No, it just sounds cool, and so it gets a pass. ¬†Cool domains can really help if you plan to build your site’s following in the social space – just make sure those usernames are available on said social sites.

The Shorter the Better

Nobody likes to type more than they have to. The dawn of texting has quickly acclimated just about everyone to shortened versions of words, and like in my mnemonics example above Рhectorshydraulics.com is shorter to type than the alternative, but even better still would be something like hectorshoses.com Рespecially if you plan on doing traditional advertising.

Plurality and Other Top Level Domains

Ok, so you’ve picked out the perfect dot com. Depending on the intent of your domain, you may want to secure other top level domains of the same name, so that others can’t buy the .net of your domain and ride your coattails to glory. You may also consider at this time buying pluralized versions of your site, or if there is a common misspelling of your site because of consecutive letters (think superrad.com and superad.com)

Don’t: Subdomains

Subdomains seem like an intuitive way to break up sections of your site – and to the average humanoid, they are, but jumplittlepixel.com, blog.jumplittlepixel.com and code.jumplittlepixel.com are seen by el goog as three different sites that have nothing to do with each other, and so you lose that synergy of combining those pages and having a site with what google sees as more valuable content.

Don’t: Dashes and Characters.

The logic here is that it’s extra work for the person to input the dashes or characters, especially if they’re on a mobile device or tablet. Increasingly, this is going to be more and more important, as mobile and tablet device useage skyrocket.

Final Thoughts

10 years ago, simply coming up with a great dot com was all you needed to succeed – but the game has certainly changed. Things that didn’t matter before, now make all the difference in the world. ¬†If any there is a time to sweat the details, this is it.

If you’re wondering where to register your brand spanking new domain name, you may be well aware of the issues GoDaddy experienced on September 10th which caused their DNS servers to become unresponsive for several hours. ¬†Simply registering your domain somewhere doesn’t mean you have to use their DNS servers.

I’ve been purchasing all my domains recently at NameCheap.com – as the name implies, it’s a cheap domain registrar. ¬†Most dot com’s run about $11/year and they give you free private registration for a year – and their user interface is dead simple and support is there when you need it.

 

Google Analytics Accounts Explained
jpleakis

Google Analytics Accounts Explained

If you manage more than a few sites – and specifically if you manage sites for others – and you’re using Google Analytics, you’re bound to run into this issue sooner or later. ¬†Unfortunately if you’ve setup your accounts the wrong way, Google won’t have a shoulder for you to cry on if you need to move some properties around.

“Google” Accounts vs “Analytics” Accounts

[quote align=”right” color=”#999999″]”Analytics” Accounts are not “Google” Accounts. Think of them as baskets or buckets, that hold “Properties” or websites.[/quote]

The first concept to get a big firm grasp on is how your “Google” Account is related to your “Analytics” Accounts. Your “Google” Account is typically your email, that you use to sign into all of Google’s services, in my case – jpleakis@gmail.com.

In order to use Google Analytics, you must have a “Google” Account, which will be attributed with your one ore many “Analytics” Accounts.

You can have many “Analytics” Account Baskets tied to your account. For example, lets just say I have a few “Analytics” Accounts baskets with a few properties each in them.

¬†”JUMPLITTLEPIXEL” (Account)

  • jumplittlepixelphotography.com (Property)
  • jumplittlepixel.com (Property)

 

“Trevor’s Websites” (Account)

  • trevorsawesomesite.com (Property)
  • trevorsotherawesomesite.com (Property)
  • yetanotherawesomesitebytrevor.com (Property)

 

“City of Greenwood Sites” (Account)

  • cityofgreenwoodsc.com (Property)
  • greenwoodchamberofcommerce.org (Property)
  • uptowngreenwood.com (Property)

 

So now, my jpleakis@gmail.com “Google” Account has three “Analytics” accounts in it, each of which have a few sites that belong to that “Analytics” Account.

Sharing “Analytics” Accounts

Let’s say I get an email from barney at the city of greenwood, and he asks to have access to the analytics account for his site. ¬†You’ve got two options:

  • Make Barney a “User” of a property
  • Make Barney an “Administrator” of the “Analytics” Account.

 

If you make Barney a “User” of a property – he can only see the data related to an individual property on the account and cannot share it with anyone.

If you make Barney an “Administrator” of the “City of Greenwood Sites” account – he can see not only the data for the cityofgreenwoodsc.com Property, but the other two properties listed in that account. He cannot see the data for the other “Analytics” Account Buckets (JUMPLITTLEPIXEL or Trevor’s Websites). ¬†He can also remove me as an Administrator (something to keep in mind, but obviously if you trust him to Administer the account, you have to be able to trust him not to delete you)

Administrators have full access to all account profiles.

When adding an Administrator to an account, these ominous words are what scare off many Administrators from granting Administrator access. ¬†They think that this means by making someone an admin on “City of Greenwood” Account, that they will have acccess to the “Trevor’s Websites” and “JUMPLITTLEPIXEL” accounts. ¬†This is simply not true.

Final Thoughts

If you’re going to be managing sites for others, its best to create an account for each person’s set of sites, that way you can easily grant them access, without granting them access to your other clients sites. ¬†If you can deal with the mess, it may even be safest to create an Account for each individual site you’re going to be managing, that way they can be easily shared on a site by site basis if need be.

Look Ma, No Hands – BOA’s Tap & Pay
jpleakis

Look Ma, No Hands – BOA’s Tap & Pay

  • By jpleakis
  • December 31, 2011
  • Tech

Tap & Pay Device

Bank of America now offers a Contactless Payment device called Tap & Pay aimed at mobile device users. ¬†The “Device” is really just an RFID chip – like those found in other smart cards, that allows you to make purchases without physically swiping a card through a terminal. ¬†The device is smaller – about 1″ x 2″ – basically the same size as the mini companion cards Bank of America customers may be accustomed to. ¬†How well does it work? Read on past the break to find out.

Read More

Simple, Cheap Digital Signage
jpleakis

Simple, Cheap Digital Signage

Digital Signage Display

With the Holiday’s Just around the corner, large televisions are plentiful, and available on the cheap. ¬†I’ve seen 32″ Models going for as little as $149 and 42″ models going for as little as $199. ¬†Pair it up with an old computer – in my case, an old mac mini – and you’ve got yourself the basic ingredients for a powerful networked digital display for probably less than you’d spend on a couple color vinyl banners or full-color posters.

Read More