Jan 31 2012
Source: matthewjamestaylor.com
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.
Jan 20 2012
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…
Jan 10 2012
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.
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.
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.
Nov 7 2011
With mobile surfing constantly rising in popularity during the last couple of years, there has been an interesting shift in the way many web designers build their designs. When I started building website templates back in 2005, I learned to make the designs work in all browsers – including text-based browsers which did not even support CSS. The way I did it was to build the complete design for modern web browsers first and then make sure that the design would be possible to browse even with the most basic text-based browser, including the mobile browsers of that time.
In short, the target was to always make sure that designs would degrade gracefully if displayed on an older web browser. The code structure would be built in a way that kept a text-only, no-CSS version of the HTML output logical and well-structured. This concept was commonly called "graceful degradation", and it simply means "display a basic and simple version if the full layout can not be rendered". There were many ways to achieve that effect, some were good and others were really nice – but at the cost of usability. I wanted to keep things simple to make sure that people with very limited knowledge about HTML and CSS could still use my templates and learn about the degradation by simply trying the examples included in some of the templates.
You can still see numerous examples of free templates that degrade gracefully among my older templates. I will show examples in the next part of this series, but for now I will focus on the terminology and the differencies between the two methods.
When smartphones with more advanced web browsers started to appear, it became possible to use CSS and display the full version of the site on mobile devices. But since the screen sizes were (and still are) small and the resolution of most mobile devices were (and, most often, still are) lower than even the smallest laptop computers, the full layouts and designs did not look very well. Until recently, I still kept graceful degradation as my main design philosophy. But in the last few years, another design philosophy has became more or less a standard: Progressive enhancement.
Where graceful degradation was all about building the full layout first and making it usable on mobile devices, progressive enhancement turns the order around and builds from another perspective. A designer building with the progressive enhancement philosophy starts with creating the design and layout for small-screen devices and, once the mobile-friendly version is complete, moves on to adding more advanced layouts and design elements that are displayed on devices with higher resolutions and bigger screens. This has many positive effects, and it can be done in multiple ways.
Most methods can be summed up unde the term "Responsive design", where clever use of CSS3 media-queries makes is possible to automatically display a set of extra CSS if a number of conditions is met. Responsive designs scale down if you reduce the width of your web browser, most often by switching to a simpler layout that is better suited for small-screen devices. In more advanced designs, there could be several layouts included – one for each pre-defined screen width. I'll write more about screen widths and how to detect them and serve the proper CSS based on screen width in the next part of this series.
Progressive enhancement and responsive design are still fairly new concepts to me, I have only experimented with it for a couple of months. But I can tell for sure that I will be adopting the progressive enhancement philosophy with all my heart for future releases. I have studied lots of great website templates, WordPress themes and live websites to get an idea of hot I could best apply this design process to my work. And my spontaneous reaction is that "Mobile first!" makes a lot of sense, and that this is an inspiring way to work.
I am currently working on the next major update for andreasviklund.com. As with the current version of the site, it will be a site based on WordPress. But rather than building the full layout in the way I have done in the past, I started with getting the basic features and functionality in place, even before I wrote any CSS. I will describe my workflow in the next post of this series, and look back at older templates to see if they can be re-modeled using Progressive enhancement.
Part 2 will be published in a few days, stay tuned! And if you have any comments, questions or suggestions for what I should write about, don't hesitate to post a comment to this entry.
Oct 13 2011
The new version 2.0 of The Grid template includes two separate grid layouts, one that is 960 pixels wide and another that is 1200 pixels wide. Both grids use 12 columns with 20 pixels of spacing, but the column widths are diferent. The 960 pixels grid use a column width of 60 pixels while the 1200 pixels grid use a column width of 80 pixels. Since both the included grids have a similar set up, you can use any of them with the layouts created with the template. The only thing that needs to be modified to switch between the two width options is the <body> tag.
The 960px grid is the default setting. To use it, keep the <body> tag free from additional classes, and just let it be written out as:
<body>
The wider grid is applied by adding a class to the <body> tag. The class, named "wider", activates a part of the CSS which changes the grid width and all the relevant parts of the layout that are affected by the width. To switch to using the 1200px grid, modify the <body> tag to make it look like this:
<body class="wider">
No matter how the columns and rows are set up in the template, the layout and the background image will adjust to the width thanks to the body class. The exception is the header image which needs an additional edit of the HTML code. Change the header image filename by adding "-1200" to the file name, like this:
<div id="headerimage" class="col c12"> <p><a href="index.html"><img src="images/header-1200.png" alt="The Grid template" /></a></p> </div>
…and you are ready to use your layout in a wider format!
