andreasviklund.com

Centered horizontal menus with CSS

Andreas Viklund — Tue, 31 Jan 2012 17:11:03 +0000

Source: matthewjamestaylor.com

I got an e-mail asking how to make a centered horizontal menu, using XHTML and CSS. It may sound easy, but it cause me a lot of headache before I learned how to do it. After trying a lot of "text-align:center" and "margin: 0 auto;" approaches that didn't work as I wanted, I realized that the trick is to think outside the box when positioning the unsorted list I use for navigation menus.

Rather than just answering the e-mail question, I want to share a link to an excellent and very well illustrated guide on how to make centered horizontal menus. The guide is written by Matthew James Taylor, and it has a no-hacks approach that keeps the code clean and efficient. A few examples are provided that you can use and learn from. Check it out, and don't miss the many other good posts in Matthew's design blog.

Update about the Arctica theme for WordPress

Andreas Viklund — Mon, 30 Jan 2012 21:20:11 +0000

After being in the review queue for the official WordPress theme directory for more than three months, the Arctica theme was finally reviewed a day ago. Since it was based on the same code base as my two latest themes, Asokay and Lagom (which are both approved and published on wordpress.org), I expected the review of Arctica to result in an approval as well.

I was wrong. Arctica was turned down, with the only argument being that it "appears to be a copy of Toolbox with only minor style changes". With the approved Asokay and Lagom in mind, and knowing the amount of changes that I had to make to get those two approved, I disagree with that conclusion and have asked the reviewer to clarify why Arctica is treated differently than my previous two themes. Until I get a chance to understand the reason for the non-approval, Arctica will still be available from this site, just like before. It works well, but you will not get update notifications inside the WP-admin until the theme is approved and added to the wordpress.org theme directory.

Video tutorials: Learn to write XHTML and CSS manually

Andreas Viklund — Fri, 20 Jan 2012 14:27:35 +0000

After being asked about HTML/CSS coding tutorials for beginners, I ran across a site with a number of excellent guides: LearnWebCode.com. In a number of simple steps, you can learn the basics of both (X)HTML and CSS, and along with the texts you can find a number of videos that give you a visual guide on how it works. After viewing several videos and reading a number of the tutorial posts, I can warmly recommend it for anyone who wants to learn how to build websites from scratch using manual coding. Read more by following the links below:

XHTML and CSS tutorials (text with code examples)
CSS video tutorials
HTML video tutorials

Thanks Brad for these guides, I think that they could be really useful to a lot of aspiring site builders…

The Grid v2.1 released

Andreas Viklund — Wed, 18 Jan 2012 13:19:06 +0000

The second version of The Grid template has been updated to version 2.1, fixing a minor error in the sample content. A package of sample layouts built from the template will be released separately at the end of this week, showing the flexibility that the grid system provides for creating both simple and complex layouts.

Download The Grid v2.1 (.zip, 164 Kb)

Notepad++ 2.5.8 released

Andreas Viklund — Tue, 17 Jan 2012 18:14:06 +0000

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.

Sharing buttons and commenting using your Facebook, Twitter or Google account

Andreas Viklund — Sun, 15 Jan 2012 22:15:53 +0000

I have spent this weekend on adding two new features for the site. Here is a short rundown:

Share buttons for pages and posts

Buttons for Google +1, Facebook Like and Tweet this have been added to all pages and all blog posts – as well as to the front page. If you click on one of the buttons (for example the "Facebook like" button) on any page or blog post, you will "like" that specific page or post (rather than the main URL, andreasviklund.com, which was shared on the previous version of the site). The sharing buttons now display the number of +1's, likes and tweets for each page, which is also a new feature.

Comment using your Facebook, Twitter or Google account

Comments can now be posted using your Facebook account, Google account or Twitter account, as well as by manually filling in the name and e-mail address like before. If you post a comment by connecting your Facebook account, your comment will also be posted on your Facebook wall along with a link to the post you are commenting on. I don't know if this will be useful to anyone, but I thought that it could be worth trying it out.

More features will be added during the next couple of weeks, as the site is in constant development now. If there is any specific feature that you would want to see, feel free to post your suggestions and requests here.

How do WordPress plugins affect site performance?

Andreas Viklund — Wed, 11 Jan 2012 21:14:07 +0000

One of the best things about building websites with WordPress is the flexibility you get from the wide range of WordPress plugins available. But every plugin that is added affects the performance of the website. If the number of installed plugins is high, the difference can be quite significant. Dev4Press has published a detailed test showing how 35 different plugins affect the performance of a WordPress website, and it is a really interesting post that provides a good point on optimization by simplification. In some cases, it may actually not be worth installing some plugins as the negative effect on performance is bigger tan te positive effect of the added feature. Check it out, and if you know about more tests similar to this, I'd be happy to know about them.

Website analytics – The must-have tool for site owners

Andreas Viklund — Tue, 10 Jan 2012 08:18:49 +0000

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.

WordPress 3.3.1 released

Andreas Viklund — Tue, 03 Jan 2012 22:52:28 +0000

Just a short note: A new version of WordPress has been released. WordPress 3.3.1 is called a "security and maintenance release", and it fixes a number of issues found in the recent v3.3 release. As always, updating to the latest release is highly recommended.

Now available: The Arctica theme for WordPress

Andreas Viklund — Mon, 02 Jan 2012 22:22:55 +0000

Since more than 80 days have passed since I submitted this theme to the official WordPress theme directory queue, and since the theme is marked as being under review since a number of weeks, I decided to make my next theme available on this site and keep it here until it shows up in the official theme directory. This means that you can now download the first version of the Arctica theme and try it out.

Arctica is a basic 2-column blog theme, built upon a HTML5 code base (derived from Toolbox) and enhanced by CSS3 and a custom webfont. It is classical, by some measures to a level getting close to being oldschool. But the feedback has been very positive so far, and it is a theme which I could very well end up using myself if I would launch a personal blog some time in the future.

Give it a try, and let me know what you think about it. Feature suggestions, bug reports and general feedback are always welcome. As always, you can preview the theme on my theme demo site.

To download the Arctica theme directly, use this link: Arctica theme for WordPress (.zip, 179 Kb).