Archive for 'Web Design'

MySpace Drag & Drop Editor: SnapLayout.com

Snap Layout

I heard from Justine Ezarik about the new SnapLayout.com site. She actually did a short video with MC Hammer about how great it is. Watch the video below to find out what SnapLayout.com is all about.

Please enable Javascript and Flash to view this Viddler video.

Summary: SnapLayout allows you to make your MySpace page look better in an easier way than before. I guess you could say it’s a snap! (I know, not very funny.) It features a drag and drop editor and a header slideshow that can add a nice touch.

Sorry, I don’t have any inside screenshots. I don’t have a MySpace account. Just trust MC Hammer and Justine Ezarik and try it for yourself. Check out their MySpace pages:

TechCrunch also talks about SnapLayout and includes a screenshot and more details about it.

Keep the Footer at the Bottom

Keeping the footer at the bottom of the page when there is very little content on it can be very hard to do sometimes. I did everything I could think of, but the footer still didn’t stay at the bottom like I wanted it to. Or it would, but it was at the bottom of the browser and would cover content on a longer page.

Working on a client’s website, this was one thing that needed to be done. So, I looked all over Google for solutions and found several. Several solutions that didn’t seem to work. Because I don’t give up very easily on this kind of thing, I kept searching, going over the same solutions again thinking that I just might change something about them and get the footer to do what I wanted.

After a while of searching, I eventually came across one solution. Since I was desperate at that point I tried it out knowing that I could be wasting some more time. Entered in the correct CSS, refreshed the page and the footer was at the bottom of the window. Went to a longer page, the footer was below the content at the bottom of the page. I couldn’t believe it had actually worked!

If you have also had this problem before or just want to learn how it’s done for future reference, check out footerStickAlt. This is a very easy to understand solution!

Free WordPress Theme: The Forest

The Forest is a new free WordPress theme. This theme looks really great and allows you to keep the sidebar looking clutter-free. Check out the demo and click on each of the sections in the sidebar to display it. The only thing I think that should have been done with that is to change the cursor to display the hand, because at first I didn’t know to click on them, I just thought they were empty.

If you would like to change that, just add this to the style.css under the appropriate section (sidebar) so you can find it later:

.trigger {cursor: pointer;}

All this does is styles the trigger class in the sidebar to display a hand, instead of the I-beam. If you have any problems, please let me know!

A Few Great Tutorials

Here are a few great tutorials for doing things with CSS! I hope you enjoy them as much as I did!

  1. Using PHP to generate CSS is a great way to centralize your color definitions just by using variables. One fun and possibly useful thing to do with this is automatically generating a color gradient from just one base color! Read this tutorial to generate CSS using PHP.
  2. Create a Lightbox effect with CSS, without using any JavaScript! This is one tutorial I am definitely going to try out, because I don’t like to use JavaScript for all those neat effects that are becoming more and more common on websites. Read this tutorial to create a Lightbox effect with CSS.
  3. Want to create tables using CSS? There’s an easy to read tutorial over at Veerle’s blog. Read this first tutorial and then the second tutorial for creating tables using CSS.

Best Designs, Worst Designs

Recently I was browsing through websites as I usually do. Once I came upon a very ugly flashy website, I didn’t even bothering reading what it had, I moved on. So, I thought I would list ten websites with the best designs and then ten with the worst designs. Any website not listed here does not mean it’s not the best or not the worst! But, after seeing the ones on these two lists, you should be able to figure out what your website falls under if I was to visit.

Please note: the best designs may not be the best, but compared to the worst, they are the best!

I will start with the best designs, because they deserve to be at the top of the page, not the bottom.

Best Designs

  1. Vitamin
  2. 9rules
  3. Design Snack
  4. Elixir Graphics
  5. Flash Life
  6. Veerle’s Blog
  7. WomensWallstreet
  8. NetResults
  9. Finch
  10. Blogsolid

Worst Designs

  1. Profile Glam
  2. Cute Quote Graphics
  3. Best MySpace Goodies
  4. Worlds Worst Web
  5. RogerART
  6. Porla Puta
  7. Hypotheticals
  8. Worst Website
  9. Freemap
  10. AJFF

The reasons for the website under the worst designs should be obvious. I’m not trying to offend anyone, but too much animation, tiled backgrounds, bright colors, etc. just don’t work and make it hard to read the actual content. A couple of the links show you what you shouldn’t use.