Website inspirations #1

In the last couple of days, I have tried to dust off my rusty web design techniques, and tried to create a website for someone I know. The website is not complete yet (mostly the actual text contents, and SEO remaining mostly), but I wanted to list my inspirations here.

First of all, in the past, I always changed my design quite a few times after seeing other websites. It took me quite a while to decide on what the website would look like. This time, I searched for templates instead.  I finally settled for a template I found at Web Designer Depot. The template was actually a photoshop template, but I did not use the actual template, just the idea. I achieved a similar look and feel by just using css. The actual template and the ‘final’ product are at the end of the blog (you will still see some dummy text and images).  

Rest are a few good tips I used:

  • JQuery slideshow from here. I actually just used the slideshow, just replacing with my images, and required sizes
  • I tried the JQuery Menu from here, but finally decided against using it, as the template I was using was more simplistic than what this menu did.  Instead, I just used css to generate hover effects
  • CSS triangle for a submenu from here
  • Achieved rounded corners for div by using background color, and borders like so: .rounded {background:#555555; border: 2px solid #555555; border-radius: 5px; }
  • Aligned div side by side by using “overflow: hidden” in parent, and float in the child divs to be aligned, as suggested here. I found later that using “display:table-cell” in the parent div also achieves the same result, but did not quite work for me in a quick try, so I left to using float. 

Still under progress

  •  host the website in google while the acutal domain is being sorted out. A guide is present here. Currently I have the web uploaded, but there is still some google settings that is preventing the website from being shown, so working on that.  I installed Python 2.7, although a much later version was available. Also, I had to change the Preferences in the Google App Engine Launcher in order for it to recognize that Python was installed in the system!
  • make sure when I add the contents that the SEO tips are followed. Any good tips on that anyone? 

 

Actual template:

Image

Final Product:

Image

Advertisements