About Mike Spencer

I've been working for Algonquin Studios since 2007. As part of the Web Team, I share responsibilities designing, coding, and managing QuantumCMS web sites and other web projects. I focus on creating usable and effective web sites, coded to the industry's highest standards.

10 Things I Learned about Ext JS After 1 Week

I recently had the opportunity to work on a project for a new web application on the Ext JS framework. I am a front-end developer (“UX Engineer” by title) so my background is primarily in HTML, CSS, and JavaScript. As such, my responsibility on this project was to implement the user interface design, which had previously been conceptualized in Abode Photoshop.

Starting off, I did have some understanding of the basic concepts, but almost no practical experience. A co-worker helped me install the necessary bits and get the project up and running. I completed my work in Aptana Studio 3, primarily because it provided an easy way to compile and run the project.

I worked on the project for about 5 days, which was just enough time to get a crash course in Ext JS and complete the tasks assigned to me. During the frenzy that ensued, I learned several things about the Ext JS framework that I felt were worth sharing.

  1. Ext JS takes a very modular view of, well, everything. Instead of working in a few massive documents, I found myself working in several small documents. In some ways, this was nice because the documents were easy to scan through and work with, but it also meant that I usually had a lot of documents open in Aptana. I had to develop a system for ordering the tabs so I could easily find the one I needed.
  2. Ext JS projects come with a pre-built interface that includes dozens of UI components that can be utilized at will. There are several themes to chose from that allow developers to create projects with little-to-no CSS required.
  3. If you need to implement a custom interface, it seems that creating a new theme is the best approach. Ext JS has a theming guide that provides a pretty good overview of how to set up a new theme.

  4. Even custom themes need to start with a base theme. This provides a basic set of styles for all of the UI components included in the project. The “ext-theme-base” includes the least amount of inherent styles and should be the easiest to override.
  5. Ext JS utilizes SASS, which allows you to use variables, math operators, and other functionality not available in regular CSS. This was also my first real foray with SASS, but I was already familiar with the core concepts. Although I looked to make use of the various benefits that SASS offers, I was working on a very small project and I found that I only feature I needed was variables. Unfortunately, in this case, I don’t think the 10 or so variables offset the extra overhead that came with compiling the project every time I needed to check my styles in a browser.
  6. Even the CSS is modularized in Ext JS. Ext JS has a separate SCSS file for each UI component (which I didn’t touch) and I had a separate SCSS file for each custom view. That provides some organizational benefit, but, in the end, Ext JS compiles all of them into one file when the project is built, which nullifies any speed optimization benefits that separating the code may have also provided. It also means that you need to have a good understanding of how the final CSS file will be compiled or your style updates may get overridden by other code that is inserted later in the document.
  7. Ext JS allows you to create a “universal” style sheet in your theme that will be included on all views of your application. Under /packages/{your-theme}/sass/etc create a file name “all.scss.” I used this file to hold the base styles for my application as well as my SASS variables and then had view-specific styles in separate files.
  8. Although Ext JS does allow you to create custom themes and override most default styles, there are still many instances where inline styles are inserted. In those cases, I found that I usually needed to apply the !important CSS snippet in my file.
  9. The generated HTML in Ext JS 4.x is massively bloated. Although there are ways to insert your own HTML, most of the time, I worked with Ext’s UI components. A simple button generated by Ext might include like 10 nested HTML elements. I believe that the main reason for this is that the default themes still support IE6 and they need a lot of elements to pull off gradients, borders, etc. in exactitude in all browsers. This might be my least favorite thing about Ext JS, because it creates a lot of unnecessary overhead for the browser and makes navigating the DOM through Chrome’s Dev Tools (or a similar tool) an essential step in styling anything.
  10. Ext JS has pretty good documentation. I found it to be a little cryptic until I had worked with the framework for a little while, but then it was quite helpful. However, if you do have a question that the document doesn’t answer, I found that there are not a lot of other resources available. Even stackoverflow is short on answers. I’m told, however, that the Sencha forum is quite good in a pinch, but I have yet to try that route.

By the end of the week, I felt pretty comfortable working with Ext JS. There was a bit of a learning curve, but, between my helpful co-workers and Ext’s documentation, I was able to overcome most issues with little trouble.

