Jan 17 2012
Notepad++ 2.5.8 released
The code editor of my choice, Notepad++, has been updated to version 5.9.8. It is a minor update, but it includes a welcome addition of drag-and-drop capability in the project manager.
Archive for tag 'tools'
Jan 10 2012
Website analytics – The must-have tool for site owners
This website uses multiple services and scripts to gather statistics of site usage and traffic. For any webmaster, such statistics are not just interesting to view but pretty much essential to keep websites working as good as possible. The main service for the most complete and detailed stats is Google Analytics, which is an external statistics system that runs on Google servers. I am also using a secondary statistics system which is running as a set of scripts on this server, called Mint.
This is a good combination in my opinion, as Google Analytics provides very detailed data and the possibility to generate reports and see changes for any set of data over time. When I need to know how the number of pages each visitor views in average in a day has changed over the last 6 months, Analytics makes it easy to find the answer. But Google Analytics has one weak point: It lacks a simple overview of the most important information regarding what is happening on the site at any given time. That is where Mint becomes useful, as it displays everything I need to know on one single page where I can get a quick update on the numbers for the last 24 hours, along with a summary of the number of unique and total visitors per week and per month for the last 12 months.
This is what Mint looks like:
Up until recently, I also used a third statistics service to get access to real-time reporting: Clicky Web Analytics. Clicky has a feature that shows the number of visitors that are currently viewing the site, which pages that are viewed and where in the world the visitors come from. It also shows which page each visitor arrives to, making it easy to see which pages and blog posts that the visitors of the site are finding interesting, again – in real-time.
Google Analytics goes real-time
However since the new design was launched on January 1st, I am no longer using Clicky. A few months ago Google Analytics added a new feature (in beta) for viewing real-time actions on websites, and it works very well. Since Google Analytics is a free service, I do no longer see the need to pay for the commercial service that Clicky is. But it must be said that Clicky is an excellent alternative to Google Analytics, so it is really a matter of taste which one is used. I decided to continue using Analytics since I have been using it for several years, giving me a lot more historical data than I have got from the one year that I used Clicky.
This is what the Google Analytics real-time mode can look like:
This view shows the number of currently active visitors on the site, as well as which websites or search engine terms the visitors came from and which pages and posts that are viewed. Finally, the map shows where in the world the visitors (or rather their ISPs) are located.
Using this knowledge to improve the site
With access to this kind of information, it becomes a lot easier to optimize and improve the site and the visitor experience. Combined with regular Analytics reports are added (for example showing the most common screen resolutions, common entry and exit points, time spent on the site and detailed information on traffic sources), this is a tool which is absolutely essential to my work.
I recommend everyone who is building websites to use a statistics service that provides this kind of information. It can help you improve your website in a number of ways, by simply letting you know how the visitors of your site interacts with it.
If you would want to know more about using website usage statistics and analytics to improve your website, feel free to post questions as comments to this post and I will do my best to answer them.
Sep 23 2011
Review: The Web Developer toolbar for Mozilla Firefox
I have a lot of different web browsers installed, but the one I use most often is Mozilla Firefox (currently version 6.0.2). To make my daily work easier, I use a number of Firefox extensions. One such extension is essential for testing and quality-checking my designs: The Web Developer toolbar by Chris Pederick.
What is the Web Developer toolbar?
It is a browser addon for Mozilla Firefox, that puts a lot of extra tools in a separate toolbar and in the right-click menu of the browser. Among the tools are HTML and CSS validation tests, accessibility tests, script and image blocking features, layout information displays such as block sizes and code structure, quick links for viewing the source code – and numerous other useful features that I use every day. Many of the included tools can be useful not just for development work but also for getting an idea of the structure of a website as well as finding individual values for specific objects in a layout.
The toolbar is available both as a separate extension and as a part of the Web Developer's Toolbox collection which also includes a couple of other addons that I use (mainly Firebug and Greasemonkey). It has been used in the construction of all my templates and themes, as well as for building this very site. Among my favorite features is the "Display element information" mode, which shows detailed information about any part of a layout that the marker is pointing on.
Requirements for use?
The Mozilla Firefox web browser, but similar extensions are available for other web browsers as well. A version by the same developer but for the Chrome browser is available in the Chrome Web Store.
Who can the Web Developer toolbar be useful for?
I would call this a must-have tool for web designers and web developers, and a really useful learning tool for web design beginners who want to learn more and easily check for structural or validation errors in their code.
Can I recommend the Web Developer toolbar?
This is one of my favorite browser addons, one that I would not want to work without as it makes several parts of my design process much more effective. I recommend it for anyone interested in web design, both beginners and professionals. If you want to get an idea about other users opinion, check out the reviews for the Web Developer toolbar on its addon page on Mozilla.org.
Sep 22 2011
Review: Notepad++
The second post in my "reviews" category answers the most common question I get regarding software: "What program do you use to create website templates and themes?".
Editing code in a manageable way
I create all my templates and themes by writing the code manually using a code editor. My first choice for doing this is Notepad++ for Windows. Here is why…
What is Notepad++?
Notepad++ is basically a plain text editor with added features that makes it easier to edit code. The program, which is free and open source, features customizable color coding for a large number of scripting and programming languages, as well as for regular HTML and CSS. Using the built-in style manager, the user can adjust colors, font sizes, formatting and other relevant settings for each code format independently.
The editor has several display modes, including a dual-pane window that allows two documents to be displayed side by side. It is my default mode, most often showing a .html file on one half of the window and a stylesheet on the other. Notepad++ has a plugin system that allows more features to be added, for example an internal FTP client and a DIFF viewer to compare and display differencies between two documents. Using a tab interface, multiple documents can be opened and edited which I find useful for editing WordPress themes (which often consist of more than 15 different files). By default, there is no web browser intergration so I use my regular browsers to view the pages I design.
Requirements for use?
Microsoft Windows and knowledge about the scripting or programming language that you intend to edit.
Who can Notepad++ be useful for?
Notepad++ is useful for programmers, developers and designers who use computers running Windows as the operating system and who edit code manually. It is especially good for people who need to work with multiple text/code documents open at once. The dual-pane viewing mode is a simple but really useful feature that many developers and writers find essential. Notepad++ can also be useful for anyone who is interested in learning more about HTML and CSS, as all editing is done directly in the code rather than in any visual editor that hides the code.
Can I recommend Notepad++?
As it is my own favorite editor, I can definitely recommend Notepad++ for code editing. But for a web design beginner, there is a learning curve that could be easier to handle by starting with a combined code editor and visual editor that allows the user to view the effects of changes to the code directly with a visual preview. I will be writing about such editors in future posts for sure, I am currently testing a couple of software solutions that can be better starting points for beginners. But for anyone who shares my passion for manual coding: Try Notepad++ if you haven't done it already. Chances are big that you'll like it.
Sep 21 2011
Review: Pixlr Editor, the free online photo editor
This is the new "reviews" category of my blog. I created it since I often get questions about my opinion about different kinds of software and services, and rather than rewriting the answers multiple times I will publish short reviews and opinions based on my own experiences in this category. Keep in mind that these will be my own impressions of the software and services, and that the best way to find out if a program or service works well for you is to give it a try yourself.
Photo editing without having any software…
Beside questions about the templates and themes themselves, one of the most common questions I get is how I create the images in my designs. And more specifically, how I edit the photos and which software I use. Most often I use Adobe Photoshop CS5 for both tasks, but there are also situations where I need a lighter alternative, for example when I am using another computer than my main work machine. Out of many different solutions I have tried, there is one that stands out as an excellent and easy-to-use way: The Pixlr Editor.
What is Pixlr Editor?
Pixlr Editor is an online service for creating, editing, opening and saving images and photographs in various formats. One out of several image editing tools on Pixlr.com, a quite advanced one. It is basically a web application with an appearance that will look familiar to anyone who has used Adobe Photoshop, Paint Shop Pro or GIMP. It is launched directly from the site through Java, so as long as you have Java installed there is no installation of any kind needed – Pixlr runs directly in the browser.
Pixlr is also free to use, with an impressive feature set for an online image editor. It supports many of the most common features that are found in regular software editors. Layers, shapes, airbrushes, scaling, gradients, color adjustments and a number of filters on top of that. You can actually open .PSD files created in Adobe Photoshop and edit them directly, a feature which I find to be really useful when working away from my office. When saving an image, the file can be downloaded to the local computer in several different formats (including Pixlr Editor's own multi-layer format, .PXD) or sent directly to external services such as Facebook, Flickr or Picasa. There is also an optional Pixlr image storage account and a quick image hosting service called imm.io available.
Requirements for use?
All you need to use Pixlr is an internet connection (I've used it with a 1,6 Mbps 3G connection without any problem) and an up-to-date web browser, and you are ready to go. Without knowing for sure, I would guess that computer performance will not be a problem for anyone who has a fairly new computer. My secondary computer, a small HP Mini-Note 2140 netbook with a single-core 1,6 GHz CPU and 2 Gb of RAM, has worked great with Pixlr Editor for me.
Who can Pixlr Editor be useful for?
Basically for anyone who needs to edit images or photos, but who doesn't have access to any more advanced image/photo editing tool. And also for anyone who just needs to make a few quick adjustments to an image that is intended to be published on Flickr, Picasa or Facebook.
Can I recommend Pixlr?
Yes, most definitely! For now, Pixlr Editor is my first choice for editing photos and creating images when I don't have Photoshop around.
