File Structure, Extras, Problems

I want to make sure that my file structure is as organised and optimized as it can.

All the files are in their correct folder and optimized for web design.

Extras:
To make the site as polished as i could i added a few meta tags as wells as a favicon and even an apple icon, correct according to the latest apple dev spec on their website for the latest ipad. link

I also experimented with using the box-shadow as a dynamic vignette over the site, while this looks good it is a big performance hit. To solve this i decided to add toggle button using jquery to toggle the div on or off.

I also placed the button over the calculator and drew a button to match the calculator. I added a little flavor text to hopefully guide the viewer to try it. But until the box-showdow is properly supported its performace is not properly optimized.

Problems:
I had several problems with making this site, mainly performance and optimization related. Using a large picture can cause a slight lag with with website, i feel that the jquery is proberly not a optimized as it could be. Also the files size is probaly bigger then it should be ideally. while i have optimized the images for web, i felt i could not compromise more on the background without loosing the look i am after.

I could have used a tiled background but i did not have the same visual effect.

THe floating nav in the corner looks good, however without the dark image as the background it can appear to dissapear over the white pages. The background to the nav sorted this out and keep in with the theme of the book too.

Also i was struggling with the nav icons, they where too vague, a bit mystery meat-ish but i did not think text would go well with the design. So i stuck to my guns and kept them.

To solve this i remembered that you can add a title=”Developing” attribute into the html, now when you mouse over the icons a description also appears at the mouse after a short delay. I fill this is a good work around and doesnt interup the design.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s