After a week of total immersion, I don’t feel like I can fully endorse Ext JS. I can see how it would be a good tool for development teams that don’t have any front-end developers, but it certainly didn’t make my tasks any easier. In general, I prefer to work with lightweight frameworks that provide more control over the HTML and CSS.

What has your experience with Ext JS been like?

Advertisements

Styling Tabular Data with CSS3

In my career as a web developer, I’ve helped build many web applications that require the display of tabular data in a clean and simple fashion. Over time, I’ve developed a few techniques for doing so that are effective and easy to implement.

But before I go into that, let me quickly remind my fellow web developers that tables are not, in fact, the enemy. Although the days of using tables for layout are long past, tables are still a perfectly appropriate method for displaying tabular data on the web.

However, I must also acknowledge that there are some disadvantages to working with tables to be aware of, including:

  1. Tables don’t always scale down well and may display poorly when space is limited, like on mobile devices. If your primary audience is viewing your web site on mobile devices, it may be better to use lists or other markup that’s better suited for vertical display.
  2. Tables are not as adaptable as other elements, especially in older versions of Internet Explorer, and that can limit your options when developing a responsive web site.
  3. Display tends to vary slightly across different browsers. This is particularly true with column widths. I’ve encountered many situations where the text in one column wraps to two lines while there is clearly ample space to accommodate for it in another cell. There are ways to get around that of course, but the solution is generally specific to the situation.

So after much preamble, here are four simple examples that I’ve created to demonstrate different ways you can work with tables to display data cleanly:

  1. Basic Grid with Alternating Row Colors
  2. Basic Grid with Alternating Row and Column Colors
  3. Basic Grid with Rounded Corners
  4. Simplified Grid with Generated Content

Optimizing Site Speed

Talking about site speed today almost seems superfluous, with so many users accessing the web with powerful Internet connections and download capabilities. Most desktop users access the web via cable or fiber optic lines, brandishing download capacities of 15 megabits per second (Mbps) or greater. Although many users will often access those same Internet services via wireless signal, the rapid spread of 4G networks has brought similar download speeds to mobile devices even when they aren’t connected to WiFi.

Despite all that, there are still some desktop users that access the web using DSL or dial-up connections and many mobile users that are restricted to less powerful networks.

But, regardless of all the latest technologies, there will always be some subset of users that hit your web site with poor Internet connections. In addition, many mobile users are limited to how much they can download over their provider’s data network. Personally, I’m limited to 2 gigabytes of data usage per month, excluding any data transferred over WiFi.

That means that when we build and maintain web sites, we need to be cognizant of users’ technology capabilities, as well as their limitations, and plan accordingly.

Understanding Your Users

The first step towards building an optimized web site is simply getting to know your users. Getting a basic idea of user demographics such as age, income, and location will allow you to make some general assessments about how they are accessing your site.

I recommend utilizing Google Analytics to help verify (or nullify) any assessments that you have made about your users. There are several “Audience” reports that will help you gain some insight.

  1. Demographics > Location – Shows where your users are located geographically.
  2. Technology > Browser –  Shows what browsers your users are accessing the site with. I like to check this prior to development to help determine what browsers need to be supported for the site.
  3. Technology > Network – Shows what Internet networks are being used to access your web site. This may give you some idea about your users’ download capabilities.
  4. Mobile > Overview – Shows a basic breakdown of your total desktop, mobile, and tablet users.

Google Analytics doesn’t collect enough information to paint a detailed picture, but these reports, combined with your own experiences, should give you a pretty good idea of what to expect.

Once you understand your users, you can then determine which optimization practices are necessary for your site.

Optimization Basics

Here are some easy techniques that I recommend for all sites, regardless of user technology.

  1. Minify CSS and JavaScript files. This will remove all unnecessary spaces from your files and reduce their size. I prefer cssminifier.com.
  2. Combine CSS files to reduce HTTP requests. Previously, I would keep my screen, mobile, and print styles in separate files, but I have begun combining them into a single file to reduce the number of requests the browser has to process.
  3. Create image sprites. Likewise, you can reduce requests by creating a single image with all of your design files. High traffic web sites like Amazon.com use this technique frequently, but I find it to be a bit cumbersome and avoid it unless I feel it’s necessary.
  4. Scale down and optimize images for the web. I recently noticed a client site was loading slowly and discovered that three of the photos on the home page totaled over 12 mb. By simply scaling those images down to dimensions that fit their container, I was able to reduce the page weight to well under 1 mb.
  5. Optimize PNGs. Photoshop is notorious for creating bloated PNGs. There are many services that you can use to reduce the bloat and overall file size. I like TinyPNG.
  6. Only reference the files that you really need. If you are only using JavaScript on the home page, only call the file on the home page. There’s no need to impact the loading of other pages if they never use the file.
  7. If you are using jQuery or another popular code library, consider referencing Google’s hosted copy. Since many other sites do the same, users may already have the file cached in their browsers, which will save loading time.
  8. Many JavaScript libraries such as Modernizr allow you to customize what code is included in the file that you create. Only download the functionality that you really need.

