Monthly Archives: April 2015

cover

Post 5 – Website Analytics and Tracking Traffic Tutorial

By | Blog | No Comments

Hello my fellow techies! This week’s blog post is a short tutorial on website analytics. Now, most web developers underestimate the power of statistics and traffic information, but it’s an absolutely essential part of running a successful website in my opinion. The more you know about your visitors and how they interact with your site, the better. Here are a few things you can learn from analytics and reasons why this info is important:

  • Traffic sources – it’s great to know where your traffic is coming from so you know which methods of marketing are most effective and where you’re getting the best value for your time and marketing dollars.

  • Visitor paths and popular pages – this info allows you to track how people are interacting with your site and which pages are being used the most. Also, it allows you to track how much time is being spent on each page by each visitor. Great for content creation and optimization.

  • Visitor’s location and system stats – info such as browser used, display dimensions, IP address, location, ISP, and much more is available. If you’re trying to sell a product or target content, you must first know your user and which platforms are being used to access your site.

  • Traffic volume – this is an obvious one. You’re going to want to know how many people are visiting your site! This help you monitor performance and optimize your efforts.

There are many other useful tools and stats, but those 4 are the ones I’ll cover today and you can play around with the others on your own. The analytics tool we’ll use is called StatCounter. I know that most people recommend Google Analytics, but for simplicity and preference, we’ll stick with Statcounter. Let’s get started.

  1. Go to statcounter.com and create an account with by clicking the signup tab and enter your info.
    1

  2. Once you’re signed up and verified, log in and click the “add project” button.
    2

  3. Fill in your website’s URL. I prefer to select invisible tracking so no counter appears on my site. This is up to your preference. You can get optional traffic reports delivered to your email as well. Hit the “add project” button to continue.
    3

  4. The next screen will allow you to choose the type of website you have. If you have a custom site, click “default installation guide”. If you have a WordPress site, select WordPress from the list.
    4

  5. If you chose default installation , it will provide a code similar to that in the image below. Copy and paste this code into the header or footer of any page on your site that you want to track stats for. If you chose WordPress, go to your website’s admin panel and install the plugin called Statcounter and then go to it’s options page and enter the project ID and security code provided from statcounter.com as seen in the image below.
    5
    6

  6. Scroll to the bottom of the StatCounter page where you acquired the codes and click the “Check Installation” button to confirm a successful installation.
    7

  7. Log into StatCounter anytime to view statistics about your websites and their performance.

These are just a few key features of StatCounter and I really recommend spending a few minutes to check out all the rest – you won’t regret it! Below are some images of a few of my sites’ stats to showcase the kinds of reports that are available and some key features in action.

Click to see full size images.

I hope you enjoyed this week’s post and it comes in useful for you in your future projects. If you have any questions or suggestions, please comment below. See ya!

mobile design tips

Post 4 – Mobile and Responsive Design Tips

By | Blog | No Comments

Hey everyone! This week I’ll be going over a few tips for mobile design. This is an area that a lot of developers have issues with and it can truly make or break an app. Creating a great flow, user experience (UX), and visuals is no easy task, but if you follow these guidelines, it should be a bit easier!

  1. My first tip is consistency. When designing an app, you will often have several screens or pages. It is a good idea to keep these consistent. For example, if your navigation bar is on the bottom on your home screen, it should also be there on every other screen. This allows for a better user experience and flow for your app. You can achieve this by using the grid option during development or using the “paste in place” option if it’s available. Also, you can create a template for your page and use it as a base for each other page. This will ensure everything is consistent and placed correctly throughout your entire application/site.

  2. Next, we’ll look at sizing – this is a big one. When it comes to mobile, you have to remember that your screen real-estate is limited, but this doesn’t mean that everything should be shrunk down evenly. Your font should still be a large enough size that is it legible and easily viewed by the user with no eye strain. This is also true when it comes to buttons. Apple recommends a minimum touch target size of 44 x 44px, Microsoft recommends 34 x 34px, and Nokia says it should be no smaller than 28 x 28px. The average width of an adult’s index finger is 1.6 – 2cm (45 – 57px) and studies show that user errors decline as target size increases.

  3. Another aspect of design that should be considered is complexity. It is good practice to tone down the complexity when it comes to mobile development. Simplicity is one of the first things I take into account when I design anything, but for mobile, simplicity is absolutely key for UX. Often, users use apps instead of desktop because it is supposed to be easier and quicker. Make it as simple as possible for the user to navigate, use functions, and access information and you’ll have a happy user. Get feedback from users and find out what kinds of issues they are having with the app and what you can do to simplify the experience for them – it will pay off. An example, keep important features and buttons within thumb’s reach so the user can operate your app with one hand.

  4. Additionally, proper colouring is another factor that can really add a nice vibe to your app. To be frank, some colours just don’t look good together. When trying to find out which colours jive, there’s a lot to think about. Consider your target audience and what colours they may be in to. It’s also a good idea to check out competitors or other similar apps and “borrow” ideas from their colour schemes. An excellent resource for developing a colour theme can be found here: Adobe Color. Finally, a great use of colour is contrast. You never want to create buttons that are the same colour or a similar shade to the background.

  5. Lastly, you’ll want keep responsiveness in mind. Will your app look great on both a phone and a tablet? Will it differ from iOS to Android? How about from landscape to portrait mode? I recommend extensively testing your apps on several devices in order to confirm compatibility as well as usability on each device. There are several tools and emulators you can use to test responsiveness for apps, web apps, and mobile responsive sites (though, nothing beats an actual device for compatibility testing). Try responsivetest.net  for responsive sites or bluestacks.com for Android apps.

