All posts by Kevin

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!

blog-photo

Post 2 – A Snapshot of An App In Development

By | Blog | No Comments

Hey everyone! This week I’ll be going over an app that I’m currently working on for a school project and I’ll be explaining some of the development process. In this project, I’ll be working with another mobile developer from my class and will likely also be soliciting some help from our professor. It’s a fairly large-scale project for the time frame that we have to complete it, but I’m confident that we can pull it off.

First, I’ll give a brief overview of the app idea and where it came from. As part of our assignment, we had to go out and find a real-world client and build a mobile app for their business. I connected with an old friend who is now running a marketing company in Toronto and he pitched me his idea – an app created for gamers who like to stay current with the cutting edge of the industry. This app would allow users to take advantage of several key features:

  • View a list of upcoming new video games (sortable by genre and platform)

  • Read a description, view images, and watch trailers of the selected game

  • Rate and view ratings of the game based on how excited you are for its release (hype meter)

  • Be amongst the first to preorder new games

Before we started the development process, we had to meet with the client and go over the project as a whole and decide what exactly it is that they wanted. Once this was done, we made use of a few tools and methods that usually help streamline development. These include storyboarding, creating a flow chart, and finally, making a Gantt chart. Storyboarding is essentially drawing up a rough image of what each page of the app will look like and where each element lies on each page. A flow chart is a visual representation of how the app works and how the user will navigate the app. The Gantt chart is to plan out each stage of development, assign/track tasks, and allocate resources for the entire project.

We’ll be using Flash Professional CC as a main development tool as well as Photoshop for graphics and Audacity for audio. The main development languages include PHP, MySQL, ActionScript3, Bootstrap, HTML, and CSS. So far, we’ve developed the bulk of the front end and interface, but the most challenging aspects are yet to be built. We still need to create a CMS for the client to load in new content as well as create scripts to develop feeds of the content. These feeds will be read and displayed within the app with the use of AS3 + PHP and the clever placements of elements on the stage. Once complete, we can publish for several platforms including web (SWF), Android (APK), iOS (IPA), and BlackBerry (BAR). This ability to publish for several platforms is one of the major advantages to developing with Adobe’s Flash Pro.

Currently, this app still hasn’t been named. This shouldn’t be much of a problem though, because the client’s marketing company also focuses on branding. Well, that’s all I have for this week and I hope you enjoyed this read. Before you go, please let me know what you think of this app idea and let me know if there are any features you’d like to see in later versions. If you have any cool ideas for branding or a name for this app, please comment below. Also, check out the link below for a preview of the project up to this point. Until next week, thanks!

Preview this app

me

Post 1 – An Introduction to Kevin DeMara

By | Blog | 2 Comments

Hey everyone!

As I’m sure you’ve guessed by now, I’m Kevin DeMara – a 25 year old Mobile App Developer from Oshawa, Ontario, Canada. Over the next several weeks, I’m going to be updating this blog with my insight and opinions on the wonderful world of everything MOBILE! First, I’ll give you an introduction to my background and how I became interested in the field of mobile and web development.

It all started when I was about 8 years old when my parents bought our first computer. The internet was painfully slow, the machine was massive, and the specs we’re comical compared to today’s standard, but I was ecstatic. I remember the feeling of downloading my first song on Napster and sending my first IM on ICQ. It was a freedom I’ve never felt before and I knew this device would change my life forever.

Within weeks, I was already starting to understand the basics of how the web works and I couldn’t wait to learn more. As the years went on, my curiosity grew and by mid high school, I was already well-versed in HTML, CSS, and was starting my co-op placement at Makita as a graphic designer. After graduating, I enrolled in the Information Technology – Network Security program at University of Ontario Institute of Technology. This program was great, but not what I had in mind, so I switched into the commerce program with the hope of gaining a business background to compliment my current tech skills. From there, I went on to major in e-commerce which combined my love of business with my passion for technology.

Upon graduation, I decided to take some time off to work on my own projects and explore. I went on an amazing road trip across Canada from Ontario to BC to see the country and enjoy hiking in the mountains (I really love the outdoors and travelling). On this trip, I came up with the idea to create a video streaming website for practice and put my web development and marketing skills to work. This project was my first taste of success online with massive traffic and a sizable payout. Within 6 months, I was pulling in millions of monthly visitors to my site and I was hooked. At this point, I also started to notice the trend of globalization becoming a reality and this prompted me to enroll in the International Business Management graduate program at Durham College. In this program I learned a lot about the world and the diversity of cultures as a whole. In April of 2013, I graduated with the award of highest ranked graduate and topped the president’s list. Although it was a great experience and a huge eye-opener, this program made me realize that tech was my true passion and it was time for commerce to take a backseat role in my life.

Today, I am enrolled in another graduate program at Canadore College called Mobile Application Development. This is by far the most useful and practical year of post-secondary education I’ve had up to this point. When looking at the today’s trends and seeing how everything is going mobile, I find it amazing that this program isn’t wildly popular. I am learning how to develop apps for Android, iOS, and even Blackberry, plus mastering the elements of responsive design. Also, this course covers the basics of most tools in the Adobe Creative Cloud suite, teaches UX (user experience) principles, and the fundamentals of 3D animations with 3D Studio Max. To say the least, even an experienced web guru would certainly learn a thing or two from this course.

Well, that’s about all I have for today, but I’d like to end by asking your opinion. Over the next decade, what role do you see mobile taking in our culture and the web as a whole? Will it continue to grow and overtake desktop and what will our mobile devices look like? Talk to you next week, bye!