Most of these steps are simple and can easily be implemented on any web site without impacting quality or deadlines. Doing these things will reduce page weight, decrease loading time, and ultimately improve user experience.

There are many other things that you can do to help reduce page weight and decrease load time, but you’ll need to decide what techniques are right for you and your site. In many cases, the basics may be fine, but in others, every kilobyte may be important.

To learn more about page weight optimization, I recommend reviewing the Network and Audits features within Google Chrome’s Developer Tools. I also really like the Pingdom Tools website speed test. Both of these will break down how long it takes each resource to load and provide suggestions for optimizing your site.

What’s New in QuantumCMS 5?

Over the past few years, my role at Algonquin Studios has expanded to include the front-end development of QuantumCMS, our in-house content management system. In that time, QuantumCMS has changed a lot. We’ve crushed bugs, added new features, and enhanced the user interface

The release of QuantumCMS 5 is slated for May 1, 2013 and I’m really excited about this version. Not only have we redesigned the interface, but we’ve also added new features, vastly improved some existing features, and upgraded the code under the hood.

Here’s a look at some of things that you can expect in QuantumCMS 5:

New Interface

We’ve given the interface a clean and fresh look that’s easy on the eyes, but the layout is largely the same as previous versions, so you won’t have to hunt around for anything.

Dashboard

dashboard

Edit Page

page

Site Tree

We’ve built a new site tree control from the ground up. In addition to new icons and styles, the tree now includes drag-and-drop page moving and sorting in all supported browsers. We also added a feature to indicate when a page has drafts. In such cases, a small pencil is displayed over the page type icon.

tree

File Manager

This release will introduce a brand new file manager. The file manager is no longer available as a tab in the left pane, but now opens in a new window so you have more room to work. The new file manager supports drag-and-drop for moving files and includes basic image editing features like resize, crop, and rotate. In modern browsers, you can even drag files from your computer into the window to quickly upload them to the server. And yes, I said files! With the new file manager, you can upload multiple files simultaneously.

files

Sections

We’ve added a set of new screens that can be used to help define business rules and manage content that is specific to an area of the site. A section is simply a page and all underlying pages. In QuantumCMS, you can define any page as the root of a section and apply custom content like Linked Pages and Properties that will appear on all pages within that section of the site.

Although there are many potential uses, we believe that this will be particularly helpful for sites with multilingual content, mini-sites, or both. Making use of this feature requires some template updates, because the functionality must be coded to match the site’s business rules.

sections

Linked Page Images

We noticed that a lot of web sites associate images with their links so we’ve attempted to make that easier by adding a Link Image file picker to the Linked Pages screen. Much like Sections, the Linked Pages feature is implemented uniquely for each web site so template updates are necessary to make use of this feature.

linkedpages

Open Pages in New Window

You may have noticed that there is now a check box on each page that is labeled, “Open in a new window.” By checking that box, all links to that page in the navigation, search results, and site map will open in a new window automatically.

Site Speed

I’ve saved perhaps the best for last. In QuantumCMS 5, we’ve made a bunch of code updates to streamline the page rendering process. That ultimately means that sites on this version will load faster. Additionally, we believe our new Sections feature will further this for those clients that make use of it. We’ve made major strides to accomplish this and we believe that it will pay dividends for our clients as well.

I hope that you enjoyed getting a sneak peak at our upcoming release. Please feel free to share your feedback!

Blogging For Business, Part 2: Choosing the Right Platform

In my previous post, I wrote about whether corporate blogging is right for your business and broke down the benefits and risks. In this post, I’ll take a look at some of the available platforms.

Simply put, there are a lot to choose from, but all platforms should provide two basic features:

  1. the ability to post content (usually including photos and videos)
  2. the ability to receive and display comments for each post

