Today, I would like to introduce a few points I watch out for when creating webpages.
The following is the perfect next step for those who already understand HTML, CSS, and cross browser rendering.
Reset the CSS style
Firstly, one thing to do before creating CSS is to reset the CSS style.
This is necessary to avoid differences in display due to differences in the default style values across browsers.
There are various ways to reset CSS, but for those of you who are not so familiar with this topic, I recommend trying out the CSS reset method posted on the famous YUI (Yahoo! UI Library).
CSS Reset – YUI Library
It is quite easy to use. Just copy the reset code listed in the URL above to your CSS, or add it to <link> tags in your HTML.
There are some parts of CSS that are not necessary to reset, so if you are one of those people who are very specific about things like that, you can also make adjustments to the CSS reset code to how you feel is suitable.
Unify the font sizes of web pages
Another thing to do before creating CSS is unifying the font size of web pages.
If you do not unify the font size, the displayed font size may differ depending on the browser of the user resulting in certain fonts being difficult to read and layouts being out of place.
There are also many ways to prevent this problem from happening, but like with the CSS reset issue, if you are not familiar with these methods, please try out CSS Fonts available at YUI (Yahoo! UI Library).
CSS Fonts – YUI Library
Just like with the previous example, copy the the reset code listed in the URL above to your CSS, or add it to <link> tags in your HTML. However, just doing this will result in everything being unified as 13px.
If you want to specify the size in CSS Fonts, instead of “px”, please use “%”.
The equivalent “%” value for each size is listed in the table below.
|px value||% value|
|px value||% value|
You can unify everything by specifying the “%” value like above, but please remember that as the value is a “%”, if you use it twice, thus creating a double-layered “%” value, the size will differ to what you intended.
Optimize images to be used on webpages
Many images are often used on webpages, but these images are often not optimized resulting in large transfer sizes and long waiting times for image rendering to finish.
However, if you optimize images, their sizes can be greatly reduced with minimal deteriation in the visible quality. I prefer to work with PNG images so I use software to optimize PNG files.
There are some famous software for optimizing PNG images such as OptiPNG and PNGGauntlet which can reduce file sizes by 60%~90%.
In PNGGauntlet you can also remove data from PNG files other than the image data, so if you are not sure which software to use I recommend trying out PNGGauntlet.
PNGGauntlet – PNG Compression Software | BenHollis.net
If you are having trouble getting started you can find many sites on the web that explain how to use PNGGauntlet.
Make sure to perform a cross-browser check
How do you perform cross-browser checks?
There are many ways of doing so such as using tools to efficiently check or actually display the content in each individual web browser, but I recommend checking in each individual web browser at least once before publishing your content.
It is true that using tools improves efficiency, but there are occasions when the contents is displayed differently in the actual web browsers.
There are many other things that should be watched out for when making webpages, but I’ll leave those until next time.
Please join us on Facebook for Sleipnir for Windows!
Please follow us on Twitter!