Web Design Process: Banner Ad and Finessing

lopera shmopera website and mobile responsive
L’opera Shmopera Website (Desktop and Mobile view)

L’opera Shmopera Website. I spent a few hours today in coder’s world. I created different CSS sprites for the nav bar– the other ones were a little messy (different size fonts/kerning, etc.) and notice that I have an extra button with a piece missing so it would integrate into the bugs bunny image (which is also different from the last time). A trick, this image is actually in the container div, so I could have the image flush against the other boxes. I decided to do away with my background pattern in exchange for a flatter color so it wouldn’t be so busy.

I used YSlow to determine that my website is 818.7 K. 598.1K is spent in the fancy ad banner unicorn gif. My instructor said it’s important to know how to reduce your website size and I know that if I got rid of it, I would be somewhere slightly above 200k. I reduced some file size by making fewer colors in my other gifs, less resolution on my jpegs. I kept my CSS sprites for all modes (tablet and phone, too, though those would have been the next to go). At the end of the day, I know that the AntiFloat Co. (my fake advertiser) will pay for the extra bandwidth, so it’s okay. Wink-wink.


(Earlier Post Relating to This Project)



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s