Those are the basic cornerstones of blogging. However, many platforms (certainly the best) provide additional features that may prove essential for your blog, including:

  1. the ability to customize the look of the blog or choose from a set of themes
  2. the ability to add extra features through plugins (widgets built by third party developers that can be embedded on your blog)
  3. the ability to allow content to be posted by multiple authors
  4. the ability to audit content written by other authors
  5. the ability to moderate comments

There are a slew of platforms that offer these features and many more, and they do it for free. In fact, because there are so many quality platforms to choose from that at Algonquin Studios we’ve actually decided not to implement blogging features into our content management solution, QuantumCMS, thus far, and simply work with clients to pick the best platform for them and integrate the blog with the main site as needed.

So, without further ado, let’s look at some of the best options out there.

WordPress

WordPress is a free blogging platform that offers a ton of built-in features, including all of those I mentioned above. I don’t have the statistics for it, but if WordPress isn’t the #1 blogging platform today, it seems to be on its way. Indeed, this blog as well as my personal blog are built on WordPress and it’s generally my preferred choice, but that doesn’t mean it’s right for everyone.

The reason that I like WordPress in particular is because it has a simple yet rich interface and is constantly updated with bug fixes and enhancements by a dedicated team of developers. They also offer two hosting solutions: you can host your blog with WordPress for free or you can download the codebase and host it on your own server if you need extra flexibility or want to integrate with other sites.

Blogger

Blogger is Google’s blogging platform. Right there, you probably already know what to expect. Recently, Google has taken steps to standardize the interfaces of its most common tools including Mail, Drive, and Blogger. That means if you have used any of Google’s other products, then Blogger should feel pretty comfortable to you.

What I like about Blogger is its simplicity and clean interface. It’s a tool designed for the non-technical user so it’s very easy to use. Despite that, Blogger is a fully featured tool, although it does not have quite as many configuration options as WordPress.

Tumblr

Tumblr is a what I would call a “quick and dirty” blogging platform, but what most people call “social blogging.” Tumblr makes it really easy to share the awesome stuff that you find online or in life. Tumblr blogs are often full of photos, videos, and links. In some ways, it’s more like Twitter than it’s like other blogging platforms, although there’s no limit to what you post.

What I like about Tumblr is just how easy it is to share content. However, I’ve found that the interface is not as intuitive or robust as other platforms. It’s also worth noting that Tumbr blogs tend embody a more casual attitude that is perhaps more appropriate for individuals than most corporate businesses, but if you just want to post photos, videos, and other neat stuff, it’s probably the best fit.

Posterous Spaces

This is another popular solution that I’ve not personally used, but is described as somewhere between WordPress and Tumblr. Like Tumblr, Posterous tries to make posting content really simple (even via email), but has more advanced features like WordPress.

Twitter

Okay, Twitter isn’t truly blogging software, but it is considered “micro blogging.” If the idea of writing content gives you pause, you might consider starting with a Twitter feed, where you never have to write more than 140 characters.

Bringing It All Together

If you decide that you’re up for the challenge, don’t just pick a platform and go. Check out some of the available options first. Take a look at example blogs on each platform and the available features. With just a little legwork, you’ll find one that works for you and you’ll be blogging in no time.

Blogging For Business, Part 1: Is Blogging Right For You?

Over the last few years, I’ve been asked many times by clients about blogging. Blogging is nothing new, of course, but starting a corporate blog is a bit different than starting a personal one.

A corporate blog requires planning, writing guidelines, and, often, an approval process. It also requires some degree of skill and dedication. Can you write meaningful content that engages readers? Can you keep to a schedule and post content even when you are busy and have other priorities?

Benefits

If you can keep up a blog, then you may be rewarded for your efforts. The most obvious benefit is increased awareness of your business and traffic to your web site, which could translate into increased sales or revenue.

Without getting too technical, having a blog and posting meaningful content gives you another way to draw users to your web site. In all likelihood, that user will read your content and never return. That’s part of the nature of blogging. However, if that user finds your blog in a web search and finds the content to be helpful, he may then visit your web site and, potentially, engage your services, buy your products, or refer a friend or colleague to your site.

Having a blog may even elevate the search ranking of your main web site. By cross-linking the main site and your blog, you can potentially build clout in search engine ranking algorithms, especially if your blog generates a lot of traffic.

