How to create a Favicon?

A small bit of a website is the favicon, and by small, I mean about 16 x 16 pixels small. It adds just a little bit more to your site, for very little effort. For those who don’t know what the favicon is, it’s the little icon for websites that’s generally to the left of the address and is used next to bookmarks to that site. As mentioned before, they have to be 16 x 16 pixels and is supported by all modern browsers for over a decade now as well as being a W3C standard. The only unfortunate thing is that IE doesn’t support any format that isn’t .ico for favicons, despite other browsers allowing many image formats. So to reach a vast majority of users, you’ll be forced to use .ico.

To add a favicon to a webpage/website, placing the code

<link rel="shortcut icon"
 href="http://example.com/myicon.ico" />

In the <head> tag in a webpage will do it. Of course, you’ll need to place the image file in your websites root folder.

Aesthetics or Functionality?

Arguably the most important aspect of web development, other than getting the website working in the first place is whether to place more emphasis on aesthetics or functionality. Personally, I think aesthetics come with functionality, so a simplistic or functional site is aesthetic in a way. Of course, many people discuss the Golden Ratio when it comes aesthetics, but I find that a simple functional website ends up being more pleasant than a convoluted website. Of course, there are exceptions, but a good balance of both is the best for web development.

There are many decisions that sacrifice one for the other, for example, links are far more obvious when they are blue and underlined and that is understood by a vast majority of users. However, this does not necessarily work for many websites layouts, so a choice needs to be made in reducing the lack of functionality by making links less obvious, but increasing the stylisation. However, most users will still find the links when place in obvious spots or are easily differentiated, this site for example uses an obvious navigation bar and highlights words when you hover over them. This is one of the quickest ways to increase aesthetics without sacrificing functionality.

There are many examples that we could discuss when it comes to web development and aesthetics and functionality, like the location of the navigation bar, whether you have automatic shifting slides or slides with buttons, there is no 100% correct answer for all situations. A great web designer or web developer should be able to find the perfect balance depending on the client.

usage of Advertisements

Appropriate usage of Advertisements

Fortunately for web designers, advertisements provide a means of monetising their website, which can often lead to being able to provide more quality content and/or run competitions and so on. Unfortunately for web browsers, advertisements can be beyond annoying and create a massive hassle if the web designers insists on pop-ups or other such things that interrupt the user experience. So yet another aspect of web development comes down to finding a good balance.

There are many ways of delivering advertisements to users, but it has to be balanced out by content. Having a web page covered in flashing advertisements or the annoying variations of “Person discovers something, doctors are mad at them” and so on can and most likely will make users have a bad experience with a site. Web developers have to find ad deliverers which will not be intrusive and complements the content provided on the site, you want the users to feel like not using an ad blocker.

There are many mistakes that many web developers and designers make when putting ads on a page, a personal pet peeve other than flashing advertisements is when the background image links to an ad, so when you want to reactivate the window by clicking it, it opens the ad. Alienating your user base is perhaps the worst way of fostering good will towards your site and content and nobody visits a site for the ads, with a couple of exceptions such as The Million Dollar HomePage a site which sells one pixel for one dollar. Monetising a website isn’t an easy task and many people fail, but when attempting to, the best way for web developers to implement it is by being as unobtrusive as possible.

Designing Web Pages For All Resolutions

There are many important factors to be considered when designing web pages, from browser compatibility, graphic design, optimisation and more, however a big one is designing the web page to work in all screen resolutions. Some people may still be browsing off a small/old monitor (That’s not including mobiles). According to this Wikipedia article the lowest standard computer screen resolution is 640 x 480 pixels, however, the percentage of web users using it are insignificant. The next highest resolution is 800 x 600 pixels, which still has a significant amount of users using it so it is a good base to start from.

Depending on your audience, creating websites for the lowest common denominator is beneficial in fostering good word of mouth for your web site. As that Wikipedia article shows, the percentage of Steam users and regular users using each of the different resolutions. For those that don’t know, Steam is a platform for delivering computer games, which skews the numbers as computer gamers are far more likely to want higher resolution to play their games with. The percentage of general web users using 800 x 600 is 1.03% and 0.17% for Steam users, so keeping your audience in mind, for a gaming website you could probably get away with using a higher screen resolution as your lowest.

