I followed the examples on the book and the webpage came out nicely with rounded corners. The book taught us using images for the rounded corners by positioning them to the top right, bottom left, etc. Instead, for my homework website, I used CSS3 for the rounded corners. Print stylesheet also attached on my webpage.
Rounded corners
Single rounded corner
Single rounded corner & Rounded corners:
Chapter 6; No Images? No CSS? No Problem!
In my homework website, I followed those examples. Make the website still works without the fancy styles. To ensure content is still readable, we need to check for these in the websites: CSS, no images, validate, font sizes. We use the 10-second usability test.
No CSS. By going to View > Page Style > No style, the CSS stylesheet will be disabled. Therefore, it will show the website with its content only. The navigations are still visible in bulletpoints. The headers are still in larger size or bolded. Everything is in the page.
No images. Go to the toolbar on top of the browser. Go to Images > Hide Images. For Firefox, go to
Tools > Options > Content > uncheck "Load images automatically"
VALIDATE! This website is a good place to validate your website. Go to http://validator.w3.org/ to validate HTM. For CSS, go to http://jigsaw.w3.org/css-validator/. Make sure your HTML and CSS is validated, so no errors. Be sure to have this in your HTML:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Font sizes should be able to scale if a user want to increase the window size. Using px or em should be good.
No comments:
Post a Comment