Risks and Pitfalls

Before jumping in, you should also consider potential risks. What if an author writes something that makes the business look bad? What if a post incites negative comments? Negative feedback could turn away potential customers, degrade your credibility, or even drop your search ranking, but that doesn’t mean you should disable the commenting feature. Instead, you’ll have to determine the appropriate solution for your business.

You should also avoid a classic pitfall: the temptation to use your corporate blog as an extension of the sales department. Users typically stumble upon blog posts when looking for information and overselling your services may turn off users from returning or make them question the credibility of the content.

Tips for Success

In most cases, a corporate blog should provide expert information or advice about topics in the respective field, or provide customers an inside look at a business’ work environment or philosophies.

Don’t put that all on one person’s shoulders. Allowing multiple employees to contribute will lessen the load and will fill your blog with a variety of topics and opinions.

Keep a schedule. Your employees are busy and it may be difficult for them to contribute regularly. Set up a schedule that allows them to contribute as possible, based on workload.

Bringing It All Together

Ultimately, as a business owner or marketer you have to weigh the pros and cons to determine whether a corporate blog is right for you.

Keeping up a blog isn’t easy. You need to be dedicated and willing to write content, often. You also have to be prepared to accept the risks. But, done well, a blog can boost your business and your reputation in the field.

Modern Browsing

If you’re reading this article, then chances are that you’re sitting at your desk using a web browser. Sure, you might be using a tablet, phone, or some other device, but in this blog post, I’m going to focus on desktop browsing.

There are several very good desktop browsers that you may be using right now, or maybe not. Take a moment, locate the “About” option (usually under the “Tools” menu) in your browser, and take a look at what it says.

If you are using the latest version of Google Chrome, Firefox, or Opera, hurray for you! You have made a conscious choice to download and use an alternative browser, a browser that most likely did not come installed on your computer. Maybe you’ve even set that browser as your default.

Now, if you, like many users, are accessing the web in Internet Explorer, that’s not necessarily a bad thing, especially if you’re using Internet Explorer 9 (very soon to be IE 10). However, if you are using IE 6, 7, or 8, you’re really not experiencing the web to its fullest.

Recent browsers, including Chrome, Firefox, Opera, Safari, and IE9, have very good support for emerging technologies like CSS3 and HTML5, that are already being adopted by many web developers to present web content in new and exciting ways. But there’s more to it than just that. Here’s a quick breakdown of some of the benefits you get from a modern browser:

  1. Speed: Modern browsers generally have more powerful rendering engines that handle JavaScript and other technologies better than older browsers. This means that web sites load faster and more efficiently.
  2. Security: Although modern browsers can be subject to security flaws, they’re generally far more secure than their predecessors.
  3. Support: Over time, support for older browsers will continue to diminish. Already, many leading sites like YouTube and Facebook have dropped support for IE 6 and many other sites serve up limited functionality and visuals to older browsers.
  4. More space: Modern browsers generally have less “chrome” and maximize your working space.
  5. Features: Over time, browser developers continue to optimize and expand their products. Modern browsers have some really wonderful and convenient features that serve a variety purposes and enhance user experience.

There are a lot of great features that modern browsers have started to adopt across the board and there’s no way that I can mention them all, but here are some highlights.

  1. Tabbed browsing: If you are still using IE6, you’re missing out on a major convenience that has been otherwise available for many years.
  2. Searching: Many browsers have a dedicated search box next to the address bar for running quick web searches. You can usually adjust the box to use your favorite search engine if the default is not to your liking. In addition, if you type a keyword into the address bar and it doesn’t match a site URL, then the browser will run a web search instead. Chrome has taken this a step farther and has eliminated the separate search field entirely.
  3. Add-ons: Browser developers have opened their doors to the community and allow other developers to create small pieces of software that add onto your browser. These are usually used to complete a discreet function like taking a screen shot of the current web page, but there are add-ons for all sorts of things like news, weather, and music, as well as number of great tools for web developers. In my experience, Firefox and Chrome have the most and highest quality add-ons.
  4. Syncing: Many browsers, including Chrome, Firefox, and Opera, allow you to sign in to your browser and synchronize bookmarks, add-ons, and other data between all of your computers and devices. This is perfect for when you stumble across something at work that you want to check out later, at home. You can create a bookmark at work and it will be right there in your toolbar when you load up the browser at home.

