The PNG image file format is not new to the web. It originally developed in the mid-90s as a solution to the shortcomings of the traditional GIF image file format. However, because early browser applications offered only spotty support for the PNG’s advanced features, web designers, developers were limited in its use.
One large hurdle in particular faced by PNG’s was Microsoft Internet Explorer (IE). Far and away the most popular browser, IE offered particularly poor support for the file format. However, with the release of IE 7 as well as several JavaScript hacks, this has all changed, and PNGs are more popular than ever.
But who cares!? And besides being one letter short of my favorite 1972 video game, what makes a PNG so great? Below, are three reasons why PNGs are the best image format since the Polaroid.
They’re See-Through! (Alpha Transparency):
As compared to the GIF, PNG offers a far less basic form of transparency. With GIFs, a particular color (or colors) is able to be saved as transparent, leaving colors either entirely opaque or transparent. There is no in-between.
PNGs have a distinct advantage in this area. The PNG file format supports “semi-transparent pixels,” meaning a PNG can be saved with a soft drop shadow and floated over any background. It can be used as a watermark on a textured or gradiented background. It can even be smoothly faded from fully opaque to transparent, revealing the web page contents beneath.
Summerour.net features a logo which demonstrates this function. The homepage layout called for a logo with a soft drop shadow over a textured background of architectural sketches that regularly change. Using a GIF or JPG would be highly impractical, because every time the image changed, the logo is background would need to be edited. A PNG, however, is floated over the image with a faded drop shadow, making the task quick, simple and dynamic. PNGs make the look and feel of your page flexible.
They Look Great! (Lossless Compression ):
Every time a JPEG is saved and compressed, it loses some of the original file’s information and the image quality degrades. The GIF file format offers lossless compression (so the file can be saved and resaved without losing image quality), but it only supports a limited 256 color palette, making it useless for full-color photography and other such complex images.
PNG offers the best of both worlds. It displays full color photographic images, like the JPEG, but it also supports a managed color palette, like the GIF format. While the PNG will typically have a larger file size than the JPEG for photographic images, it does have a distinct advantage: its compression is lossless, meaning images never degrade in quality or suffer from “compression artifacting” which affects many JPEG images.
The results are crisper, brighter images that will on your pages unlike ever before.
They âre Self Optimizing! (Gamma Correction ):
Adjusting the brightness and contrast of images to look correct on a wide variety of monitors and operating systems is a common problem facing web designers. This problem is primarily related to different monitor Gamma settings.
Gamma is a method monitors use to distribute their luminance evenly across the display. Unfortunately, different operating systems (in particular the Mac and Windows) use different Gamma settings. So an image that is color-corrected for the Macintosh operating system may look too dark on the Windows operating system and vice-versa.
Macintosh Tips
...now browsing by category
Use Png Images Format in Your Web Designing
Tuesday, February 2nd, 2010Surf Safety Tips
Thursday, December 31st, 2009The internet can be fun and educational. But it can also be dangerous and threatening. Largely unmonitored and uncensored, it is a mixed environment which can be a source of material and intellectual sustenance for you, but it can also bring a lot of annoyance with it, and even cause damage to your near and dear ones.
There are certain Surf Safety tips you can adopt to avoid the typical pitfalls that await the careless surfer on the web. First, there is the nuisance of the unwanted pop-up. These can sometimes be of a pornographic nature, causing undue harassment and embarrassment in public situations. In order to suppress these, use a modern browser like the Internet Explorer enhanced with Windows Service Pack 2. An even better choice is the freely downloadable Firefox browser.
Also beware of spyware programs and other malware that can get installed on your computer without your direct endorsement. A useful strategy is never to click on any window that offers such a service unless it is from a known and trusted source. Also, use one of the freely available spyware removal programs to rid your system of these threats.
Viruses, worms and trojans are rampant on the web; an unprotected Windows system can get infected in a matter of minutes after getting connected to the internet. Install one of the commercial anti-virus solutions from Norton, Macafee or other companies to protect yourself from this kind of threat as far as possible. Very good free anti-virus products are also downloadable from locations on the internet.
A more radical strategy to beat the threat of viruses and worms would be to opt for an Operating System other than Windows. If you aren’t inclined to buy an Apple Macintosh machine, you may consider installing Linux on your existing computer. No real virus has yet been invented for the Linux environment, and it is unlikely that one will appear as a real threat in the near future, because of the excellent inherent security model of that system. You can choose from a number of free Linux systems. If you can’t do it yourself, you can find a paid support provider who will install and configure it for you.
Use a firewall to rid yourself of unwanted connections to and from your computer. The firewall built into Windows XP is effective, but not configurable. For a more flexible solution, try ZoneAlarm, a feature-limited demo of which can be downloaded here. If you’re using Linux or at least using a Linux box as a gateway, you can experience the great power and configurability of its built-in iptables firewall.
Whatever browser you use, it is best not to keep checked any option that will let it download and install programs unsupervised. Many harmful programs get installed in this way.
If you’re using Windows, create a non-administrator account for yourself and use that for all normal purposes. This way, any virus or malware that gets in shall have a very hard time getting activated.
Under Windows, most harmful programs use a particular feature in the Internet Explorer browser to get installed. This feature is known as ActiveX. To avoid this weakness, use any of the free non-Microsoft browsers available. Firefox is one, a link to which has been given above.
A new type of online threat is known as phishing. Fake web pages are constructed that look like your bank’s website, or that of your stockbroker. You are invited to enter your credit card numbers and other sensitive information, which are then used for illegal purposes. Always double-check the address whenever you are asked to enter any such info. Firefox has an inherent capacity to detect phishing sites.
Never download files from unverified sources that have a dot-exe or a dot-com extension. These are the commonest carriers of viruses and other malware, and can cause a lot of grief if handled by inexperienced hands.
A to Z of Web Designing
Thursday, December 3rd, 2009Think small, like 10-12KB per image. Yes, depending on the source, the number of broadband users is going up. But slow pages are still really annoying, even if you’re on a T1. And huge images are a primary cause of slow pages. It’s easy to optimize your images.
Always use graphics that fit the content. Just because you have an adorable photo of your dog doesn’t mean you should have it on your Web site about Web Design (sorry, Shasta…). The main exception I would make to this is for “design” images. These are photos or graphics that help make up the design of the page, and are not intended to illustrate the content.
Do not use images that blink or move or change or rotate or flash or do anything on your page. Or use them sparingly. There have been many studies that show that flashing graphics are distracting and annoying to people. In fact, in one focus group I watched the browsers actually physically cover up flashing graphics so that they could read the rest of the page.
Layout
Stick with standard layouts. I’ve seen some pages that use 6 or 8 frames on one page. Another site used a layout where you had to scroll to the right to read everything on the page (but you never had to scroll down). These layouts are cute, and you might find them fun to build, but they will drive your readers nuts. The reason that the 3-column layout is so popular on Web sites and newspapers is because it works. You might think it’s boring, but you’ll keep more readers if you stick with something simple that they can understand.
White space is more than the CSS property, it is a function of your layout. You should be aware of the white space on your pages and how it affects how the content is viewed. White space is just as important in a Web layout as it is in a paper layout.
Use your graphics as elements in your layouts. Graphics can be more than just graphics when you use them as actual elements in your layouts. An extreme example is when you wrap text around an image, but any image you have on your site is a layout element and should be treated as such.
Fonts
Serif for headlines and Sans-Serif for text. If you’ve taken any type of print design, this might be exactly the opposite of what you were taught. But the Web is not print. Sans-serif fonts are much easier to read on computer monitors because the screen resolution is not as high as in print. If you use serif fonts for normal text, the serifs can blur together on the screen making them hard to read. Your printer friendly page should use the opposite fonts (serif for headlines and sans-serif for text).
Limit the number of different fonts. One of the best ways to make your Web site look amateurish is to change the font over and over. Sure, it’s possible to do, but limiting your page and site to 2 or possibly 3 standard font families is easier to read and looks more professional.
Use standard font families. Yes, you can choose to use “Rockwood LT Standard” as your font on your page, but the chances that one of your readers will have that font as well is pretty low. Sticking with fonts like Verdana, Geneva, Arial, and Helvetica may seem boring, but your pages will look better and the designs look correct on more browsers.
Advertising
Don’t be greedy. If you have any control over the number of ads on your site, be aware that your readers are not coming to read the ads, they are coming for the content. If the ads overwhelm the page content, many readers won’t stick around long enough to read your purple prose. Yes, it’s important to make money from your Web site, but if your ads drive people away, you’ll ultimately lose money.
Treat ads as you would any other image. Keep them small, avoid blinking/flashing, and keep them relevant. Just because you can have an ad on your site, doesn’t mean that you should. If the content is relevant to your readers, they’re more likely to click on the ad.
Remember Your Readers
Test your pages in multiple browsers. Writing Web pages that work only on the most modern browser is both stupid and annoying. Unless you are writing a Web site for a corporate intranet or a kiosk where the browser version is completely fixed, you’ll have problems with people not being able to view your pages.
The same is true for operating systems. You can’t assume that just because your page works in IE5.0 for Windows it will work in IE5.0 for Macintosh.
Write content that they want. Unless you’re writing a site purely for yourself (and if you are, why is it posted to the Web?), make sure that your content covers topics that your readers want to read.
Use the Right Font to Transform Your Web Design
Monday, November 30th, 2009When designing your web page, it is important to understand how your fonts will affect the layout of your imagery and web design. It is amazing what the right font can do to your product. You can essentially affect the way readers interpret the information you are presenting just by the font you use.
Most people have either a Windows or a MacIntosh machine at home, so when choosing a font, knowing the most common font families on both these systems will make life a lot easier for you, guaranteeing clear, consistent design.
If you examine both machines you will see that there are numerous common generic fonts of the same name on each, but these fonts can actually look different when you use them.
To counteract this problem we recommend you include both a Windows and a MacIntosh font choice in your font listings. This way you will not be surprised by how your page looks in various situations and you will receive the best possible results from your site.
A few common examples are:
Arial = Sans Serif
Comic Sans MS= Cursive
Courier New = Monospace
Impact= Fantasy
Changing your text to your favourite font will definitely make your webpage look great on your browser, but if your readers don’t have the same font as you, their computers will adapt to the nearest option in the generic family. When compiling your list of fonts, include a standard font near the end of your list and a generic font as your last choice. By including these in your list, you can have your favourite fonts, but also know that if a reader does not have the same font as you, your web design will still look good on their browsers.
When choosing your font, it is also important to bear the syntax of the font property in mind. Using CCS, you can experiment with all their great features which are easy to use and will allow you to add additional designs to your page.
The font property is a shorthand property used to set the following styles of fonts: font-style, font-variant, font-weight, font-size, line height and font family. Of all these options the font-family and font-size are the minimum styles required for this style of property.
To make font property work on most browsers, it needs to be written in the correct order, for example: font: 1em “Times New Roman”, Times, Serif;, but there are also other factors to consider, such as line height, bolding, small capitals, italics which can be easily added to the previous programming by making a few alterations to the ordering:
Line Height: to add line height, place it after the font size preceded by a slash
Font: 1em/1.5em “Times New Roman”, Times, Serif:
Font Bold: font: bold 1em/1.5em “Times New Roman”, Times, Serif:
Small Caps: font: small-caps bold 1em/1.5em “Times New Roman”, Times, Serif;
Italic: font: italic small-caps bold 1em/1.5em “Times New Roman”, Time, Serif;
By using these basic instructions you are half way to guaranteeing that your web design is viewed the way you want it to be seen. But if you are interested in using your font style to increase the success of your graphic design, by also introducing font-style and font-variant, they can really make a difference to your page:
The font-style – defines whether the font is italic, oblique or normal
E.g. to use Italic font style, the programming you must write is:
The font-variant – defines whether the font is normal or small-caps
E.g. to use italic font style, you must write:
Font weight – defines how light or dark the font displays on your webpage. You can choose from normal, bold, bolder, lighter, 100, 200 to 900 and lastly inherit
E.g. normal corresponds to 400 weight
Bold corresponds to 700 weight
So if you want a bold font weight, you must write:
Font Size – ranges from , , and
E.g. for absolute size write:
Line-height- sometimes described as ‘leading’, line-height defines the height of each line. From a choice of , ,
E.g. Uppercase:
Font-family- defines the font family that the text should be displayed in and follows one simple formula [family-name| generic family-name]
E.g.
These 6 basic tips can make the difference between your readers making a purchase to viewing another site. All you need to do to make them work to your advantage is simply change the phrasing on the part of the programming and your web design will successfully be received by most computers.
For more complicated professional designs, Web design firms can help you translate your ideas, product or company onto the internet fast and effectively.