What Web Developer Should Know
Web Development can give sometimes a really nice headache. The amount of knowledge that you must have, or at least be aware of, is really big. Here are a “few” things that a Web Developer should know / remember.
A few words about screen resolutions
Already at the design stage, you can’t forget that the site will look diffrent on monitor with a 1024×768 resolution and diffrent on 1920×1080. Between the two of them is 900px diffrence! It’s like a site for 800×600 resolution. And the resolution range is really wide. Before you start the design it’s worth to check current statistics on the used resolutions, and then choose the lowest of them, and treat it as the output resolution. It is also good to plan how it should adapt to higher resolutions. Although it is mostly a web designer’s job, the way the site should work in a larger / smaller resolutions, the methods of how to do it, should be discussed with the person who will put the site together.
For this purpose, you can use statistics at StatCounter.
Top 10 screen resolution in the world July – September 2012. Source: StatCounter.
And so, in the statistics of the last two months you will see that the most popular resolutions are 1366×768 (nearly 22%) and 1024×768 (around 19%). But, for example, 1920×1080 has nearly 6% share and there is still more than 18% of the “Other” resolution. Of course, it may be different in Europe, USA etc. You can always restrict or search statistics for the region from which the potential user is. The differences are not significant but it don’t change the fact that you should take into consideration different resolutions.
This is one of those issues where the customer with a larger screen, will necessarily want the web site to look beautiful in its resolution. This is the case where you gently need to talk him out of it and make him realize that he is not the most important recipient of the web page (even though he is the one that pays ;o)).
Do not forget about smartphones and tablets! These devices also have various resolutions. You may soon find, that we will have very high resolutions, as well as very little ones, both of which you will have to keep in mind at the same time and sometimes even prepare separate layouts. But when I come to think about it, it is already the case and it calls – Responsive web design.
My window to the internet – the web browsers
Firefox, Chrome, Opera, Safari, IE7, IE8, IE9, the browsers on mobile devices, etc. I didn’t mention IE6 on purpose, as it should not be supported a long time ago – unless a large percentage of the web site viewers actually use it. Then you should consider whether it is worth to support IE6, compared to the amount of work that needs to be done so that it all works properly. I do not list versions of browsers such as FF and Chrome as they do really good job with updates to a newer versions.
Let’s get to the point. Is there anyone who has managed to code a site that would present well on all browsers at once? I’m not talking about the end result of course, when the page is already published on the server. Usually while creating an HTML and CSS we keep checking how it looks in our favorite browser (or how it works in IE, as this is the most problem causing one). Sometimes, you may check in other one, but that is it. At the end when the page looks all right, it’s time for a test. We open the web page in the browser, which we have not tested earlier and it turns out that everything is moved. A margin appeared out of nowhere, somewhere a border or a pixel which moved the whole box to the place where it shouldn’t suppose to be. WTF? Exactly…
You can’t forget that the web site may display differently in each browser. Despite the fact that such organization as the W3C was established, which helps to standardize the issues related to HTML and CSS, there are still some of them, that are left for browsers how to interprete and implement those issues. It happens less and less, but it is still problematic. I do not mention HTML5 and CSS3, how it works and if it works. It’s quite another matter, I’ll get to it later.
Is there any middle ground? Not really, except writting your code, accordance with all the rules. You would think that would be enough. But no one is not infallible, he happens to forget, or miss something, make a mistake, which in one browser will be skipped and in the other – it will not. This will cause the entire web page to ‘collapse’, and it is due to the different way of handling errors. Some browsers are more forgiving of some errors and “are trying to fix it” and some are not. If all of them treated errors in the same way, then perhaps we wouldn’t have such problems, but to have that, it should have started at the very beginning. Even if something in the end looks great in IE9 and other browsers, there is a 99% chance that there will be a problem somewhere in IE7. ;o)
JavaScript interactions and their absence
JavaScript has recently gained in popularity even though it continues to be laughed at by some developers. This is an easy way to implement some animation to the web site, or an interaction with the user, without having to refresh the web page. More often you can see that some people forget about users that do not use the JS, or more and more people believe that without JS you can not create a “modern web site”.
I will not change my opinion. JavaScript is an ADDITION. You should not rely on it, and you should always provide support without JavaScript. There are users who use the Internet without using JS (believe me!), as well as those whose JS is disabled for safety reasons. A lot of the attacks on the web sites, or users themselves, are conducted through JS. Not enough reaseons? Do search engines use JavaScript? No. Next. Will the JS validation prevent you from sending invalid data? If anyone thinks the answer is – yes, it would be better not to give an answer at all … For me, you need a really good reason to not provide a handling when JS is turned off.
SEO and website optimization
“SEO starter Guide” is a very nice source of knowledge prepared by Google, as well as its entire support center. Because HTML5 is knocking to our door, certainly the SEO professionals tips will slightly change, as the search engine algorithms will have to be changed.
By the way, it seems to me that SEO and search engine robots themselves have a positive impact on increasing the accessibility for people with disabilities. Just because, it is mandatory to use headers and alternative text. Of course, only if content was created to serve users, and not search engines. The biggest mistake that some people make is to create content and headlines for search engines, not the user. The truth is, that if we think about user and so we willl prepare our page and structure, we have greater chance for success. But it depends on the whole team, which is working on a website and the client, and not only web developer.
Safety above all
Less frequently we create websites that don’t have some backend based on, for example PHP. Even if it’s a simple contact form we must be aware of the possible security problems. It is a very wide topic that can not be summarized in a few sentences or paragraphs. However, we should realize that the web sites are vulnerable and have weak points. Depending on how complex our website is, it is worth looking if we do not leave any holes that someone would be able to use in the future. SQL Injection, Code Injection, XSS are some of the vulnerabilities. Everyone should have a minimum knowledge about the security risks (if any) in this section for which they are responsible.
New and old – few words on HTML5 and CSS3
HTML5 and CSS3 are a blessing and a curse. Even if HTML5 will reach the recommendation status in 2016 (yet quite recently, it was 2022 ;o)) it will not change the way in which we should act now. If so, then why wait? Pay attention to what elements of HTML5 are already supported by most browsers and start to use them. There is one ‘but’. Although some elements have already been implemented in latest browsers, they will not work in the old ones. As well as only some of the browser may support certain element, and some may not. Therefore, if we decide to use HTML5, it is necessary to provide backwards compatibility. Although I do not think it would change. Even if in 2016, HTML5 will be in general use, there will still be users who have older versions of browsers (there are still those who use IE6 …). Obviously it is up to us (and the client) to decide whether you need to ensure backward compatibility, maybe with a large text on half a page “Update your browser”, or do not bother with it at all. Remember however, that sometimes people do not have full control over the software they use. Thus, the decision should be based on the analysis of the group of users to which the page is dedicated.
While HTML5 should be provided with support in older versions of browsers (because of the new elements), is it necessary in CSS3? It depends. If it highly affects how the website presents itself, it’s probably necessary. If a browser does not support CSS3, is creating rounded corners and super-coolest display font by JS necessary? Probably not. It’s an additional code which is not needed, and which may also slow down the page. Ensuring the backward compatibility has its drawbacks. So it is necessary to identify these elements which significantly affect how the site works and looks, and provide support for them. Modernizr will help with detection and handling of missing elements HTML5 and CSS3.
Summary
Certainly, the above topics have bearely been touched. I think that you should learn some of the issues the hard way ;o) For larger projects, the responsibility for each of these issues can be divided among your team. However, to create a simple website, two people are eonugh – a web designer and a web developer. There is no way that everyone knew everything and was the expert in it. Everyone feels better in some subjects and is trying to perfect them. Sometimes however, to be aware of a certain matters is more important than the total lack of its knowledge..