If you’re running an older browser and it’s in your power to upgrade or download an alternative browser, I highly recommend that you do so. At this point, you may be wondering what browser you should download. Truly, there’s no correct answer because it’s a really a matter of preference, but here’s a quick breakdown of the most common options:

  • Google Chrome: Chrome is fast, secure, has tons of add-ons, and, not surprisingly, tends to work really well with Google products like Gmail. Chrome is the default browser on my machine. Available for Windows and Mac.
  • Firefox: Firefox has recently lost some of its market share to Chrome, but is still a solid browser in many ways. It may not be quite as fast or secure, but still boasts a solid feature set and a massive amount of add-ons. Available for Windows and Mac.
  • Internet Explorer: Although Internet Explorer 10 will be coming out shortly, IE 9 is fast and secure, but lacks the add-ons of Firefox and Chrome. IE 9 is the first version that has included support for CSS3 and other emerging technologies and is definitely a large step towards bringing IE up to current web standards. Available for Windows Vista and higher.
  • Safari: Safari and Chrome are built on the same rendering engine and have many of the same features, although, in my experience, Chrome runs more quickly and is far superior in the add-on department. Safari seems to have dropped support for Windows as of version 5.1.7, so I would only recommend it for Mac users.
  • Opera: Like Chrome, Opera is fast, secure, and has add-ons, though perhaps not so many as Chrome. Opera is also a leader in the web standards community and is constantly innovating new ways to experience the web. Available for Windows and Mac.

If you made it through this whole post without downloading a new browser, do yourself a favor and test drive one of the browsers listed above. You won’t regret it.

Designing With User Technologies In Mind

When building, redesigning, or maintaining a web site or web application, it’s important to understand the technology visitors will use to access the site to create the best user experience possible.

So what do you need to consider? Although there can be many factors at play, here are the key questions you should answer:

  1. What browsers are used to view the site?
  2. What devices are used to access the site?
  3. What screen resolutions are commonly used by site visitors?

Browsers

Most of us web developers have a tendency to get pretty excited about using new coding techniques and technologies like CSS3 and HTML5, but it’s important for us to consider what browsers the site visitors will be using so we can determine whether those techniques are appropriate or not.

If you find that your user base primarily views the site in recent browsers, then you may have more flexibility with new technologies. However, if you find that a significant portion of users are accessing the site in older browsers, you’ll need to make sure that they can complete all functions without any major drawbacks.

That doesn’t mean that the site has to look identical in all browsers however. Many web developers commonly employ a technique called progressive enhancement. This coding technique allows for users in recent browsers to see the site design as intended (with enhanced design elements) without negatively impacting the experience of users in older browsers in a significant way. Enhancements might include design elements like rounded corners, gradients, or drop shadows.

There are many desktop browsers that support progressive enhancement techniques including Google Chrome, Firefox, Safari, Internet Explorer 9, and Opera. Internet Explorer 8 and lower usually do not get the benefits of such enhancements.

Most mobile browsers tend to have good support for progressive enhancement techniques as well, including the default Android browser, Safari, Google Chrome, Amazon Silk, Opera Mobile/Mini, and many others.

Devices

Understanding what devices your visitors are using will help you engage with them more effectively. There are many devices that allow people to hit the web in addition to computers, including tablets, phones, and gaming consoles. Most computer users access the web in a similar way, with a keyboard and mouse, but don’t forget that there are some users who rely on screen readers to recite the content of the page to them and who navigate by keyboard only.

Tablets and phones are “tap” devices, meaning that users interact with web sites using their fingers. For these devices, it’s typically helpful to create larger tap radii for links and to avoid displaying critical content on mouseover or via right-click.

Because there are many different ways to access a web site, it’s important to design and develop with accessibility in mind. You should always aim to make your site accessible for your target audience and their expected browsing devices, but not at the expense of impaired users.

Screen Resolution

With users accessing the web on phones, tablets, PCs, laptops, TVs, and a seemingly endless number of devices that come in all shapes and sizes, there is, likewise, a seemingly endless number of screen resolutions that you must consider while developing a site.

PCs and laptops tend to have resolutions equal to or greater than 1024 x 768 pixels, although you may still see a few users running at 800 x 600 pixels. 1024, though possibly the lowest desktop resolution that you’ll need to really consider, is still rather popular and has held a significant portion of the market share for many years. You should, in most cases, consider that to be your base and confirm that your site is usable at those dimensions.

