Developer's Blog

Things to watch out for when creating webpages

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

http://yuilibrary.com/yui/docs/cssreset/

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

http://yuilibrary.com/yui/docs/cssfonts/

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
10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
px value % value
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%

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

http://pnggauntlet.com/

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.

Thank you.

Please join us on Facebook for Sleipnir for Windows!


Please follow us on Twitter!

Facebook Comments