Using a lower screen resolution than a web page was designed for can lead to many layout issues, which as a web designer you don’t want to happen. Not only could the layout become broken, but the chances of having to use a horizontal scroll bar are vastly increased, which like discussed in a previous article are a real pain in comparison to vertical scroll bars. Overall screen resolution is just another important aspect of web design and web development and something that web developers shouldn’t forget.

Bad Web Pages

Web development is difficult and mocking those who make attempts isn’t overly constructive, however learning from the mistakes of others is an extremely useful skill to learn in any profession, not just web design. So for our learning and enjoyment, I recommend the website www.webpagesthatsuck.com and their recent article “Worst Websites of 2012”. While an enjoyable read, it also contains a lot of valid criticism amongst the jokes and banter. Personally they were correct with picking the first site as the worst one.

One of the most common complaints of the sites in the list seems to be the excessive amounts of animated gifs or flashing lights/objects. Obviously, this is poor design in general as it distracts from the content on the site and for many people can actually harm them, i.e. Seizures. Not only are they distracting, but they often bring nothing of value to a website, on animated gifs are great on images boards and occasionally on Wikipedia to show something interesting without needing a video, i.e. This gif showing the borders of Australia change over time. In general, however they are a waste of space.

Another of the classic errors seems to be poor navigation, whether it’s because of hard to find navigation links or broken scrolling. A lot of the webpages seem to force horizontal scrolling which is a massive pain in comparison to purely vertical scrolling. A lot of the sites seem to have horrendous navigation links as well, they should be easy to find, but as some of these websites seem to demonstrate they are hidden from the average user.

Ironically, the Feng Shui website is the most poorly designed, for those who don’t get why it’s ironic, a quick google search will tell you all you need to know. On that note, a lot of these websites look like they are from 90’s with poor contrast, i.e. red text on black backgrounds or rainbow coloured backgrounds. In the end, the sites on the list are a good reminder to web developers and designers to avoid certain pitfalls, of course web development is difficult and nobody likes to be told that their work sucks, but a certain level of self-awareness is important in life and work.

Cookies and Web Development

Many lay users get confused by a lot of the names and terminology of the computing world, one of the most prevalent I find in Web Development is cookies, that and a lot of people seem to struggle with “Web Browser” for some reason, but I digress. Cookies are an extremely important part of Web Development relating to user experience, such as remembering session state, allowing them to stay logged in and remembering their setting for that particular site. Cookies are stored in the users web browser and there are a few different types of cookies with varying life spans. You can have cookies, which are deleted after the web browser is closed, or they can persist for a long time and are only deleted after a certain amount of time.

Although cookies sound like they are benign, in the hands of malicious people, they can be used to track a users browser history, which could be used as a way to invade the users privacy. They are a very useful tool and the web is dependent on them for many systems. Most modern browsers have a way of refusing cookies, but this can prevent you from logging into many sites as they require cookies to operate. There has been many different controversies over the use of cookies when it deviates from the norm and is used to track users, for some examples see here.

To create a great websites, it would be remiss for a web developer to ignore cookies as it allows for a great many things to be done when cookies are used responsibly and is another important aspect of web development.

Web Page File Size

An aspect of Web Development that seems to have taken a back seat compared to it’s importance in the 90’s and early 2000’s is web page file size. Since the developed world has vastly increased penetration of broadband users, the need for small web page size has been reduced, however, that does not take into account the users who have to use dial-up because of living in rural areas or a variety of other reasons. Developing countries also don’t have as much broadband penetration as developed countries, and on top of this is the major uptake in mobile web users who often use slow mobile networks to traverse the web.

Years ago, dial-up was the only way to access the web, with speeds of 56k and slower, websites with flashy graphics and videos often took too long to view and would frustrate users, so there was an emphasis on small web page sizes.

This graph clearly shows a massive increase in both file sizes and the amount of objects on web pages over the years for the top 1000 web pages in the world. I distinctly remember going over my download limit on my home connection back in 2010 and being extremely frustrated with how slowly web pages loaded, I can’t believe this is how many rural users feel all the time. Although, I am no statistician, and statistics can be deceiving without the proper context, I can’t see any reason why this upwards trend will not continue for many more years. Although broadband penetration will continue to increase, and mobile networks will become faster, less bloat is always a good thing and something that web developers should be striving for.

Different image formats on the Web