Phones, tablets, and netbooks bear further consideration. If your user base includes a number of mobile users, you may be able to improve usability significantly by applying a different layout or styles optimized for smaller sized screens. CSS3, widely supported by recent mobile browsers, offers an elegant solution of applying different styles at different browser sizes and is often the preferred approach.

Bringing It All Together

Understanding how users experience your site or application will allow you to serve them better and, ultimately, improve overall customer satisfaction. The easiest way to gather data on browsers, devices, and screen resolutions is via Google Analytics, which offers reports for all three. I highly recommend that you review these reports to get a better understanding of your users, especially if you are considering a redesign for your current web site and to close it out, here are some nifty screen shots of those reports:

Browsers:

Devices:

Screen Resolution:

Getting Started with Google Analytics

Google Analytics is an incredibly powerful asset for marketers, site administrators, and business owners, but with a seemingly infinite quantity of data points, graphs, segments, and reports, it can be completely overwhelming.

At Algonquin Studios, we encourage all of our clients to sign up for Google Analytics because of its many benefits and because it’s free–it really is a no-brainer–but that’s just the first step. Once you’ve signed up, then what?

Step 1: Understand Your Web Site

In order to use Google Analytics successfully, you need answer one big, general question about your web site:

What is the purpose of your web site? Why does it exist?

At this point, there’s nearly universal agreement that if you run a business, program, charitable organization, or pretty much anything else, you need a web site. But why? Are you hoping to sell products, promote to a larger audience, or just make it easier for people to find your phone number? There could be any number of reasons and you may have many, but, in order to get the most out of Analytics, you need to understand what they are.

It’s also useful to identify your target audience. What group of individuals are you hoping will access your web site? Doctors, grandmothers, hockey players, men in general? Try to be as specific as possible.

Step 2: Identify Your Goals

Let’s say that you’re a partner at a law firm and you’ve identified that the main purposes of your site are generating leads and reinforcing your firm’s reputation. From there, you can identify the following goals:

  1. Build interest by providing information about services and related content.
  2. Capture leads (via email or phone).
  3. Reinforce qualifications through firm history and accomplishments.

Step 3: Pick Your Measurement Tools

At this point, you can determine the data points and reports in Google Analytics that will help you measure the success of your site. These are often referred to as Key Performance Indicators or KPI. For example, here are some indicators that could be useful to your sample law firm:

Time on Site/Page – Since many of your goals are related to your site visitors reading content, you can examine how much time they’re are spending on your site and its individual pages to determine if they’re actively engaging with that content. It will be especially important to review the time spent on the pages you’ve deemed most crucial to your goals of building interest, capturing leads, and reinforcing your qualifications.

Bounce Rate – Another indicator that will show whether users are actively viewing pages and continuing to interact with your site is Bounce Rate. Your bounce rate is the percentage of visits that only include one page view. A low bounce rate indicates that your visitors are viewing several pages before exiting and implies that they are interested in your content and and engaging with it in a meaningful way.

Visitor Loyalty – If your law firm is attempting to reinforce its qualifications, you may expect to see a high percentage of return visitors. Strong visitor loyalty implies that your content is engaging and can help strengthen your position as a trusted resource. However, a high percentage of new visitors implies that a lot of potential clients are viewing your site. In general, it’s healthy to have a mix of each visitor type.

Keywords – The Keywords report identifies the search terms that drove users to your site from Google or other search engines. While returning visitors will probably access your site directly or search for your firm name, new visitors may be searching for services that you provide or for a firm in your geographic location. If you’re not seeing the results you expect, this indicator may show that you need to adjust your content to include better search terms.

Location – Geography-based reports and segments allow you to see where your users are located. This can be particularly important if you are targeting users from a specific area and may even influence your traditional marketing initiatives.

Step 4: Set Targets

Once you’ve determined which indicators will most accurately help you to measure success, you should set appropriate targets for each goal. These targets may be for a day, week, month, or longer, or they may even be for a specific time of the day.

Determining what your targets should be may not be easy at first, but you’ll get a feel for it over time. The key is to have a  goal number to work towards and compare against. The actual numbers are less important than the trends you’re seeing in the data.

Step 5: Identify Segments

