Learn 5 simple tips you can do in Photoshop to make sure you, the web designer, are using in order to create efficient, user-friendly web sites.
1. 1024 pixels wide or less – If the is one thing that web site visitors hate, it’s having to scroll left and right in order to view a whole web page. Make sure if you are designing a web site in Photoshop, keep it to 1000 pixels wide or less. This allows users using 1024×768 monitors to see the whole page and leaves a little room for window edges, etc. To be totally safe, you may decide to make your pages 800 pixels wide, however as only 8% of site visitors are using an 800×600 resolution (according to a January 2008 W3Schools report), we may finally be safe to make the jump up to 1024.
2. Always “Save for Web” – Even in the age of ultra-fast internet connections, page load time is still an issue. Photoshop helps out a lot with this by exporting images with very compact file sizes using the “Save for Web” mode. A great testament to this is saving the same image using “Save As” and “Save for Web” as 2 JPEGs with the highest quality setting. The image outputted by “Save As” will have a much larger file size. NOTE: Only use “Save for Web” when file size is more important than image quality. The images exported by “Save for Web” will see a slight quality reduction, but when designing for web, it`s something we must accept.
3. When you do “Save for Web,” save the right format – Photoshop`s “Save for Web” feature lets you choose between JPEG, GIF, and PNG files, and when exporting slices for web design, we are not limited to choosing one format for the entire page. This is why it is always a good idea to check the output file size (in the lower left corner of the `Save for Web` window) for various slices. Try different settings for each slice to get the right balance between file size and image quality. PNG and GIF are best for images with only a few colors; JPEG is better for images with a lot of color or tonal variety.
4. IMG ALT – One HTML attribute that many web designers sadly overlook is the IMG ALT attribute. The ALT attribute is not only good for search engine optimization, but is also a necessary feature for web site visitors with disabilities or those who are on a slow connection. You can set ALT attributes of slices by double -clicking then using the Slice Select Tool. The value should be a description of the image in the slice, or, in the case of a slice containing graphic text, what the text says.
5. Be careful with transparent PNGs – If you are exporting PNGs with transparency from Photoshop for web design use, make sure to test the page in all common browsers before taking the site “live.” Internet Explorer 6 and lower do not support PNG transparency out of the box. This is, unfortunately, a major issue, as the majority of web users are still using it – despite its status, in one man`s opinion, as the worst browser ever made. Luckily, there are several scripts one may use in their HTML code to fix the PNG problem in IE6. A quick Google search for “ie png fix” will find the latest fixes.
0 comments:
Post a Comment