Check out these infographics for more mobile design tips!
mobiledesign

A few side notes:

-Font selection does matter – use easy-to-read fonts and try to stick to sans-serif typefaces.

-Remember, some people are left handed. A left handed option to switch navigation or button locations may benefit some users.

-Creating an option for alternative skins/layouts can be a refreshing addition to your apps/sites.

 

Well, that’s about it for today. Leave me a message in the comments below if you found this helpful or if you have any mobile development tips of your own. Be sure to check back next week for my next mobile blog post!

Text by thinking

Post 3 – The Future of Mobile

By | Blog | One Comment

Hey everyone!

This week I’m going to give my opinion on the future of the mobile industry. I’ll be going over up-and-coming new technologies as well as their impact on the world. Things are evolving and changing at such a quick rate that it’s difficult to accurately predict what’s coming next. Some may find this scary and others will find it exciting, but the fact is: the future is coming whether we embrace and adapt or demur and lag behind.

Before looking into the future, I’d like to give you a quick reminder of the changes in the recent past.  Phones went from being strictly land-line to mobiles that looked like over-sized bricks. From here, the evolution quickly began and within just a decade the phones decreased in size many times over, increased in power and features many times over, and eventually became “smartphones”. This was the leap that truly changed our culture. The smartphone took the best of computers and shrunk it down, added interactive applications, integrated the internet and took computing from the desktop to the pocket.

Click the image below to see the past, present, and future of mobile in a graphic.
future

Since the introduction of the smartphone, we’ve had many new mobile innovations and leaps forward such as voice, sound, and image recognition. These all have their practical uses and are getting better each day. We’re coming close to a time where mobile artificial intelligence isn’t far off and I believe we’re drawling closer to a time where humanity will be faced with an ethical debate. This technology will bring new opportunities but also new problems. What happens when a phone or computer becomes so smart that it takes your job? What happens when your phone becomes an integrated part of your biology? Will you allow a mini phone to be implanted into your body? Will you allow a phone to read your brainwaves? Though it sounds like science-fiction, this is a coming reality. If you were alive in 1980 and someone told you that you would soon have the world knowledge in your pocket, it would also sound like science-fiction, right?

There are countless new technologies that are on the horizon, but I’m just going to focus on one today- texting by thinking.  Instead of trying to explain it on my own, I’ll paraphrase from one of my favorite websites: www.futuretimeline.net. Get ready! You’re now in the year 2020:

“In addition to 5G, phones are now available with the option of texting by thought power alone.* This is achieved by a combination of eye-tracking technology and a sensor-mounted headset worn by the user. The headset contains a brain-machine interface which detects electrical brain waves and converts them into digital signals, then displays the resulting letters on-screen.”

Some high-end models can be used with glasses or visors featuring displays built into their lenses. This enables completely hands-free texting, creating a form of virtual telepathy. The process is rather slow at this stage, requiring a high degree of mental concentration. It is more of a novelty for now. However, advances in the coming years will enable smooth and fast interactions, revolutionizing the world of communication.”

This, to me, is amazing. I often have a debate with my friends about how I want to live for thousands of years and how they think it’s an unrealistic and also bad idea. Not only do I think it’s possible, but I think it’s probable. It’s new advances in technology and changes in the world that inspire me and make me want to live that long in order to see what comes next.

To close off this post, I have a few questions for you (feel free to answer in the comments below). Where do you see the mobile industry heading? Would you be willing to merge with technology and implement it into your body in order to gain some kind of advantage or new ability? Finally, what’s your opinion on text by thinking and similar technologies that gain access to your brain and mind? I’ll be back next week with some tips for mobile design. Thanks for reading – see you then!