Summary
If besides to add content to your site, you want to have some control on the user experience, eventually you will end up facing situations that other people had to deal with, and some of them had elegantly solved. In many cases those solutions are available to you for free. In this site I am using many of those solutions. Here I want to credit to them for their talent and work and also to thank them for their generosity.
Building and Setting up a site
In order to be able to put content accessible through the web, you have a very wide range of options to choose from. From one end, you can choose to rent a Web Publishing Service (e.g. WordPress), and from the other end you can rent a server box in the cloud (e.g. Rackspace). Of course, between those ends, the extend of how and what you can put in the cloud increases with the tasks an duties required to set-up and keep up everything running fine, according to Voltaire's words (before Spiderman's uncle Ben) "With greater power comes greater responsibility".
Another factor you must take into account when deciding how to put content in the web, is who will be in charge of those tasks and duties. You can choose to do it all by yourself, have your own team in charge, or hire a solution company. If as myself, you cannot afford to hire a team or a company to build your site, consequently you have to do everything by yourself, so you have to choose an option in the spectrum of possibilities were you have the required skills and time to build, setup and keep your site.
In my case, I want (mainly) to publish Blogs, Wikis or some mix of them, with the greatest possible creative power, so I choose a hosting service which enables me to use a Static Site Generator (a compiler) (which allows to build Static Web Pages). This is something between the ends described at the beginning of this post, this way of posting focus mostly on the content of the site but also allows me to use the required tools to enhance the "user experience". We will see some solutions in this area in the following sections.
Ikiwiki Compiler
The page generator/compiler I use is Ikiwiki. Ikiwiki was made by Joey Hess and is free open source. You can go to the Ikiwiki site and have access to the code (perl), documentation, and discussion forum among other interesting resources. One key feature of Ikiwiki is that it stores your web pages, both their content and technical components, and the change history of them in a Revision Control System such as Subversion or Git which means you always have a backup of your site in the Cloud and you can access to the sources of your site from anywhere.
Web Hosting
The hosting I use is Branchable. Even when it is not a free service, it has a very affordable price and is run by Joey Hess, the same guy who invented the site generator/compiler Ikiwiki I also use.
With Branchable hosting, you can start to add content to your site from the very beginning. You can enable or disable a wide range of plug-ins and configuring options to easily administer your site, and you have the complete control about the client side scripts and style sheets behind your pages. In that way, you have the complete control of how your site looks (colors, backgrounds, menus, etc.) and how the user interacts with it (e.g. menus).
Web site Fonts
Normally, the fonts (typeface in traditional typography) your site can use to show the text content in your pages, depends on what fonts are installed in the system from where your site is being visited. This is something I haven't realized before I set up this site, but once you have thought about it, is very understandable that a visitor using a Mac (by default) can only see your site by using some of the fonts installed in his system. The same happens for a visitor coming from a Windows PC, an iPad or a smartphone.
There is some small set of web standard fonts, theoretically present in every system having a web browser. Those fonts have the same particular look among all systems (e.g. Arial, Courier). However, if you are really interested in the user experience of your visitors, surely you will choose -very carefully- the fonts you want to use in the titles, the body of your pages and in the caption below the pictures, and so on; and very probably you will, in particular, exclude some of those standard fonts to have your own particular look in the web.
If you can afford it, the solution is to rent a font (yes, you can rent a web font) or even better, you can hire a company to build your own fonts. For example, the British newspaper The Guardian use their own font.
If you cannot afford to rent or buy a font, there are some free options you can chose from. In the sections below I will explain you what I am using.
Google Fonts
In this site, I use Google Fonts, which is kind of a portal that enables you to inspect, compare and finally use -for free- fonts built by talented and generous craftsmen. Actually I am using the following fonts:
- Droid Serif thanks to Steve Matteson.
- Oswald thanks to Vernon Adams.
- Open Sans thanks again to Steve Matteson.
This way, when you access a page of this site, while the content from the Branchable hosting is coming to you, also my selected fonts from some Google server in the cloud are downloaded in your browser.
I love being able to choose exactly the fonts I want for my site. To decide which fonts to use, and also their size and line height for each one, I selected a semifinal set of fonts directly from the Google Font site and then I spent few hours comparing their appearance and readability in Chrome and Firefox for Windows 7 and also in Safari for iPad under different sizes and line heights. I don't worry too much testing the site through IE mainly because it has a long history of don't following the web standards and additionally because if the page looks OK on Firefox, Safari and Chrome it should look OK also in IE.
Also, for the -not probably but possibly- case when the visitor -for whatever reason- can not download those fonts from google, I had a setup in my style sheets in order to automatically fallback to use the aforementioned set of standard web fonts.
Icon Fonts
You will always need to use some icons in your web pages, because as the adage says "A picture is worth a thousand words". In other words, the icons allow you to build pages delivering better user experience (UX) by the use of concise and standard visual metaphors instead of words.
You can choose to use a picture format for your icons (.png, .gif, .jpg, etc.), but there is some problems if you do that:
If the user has a browser/system with a pixel density very different than the one you used to build your icons (think about Apple's retina display) he will see smaller or larger icons than you expect.
If the user looks closely to those icons, he eventually will saw them pixelated. This can happen because some web browsers automatically enlarges your icons to compensate the issue (1.) or because the user had choose to see your page using the zoom feature in his browser.
To avoid these issues you have to have a font containing the icons you want to show in your web page instead of characters and grammatical signs as they usually do. Using a font will solve the issues because, as you might know, when you enlarge a font you get a more detailed image instead as in a picture where you eventually see pixel level detail.
To solve this issues I use IcoMonn Icons font. The IcoMoon is such a creative web site that allows you to use their online application to compose your "own" font by selecting the icons from different sets. You can even do a search query when you are looking for a particular icon. For example, if you want an icon related to the "Stop" concept, you query on that word and you will get some visual metaphors about that.
At the end of the process, you will get a .ttf (true type font) font to save it in your web site in order to use it in your style sheets to design your pages.
Thank you IcoMoon guys!
Client Side Scripts
Another essential tool to enhance the UX of your web site users is JavaScript (JS). The "script" term means that this a programming language is not focused to develop complete programs but to implement routines that will be triggered and run through a host application. In our context the host application is the visitor's web browser.
The "Client Side" term is used to distinguish "Server Side" from "Client Side" scripts. The Server Side ones are scripts that run hosted by the server delivering the web page, whilst "Client Side" are those running in the web browser showing the page to the visitor, and by that allowing you to implement different forms of interaction between your page and the user. We will see some applications of this in the following sections.
JavaScript is a programming language developed by Netscape Communication Corporation (standardized as ECMAScript), and formally, the implementation of the language in every browser should work in the same way and with the same language characteristics and features. In my small experience and knowledge, this is actually the case. However, being JavaScript a client side scripting language hosted by the web browser accessing your page, what you can do with it and how you can do it, depends on the services and information that the browser let to the language access and interact with; as a consequence of this, to do some usual task in one browser you might need a different code than in another (e.g. Firefox versus Safari).
In the past, there was such a broad difference between browsers that you simply cannot do some task in one of them while it can be easily done in other. Nowadays, except in advanced or innovative leading edge topics, you can do pretty much the same things in all of them. However, the code required to implement quite a few tasks, is different depending on the browser in use.
jQuery
jQuery is a Cross Browser JavaScript library that makes a lot more easier to access and manipulate the web page content and interact with the user across a multitude of browsers while using the same code. It's so popular and useful that even Microsoft and Nokia bundle jQuery on their platforms. From an architecture perspective, jQuery acts as layer isolating your code from the peculiarities of the visitor's browser.
On top of all this technical benefits, jQuery is free open source code. It was initially released by John Resig and actually is a foundation with corporate members as Intel and WordPress.
The jQuery library is hosted by public servers as MaxCDN and Google among others. This enables to my pages to have the required code to make the visitor's browser download this library from Google, while in parallel is downloading other page components from the hosting service I use, enhancing the page load time.
I use JQuery in code completely developed by myself or to adapt some jQuery solutions and plugins to my taste. In the following sections I will explain the jQuery plugins I use.
With respect to the code developed by myself, there is two major things I do, and are still a work in progress. One thing is the menu system to navigate my site pages and the other is a feature to add to my pages responsiveness to the change of the space available in the browser.
To add a menu system to my web pages, I could do it by setting the corresponding menu and its entries in each and every page of the site. However, that will imply that a reorganization of the site layout will require to adjust correspondingly the affected menus, potentially in many pages. To avoid this I had to decouple the menu system from the web pages. Somehow, I had to keep the menus related to each page but not as a direct content in them. In this line of thought, now I have the whole menu layout and entries saved in a file with JSON format and a library used by every page access this JSON file through Ajax, to locate, build and show the menu corresponding to the page. The menus are nested in the file in the same way the folders containing my web pages are nested in the file system, so the library finds the corresponding menu by traversing the structure in the JSON file with the same path the web page has as a file.
Colorbox Lightbox
Colorbox is a very popular jQuery plugin released by Jack Moore under the MIT License.
Frequently, when one or more images are included in a page, are shown -by design decisions- occupying only a relatively small fraction of the width or height of the browser. For example aligned to the right margin, inline within a paragraph text, or maybe horizontally centered between the page margins and vertically between two paragraphs. In these scenarios -very often- the size of the image is not enough to let the user to notice all the detail or information contained in the picture, so it becomes crucial to let him to see the picture in an alternative way using more of the space available in the browser.
If you notice that the space available to show the picture in each user browser is different from case to case and even is dynamically changing (e.g. consider this use cases: a smartphone, a 14" screen notebook, a 22" desktop screen with the web browser occupying only part of it, an iPad horizontally held, other iPad vertically held) you will realize this is not a trivial task. The task, includes:
- To do some geometry calculations considering the dimensions and proportions of the image intended to show and the available space in the browser.
- Resize the image according to (1.).
- Show the picture over a backdrop as a background overlay in order to hint to the user to realize his not seeing the regular content of the page but a picture in an alternative way.
Colorbox brings support to my pages solving the requirements mentioned above, either to show pictures individually or as a part of a slideshows.
TwentyTwenty
Sometimes you need to be able to show a picture after and before a treatment. For example, as a photography hobbyist, I might need to show a picture before using some photo filter and after the use of it. For reasons of space saving and comparison easiness, I would like to show the pictures resembling as when one places a picture exactly over the other and suddenly move the picture on top to reveal the one below in order to better notice the difference between them. That's almost exactly what the TwentyTwenty container allows to the visitor of my page to do.
Both pictures come from the same photo (the eye of my kitten) developed with different raw processors. Clearly the processs at right brings more cromatic detail than the other.
TwentyTwenty is free open source code from the ZURB Company.
Slidorion
Slidorion is a user interface gadget that allows to the visitor of my site to see a set of pictures using the functionality that results mixing a slider and an accordion gadgets. Slidorion is free open source code created by Ben Holland and is licensed under the Apache License 2.0.
"Slidorion" is a portmanteau word made combining "slider" and "accordion".