Getting Started With Google Analytics For Your Site

Everyone has heard about Google Analytics at some point. But what does it exactly do? It’s a web analytics tool that shows you how people find your site (for instance through a search engine, ads, etc), how they navigate through your website and how they become costumers. You’re also able to track your mobile websites, mobile apps and web enabled mobile devices, bot high end and non-JavaScript enabled phones. You can find out which browser and which operating system your visitors use, which search queries they use and what the landing pages are. You can also see how many new and returning visitors you have. And what’s also important to know is how long they stay on your website.
(more…)

5 Useful Tools For Responsive Web Design

1. FitText.js

The first one I’d like to discuss is a JavaScript plugin that makes font sizes flexible. It’s called FitText and is pretty simple to use. You can download it, for free, on github. In the zip file you’ll find 3 files: a readme file, the actual JavaScript file and an example.

Like I said, it’s fairly easy to use. If you open the example, you’ll see that the headers (h1) all got an id. It’s these parts that will be resized when you resize the window. Their are a couple of things you have to pay attention to in the css file, or script if you put in the html file. However FitText ignores the font-size you specify in the css file (body tag), you have to be sure to set one as a fallback in case JavaScript is turned off. You also have to make sure that the h1 tag has a display block with a specified width.

So in the example, they just call the function for the first id (fittext1) which has all the default values. For the second id (fittext2) they set a “compressor” value. If you set a high compressor value, the text will shrink more aggressively. If you give a lower value, for instance .fitText(0.8), the text will shrink less aggressively. For the third id (fittext3) they set a min- and maxFontSize, this allows users to specify two optional pixel values.

More information, and the link to github, can be found on their website http://fittextjs.com.

2. Adaptive Images

This tool detects your visitor’s screen size and automatically creates, caches and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. It’s a bit more difficult to use because, you don’t only have to know the basics of html and css, you also have to have some basic server knowledge. You can also download this tool for free on github. When you unzip this file it’s best to first read the instructions file. Here you’ll find a very detailed list of instruction to create your adaptive images.

They say the setup is really easy and quick (just 3 steps). You first have to add the .htaccess and adaptive-images.php to your document-root folder. Than you have to add just one line of JavaScript between the head tags. And finally you have to add your css media query values into $resolutions in the php file.

You can find all the information you need on http://adaptive-images.com.

3. Responsive Testing

My prayers have been answered with this tool. I find it really dreadful to constantly have to resize my huge window so I can test a responsive website. No more I tell you! Just visit http://mattkersley.com/responsive and enter the url of the website you’d like to test. You can test only on the width or the device sizes. You have a beautiful overview for each device and their fore you can easily see where you have to tweak some more. The only downside I could find is the fact that it only covers apple’s products. So if you create for Android tablets or phones you still have to figure out their device sizes. But even for them it will be a great help!

4. Less Framework 4

“Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 set of typography presets, all based on a single grid.” You can download Less Framework for free on github.

If you want to see what it does, you just create a new webpage with some dummy text in it from lipsum.com. you just have to copy the css you want (I choose the main-16px.css) and paste it in your css file. If you run the page now you can already see it in action. If you want something more sophisticated, you can always tweak a couple of things in the css file.

There are a couple of rules you have to keep in mind when you want to use this tool for your website. So for more information about this useful grid tool, visit their website http://lessframework.com.

5. Responsive Web Design Sketch Sheets

If you still use paper and pencil to create your mockups, you could use these sketch sheets for your responsive web sites. You can download the sheets at http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets.

The Possibilities and Restrictions of Responsive Web Design: Responsive Data Tables

As you may have read, I’m a student Interactive Multimedia Design at the college of Mechelen. I’m in my final year, and as all graduates we have to create a final project. Me and my partner have decided to create a mobile website so motorists can pay their parking fee with their phone or tablet. This will be my very first responsive web site I’ve ever made.

There are a couple of things I wish I knew before I started this project and the major one has to be that working together with a city brings a lot of extra difficulties to a project. For instance we HAVE to work together with their ICT department, which basically means we always have to ask for their approval after coding a page (which may take a couple of weeks).

(more…)