If you want to take it a step further, try identifying any segments that could be applied to make certain reports more valuable. For example, you could segment the Landing Pages report by Keyword to see the keywords that are driving users to your top entrance pages.

Step 6: Review Your Data Regularly

There are many ways that you can utilize Google Analytics to measure your data. You can set up Goals, Alerts, Custom Reports, Advanced Segments, or Filters. You can even create reports that are automatically emailed to you on a regular basis. Or you can simply log into Google Analytics and review the default reports, focusing on the KPI that you’ve determined are important.

The key is reviewing your data on a regular basis. You can evaluate the success of your goals by measuring your KPI for a given period and then comparing them against past performance. Remember to focus on the trends, not the actual numbers.

Step 7: Adjust Your Site as Needed

As you review your data, you may identify areas of your site that need to be updated to improve user engagement or search engine performance. Ideally, you’ll see trends that reflect site growth and success, but you’ll need to set aside time to review the data and update the site on a regular basis.

Conclusion

Google Analytics can be a powerful tool, but to get the most out of it you need to know where to begin. Understanding your site and setting goals will get you on the right track. Then, you just need to pick your key indicators, set your targets, and get analyzing. Easy, right?

If you are new to Google Analytics, I highly recommend checking out Google’s educational library, but you should also consider just logging in and getting your hands dirty. It may seem overwhelming at first, but if you stick with it, the rewards will be well worth it.

Productivity In The Office

If you’re like me, you have a lot to do in a day. You’ve got meetings to attend, emails to answer, phone calls to make, and various other tasks to complete–and those are just the things you’re expecting.

Over the last five years of working at Algonquin Studios, my responsibilities have increased and my days at the office have become more and more hectic. For me, that can be a big deal. I like to be organized. I get satisfaction from completing tasks. I like to give my client first-rate service. I like to be productive.

Regardless, the craziness of a day at the office often threatens to blow all of that to pieces. Sometimes, you receive more emails that you can realistically answer in one day. Sometimes, your day is filled with unexpected interruptions. Sometimes, you may have so much to do that it’s simply overwhelming.

Over the years, I’ve learned to combat the urge to plunge into the mayhem head first. I’ve learned how to stay organized and calm through the storm of insanity that gathers in my inbox. Most importantly, I’ve learned how to be productive when distractions mount.

Here are some of the things I do to keep perspective and be productive:

Make To-Do Lists

I like making lists. I use them to keep track of the various tasks that I need to complete in a day or in the next week. Every morning, I make a new list with the tasks that I need to do that day. Sometimes, a few of those tasks are carried over from the day before and that’s okay. I don’t always get through my list, but just making it gives me a plan for the day.

Block Out Your Calendar

One of the easiest ways to get behind on work is to allow yourself to get overbooked. Each week, I look at the tasks that I need to complete and block out time on my calendar to work on those tasks. Each morning, I review my calendar and update it as needed to correspond with my to-do list.

Does it really matter if I send this email or make that follow-up call right at 1:00? Most of the time it doesn’t, but blocking out my calendar keeps me (and my co-workers) from scheduling more appointments than I actually have time for.

Complete One Task at a Time

Multitasking often seems like the perfect solution for achieving the mounting responsibilities of your day, but research shows that it doesn’t really work for most people. The NPR.org article, “Think You’re Multitasking? Think Again” puts it well:

“People can’t multitask very well, and when people say they can, they’re deluding themselves,” said neuroscientist Earl Miller. And, he said, “The brain is very good at deluding itself.”

Focus on one task and work it to completion before you start the next one. You’ll be more productive because you’ll be able to give your full attention to one thing and you’ll get the satisfaction of completing that task. It may mean ignoring your email or your phone for periods of time, but, in many cases, it’s worth it.

Take Occasional Breaks

I find that if I plow through the day without taking the occasional break, I’m burned out by mid-afternoon. Take a few minutes to recharge and between tasks. Get up and stretch or get a drink.

Along the same lines, use your lunch break to re-energize. Move away from your desk and allow your mind to focus on something else for a little while. Personally, I like to read during my lunch break.

Synopsis

These are some of the things that help me make the most out of my day and hopefully these tips can help you stay focused and increase your productivity, as well. If not, then hopefully they’ll get you thinking about what things work best for you. Let me know if you have tips or tricks that you use to get the most out of your day.