Web Design is a fickle beast and it has many different nuances that may not be apparent on the surface, but are all too relevant. An important aspect of web design is as the title of this blog suggests, the different image formats available to web developers. This blog provides an excellent and in depth analysis of the different image formats and their uses, the blog in question goes into detail about the main ones, .jpeg, .png, and .gif. My favourite aspect of the blog post is the actual image examples they provide, it helps illustrate clearly the differences.

The advantages and disadvantages of the different image formats is an incredibly important thing for any web developer and is a huge aspect of web development. I won’t go into too much detail, as the blog itself goes into that itself. However for a quick rundown, jpeg is an excellent format for providing good looking images with lots of colours and small file sizes. Unfortunately the small file size leads to some detail loss, and there is no option for transparency.

The gif file format is great for making small animations and for not losing any quality while supporting transparency. Of course, its disadvantages include, that it only supports 256 colours, which can lead to a lot of images looking rather funky. Gif seems to be best used for cartoon type images which have limited colours.

The png file format is a lossless image format meaning it doesn’t lose any quality from the original, and it also supports transparency which makes it very useful. It’s disadvantageous include, no animations, high file sizes sometimes and some browsers do not support the file format.

The blog also goes into more detail on a few more file formats, and while aren’t as relevant to web development, it is an interesting read for web developers/designers and others who would just like to know a little more about how their favourite sites might work.

Mobile Web Development

As most people would have noticed over the past few years is the increased prevalence of smartphones within today’s society. Obviously, this comes with lots of advantages, internet access on the go, increased connectivity and so on. However, this presents another user base for Web Developers, the increase of users accessing the web from mobile devices has apparently increased to 13% of all internet traffic according to this article. This is a huge increase from two years ago where it was only 4%. This is both excellent for web designers and developers and an added complication. Not many sites transition well from their desktop form to mobile devices gracefully without some customisation.

Mobile users are an advantageous market to capture for many web developers as they don’t need to be near a PC or Laptop for a user to browse their site and most people have their mobiles on them at all times. Web developers need to make some adjustments for mobile users, because of the smaller screens, less precision when it comes to navigation, and some mobile devices have less than capable browsers. Unfortunately, the largest disadvantage for many is the lack of speed, or lack of connectivity in the first place. Many users can only connect to the internet on their mobile device through Wi-Fi or similar technology, although using mobile networks to browse the internet is becoming cheaper and often included with many mobile plans. Another option for mobile web development is to create a dedicated app for users, this can also bring in extra revenue if developers charge for an app which can make the money and time invested in creating an app/mobile version of a site worth it.

Clearly, this upwards trend of mobile users using the internet will only keep rising as the convenience is incredibly advantageous, especially to web developers or designers. Web development has become even more nuanced, with developers having to consider such a large range of access, from different types of browsers on desktops and laptops to different mobile platforms and even game consoles.

More on Search Engine Optimisation

A few months ago, we wrote an article about SEO (Search Engine Optimisation) because Google had released a video discussing it. While we did discuss the article to some degree, SEO is a lot deeper than that, some might even call it an art. SEO is an ever changing landscape as Search Engines are continuously adjusting their secret formulas to address exploits or to better improve results. Due to the secrecy of these secret formulas, SEO isn’t an exact science, however web designers or developers can work with several base tips that should work across all Search Engines.

Some tips are not as obvious as others, for example one would expect the meta tag keywords to be used by SEO, however due to rampant abuse of spammy keywords years ago, Google stopped allowing it to influence searches. So, one should not rely on the meta keywords tag as a means of SEO. Sure, Google’s policy could change in the future, but in the mean time it means nothing. Another useful tip is using the “Alt” tag when it comes to images, currently search engines do not scan images for what they could mean, so they make use of the “Alt” tag and text around the images as a means of finding out what the image is about. Unfortunately, for web developers, filling in “Alt” tags can be a pain, especially with galleries and galleries of images, luckily the “Alt” tag has the dual purpose of allowing people who can’t see the images, whether because of screen readers, or some other reason, to find out what the image is about.

Another useful SEO tip is using the meta description tag, most Search Engines provide a very small description of the web page, some Search Engines will generate this description itself with information gleaned from the web page itself. Fortunately some Search Engines use the meta description tag to provide this description, which is a useful tool for web designers to try and sell the web page some more. As important as ever, is the <title> tag, which Search Engines also use.

In the end, I have barely scratched the surface SEO, but it is an ever relevant field for Web Designers and Developers, who will want to take every advantage they can to appear higher in Search Engines.