Attackr.com » Developer Portal for web designers, developers and programmers

How To Fix Your Sucky Website With Minimal Effort

Gregory Milby — Tue, 03 Mar 2009 16:16:59 +0000

We do not have en excuse for having a sucky website anymore. There are so many resources on the internet that anyone can have a decent looking website with a little work. Some people have a natural gift for creating a wicked website – while someone may be a very strong coder without an artistic gene in their body. With a little planning - anyone can have a website they can be proud of – or at least not embarrassed with anymore.

A site like this one would be a good place to start to get the feel of how to use a template before experimenting with a more complex css templates like the ones found here. Swapping around your look & feel gets easier once you get used to how CSS and xhtml are laid out. You’ll soon find that most of the templates start to look alike other than color choices, graphic style and flavor (size of object/text/etc…).

The template resources are virtually endless. This google search produced over 500,000 pages of free css templates sites. Like anything else, just because it’s free doesn’t mean it is good or ‘what you should use’. So if you have any choice dilema’s while browsing templates, remember to try to pick simple to start with until you get used to the designers layout style.

If you have a good design, but need to spruce it up a little, there are a lot of resources on the web for creating cutting edge menu navigation, editing/creating graphics, and a mind boggling 16 milion sites waiting to give you ideas for gadgets & widgets to add to your site.

There is no crime in asking for advice either… There is a seemingly endless line of patient people waiting to help you. Just a word of advice, try to examine the work of the person you’re about to ask advice of – they may not share your same goals, taste or style. If you’re not sure how to view their work – ask them. They will usually have several samples they will be proud to show you. If they don’t – move on to another web design advice forum.

There are some complete solutions out there – just in case you are at your wits end – and just want to be free to focus on the content. Don’t forget blogs (in the rare case you’re delima can be solved with one of these type of solutions). Likewise, there is usually some really good design support for some of the bigger solutions like Joomla or WordPress.

Reference used for this post:

http://www.splashup.com/

http://www.joomla.org/

http://wordpress.org/

http://www.google.com/webhp?hl=en

http://www.alistapart.com/

Web Design For The Beginner

Len Saunders — Tue, 26 Aug 2008 01:04:41 +0000

Web Design For The Beginner

I am in the field of children’s health and fitness, but I just love web design and photography. With no experience, many ask me how I have created some of my web designs, which to me, are still beginner level, but attractive and usable.

The first thing I tell someone is to go visit opendesigns.org and download a few templates. Once you download the templates, unzip them to your desktop. Look for the file called index and open it up in a web editor. I like to use Notebook++ as my HTML editor, which is a free download.

In the Notebook++ program, you can change all the text you’d like to personalize your new web site. I personally like to see what I am doing, so I also open up the index file in my Firefox browser, and click the reload button to see the changes I have made as I go along.

Now, for the newbie, you may want to experiment with the .css file that is enclosed in your download. The .css file controls many things on the site such as the font, headings, colors, forms etc.

Many of the open source designers will tell you in the .css what each part of the .css controls, so you know what you are changing. The key thing is to always backup what you are doing before you make the changes, so in case you mess up, you have the original .css.

I must have done this a least 100 times before I started to try and create my own web template. Once I felt comfortable with this, I found a site by another Open Designs member called, Tinderbox.

On this site, you can find various plain and basic web layouts for you to start to personalize. If I am brave, I may visit css play to try and place in a cool navigation system.

Once I complete the design, I have a couple of my web friends check it out, then submit it to Open Designs for others to download.

If you are interested in learning about web design, this is a great way to start. You can see some of my work at: web.lensaunders.com

Combining flash with HTML/CSS

niemi — Wed, 14 Nov 2007 17:10:13 +0000

Many factors could make you refrain from designing sites completely in flash.

Maybe you like to grab and customize free HTML templates, maybe it’s the fact that you need your content easily to be probably indexed by search engines or maybe you just don’t like flash because it has become tantamount to an inferno of noise and crappy animations.

As a fact there could be various reasons which could make you abstain from designing sites completely in flash. It’s not my intention to convert you to a group of flash lovers.

I’m here to tell you how to combine the best of both worlds. Stick to your HTML layout and then apply the finishing touch by replacing the header with a flash animation.

Well, it could be anything but I think the header as a natural choice so that’s what we are going to focus on for now.

What do we need to get started?

PREPARING OUR HTML TEMPLATE:

Grab a free template. For this tutorial lets use this one designed by Rambling Soul. Unpack the files.
Open index.html and style.css in your favorite text editor. Notepad is suitable for the basic operations we are going to perform.
You need a piece of JavaScript now. Get it from here and unpack it to the same folder the html files and the .css file are stored.
In index.html add this line in the header right before:[CODE1]
Delete everything inside [CODE2], that would be this: [CODE3]
Now let’s add the code that calls our flash animation. Copy the following code and paste it to the very same location from which we just deleted a couple of lines:
[CODE4]
In style.css find this line: #wrap #header { background:url(images/header.jpg) no-repeat; height:229px; margin-top:10px;}
Delete background:url(images/header.jpg) no-repeat;
Now we have removed the original image from the header. The script that we linked to in step 4 and made use of in step 6 will embed the flash movie as seamless as possible in all major browsers. You can just as well get used this way of embedding your flash files as it’s better than any other way.

THE FLASH HEADER, REUSING THE CONCEPT €“ PART 1

We have prepared our template for our flash header now. Let’s create the flash header. Open header.jpg located in the images folder. You can perform the following steps in almost any image editor, for this tutorial I’ll use Photoshop.
Because Ramblingsoul has created such a beautiful frame, let’s reuse it. Select “Rectangular Marquee Tool” (Hotkey is “M”) and select the whole blue area (the actual image inside the frame. Select it all including the cute strawberry-guy. Don’t select the bright frame).
When this area is selected go to “Select” >> “Inverse” (Hotkey is CTRL + SHIFT + i). Press CTRL + C to copy the selected area.
Go to “File” >> “New”. Say “OK” and press CTRL + V to paste our frame.
Go to “File” >> “Save as” (hotkey is CTRL + SHIFT + S). Name it “frame” Choose GIF as format and save it to the images folder. (The template you downloaded contained this folder)

THE FLASH HEADER, NOW IT’S GETTING FLASHY €“ PART 2

Now open Flash CS3 (or any previous version you might have).
Create a new document. (“File” >> “New”) Select ActionScript 3.0 or 2.0, it doesn’t really matter.
Press CTRL + J to open “Document Properties”. Dimensions should be 882px * 229px. Framerate 35 FPS. Press “OK”.
On the very left of the timeline double click “Layer 1″ and rename it to “pic1″. Create a new layer (see image) a double click it to rename it “pic2″. Create a third layer a rename it “pic3″. Create a fourth and last layer and rename it “frame”.
Download these three slightly modified royality free pictures from here. Put them in the images folder. Import them by clicking “File” >> “Import” >> “Import to library”. Select them all or import them one at a time. Also import our self-created frame namely “frame.gif”.
You screen should look something like this.
Select layer “frame”. Drag our “frame” image from Library to the scene. If not align-box is visible press CTRL + K. Press the icon below the text “To stage:” so that it’s active. Now select the image “frame” we just dragged to the stage and press “Align horizontal center” and “Align vertical center”. Now our “frame” is in place. Lock the layer by pressing the dot below the lock once. Also lock the layers “pic2″ and “pic3″.
Select the layer “pic1″ and drag it to the stage. Align it like we just did with our “frame” image. Because our frame image hasn’t got quite even sides you have to move the image to pixels to the left by pressing the left key twice.
Convert our “pic1″ to a movie-clip symbol by selecting it once and pressing F8. Name it mc_pic1
Insert new key frames (still on the “pic1″ layer) by clicking on the 15 frame (don’t confuse this frame with our image “frame”) and pressing F6. Click the 85 frame and press F6. Click the 100 frame and press F6.
While still on the 100th frame click the image once and properties select color >> tint >> 100%.
Right-click somewhere between the 85th and the 100th frame and select “Create Motion Tween”. Now go to the first frame and click the image once again. From properties select color >> color >> advanced >> settings >> Replace the first three “0″ values with “255″. Don’t increase the value next to Alpha. Press “ok”.
Right-click somewhere between the first and the 15th frame and select “Create Motion Tween”. Now lock this layer, hide it by clicking the dot below the eye and unlock layer “pic2″.
Select the unlocked layer “pic2″ and repeat step 8 to 13.
When you have repeated those steps lock the layer “pic2″ and hide it.
For the third image and the layer “pic3″ redo the steps. When you’re done lock layer “pic3″ and hide it.
Unlock layer “pic2″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 100 instead of frame 1.
Lock the layer “pic2″ and hide it.
Unlock layer “pic3″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 199 instead of frame 1.
Unlock our layer “frame” and go to the 283th frame and press F5 to insert frame.
Unlock and unhide all layers. We are done! Now press CTRL + SHIFT + ALT + S and navigate to our images folder we have been using so far. Name the file header and save it.
It’s nice to have the source file so also save that by pressing CTRL + SHIFT + S.

UPLOADING

1. What do we need to upload? Everything in the original template folder besides the old header imager, namely header.jpg. Be sure that it’s the edited index.html and style.css you are uploading.
Also be sure to upload our JavaScript namely swfobject.js.
Be sure to upload our header.swf, it should be in the images folder.
You don’t have to upload pic1.jpg, pic2.jpg, pic3.jpg or frame.gif. They are all contained in our .swf file.

You can download and review the final result here. I have included the images used as well as the .fla

I’ll create a Video tutorial of this later, so if your lost don’t worry too much. Until then feel free to mail me your questions here. I can’t guarantee a reply but I’ll try hard

Cleaning Up Your CSS

Sean — Sun, 27 Aug 2006 20:11:02 +0000

In a recent discussion over at OWD a new designer was wondering what they could do to clean up some of their style sheet and site code.

I offered a few suggestions on how to optimize the style sheet, which in the grand scheme of things can help increase load times for your site and make the style sheet easier to read.

One of the examples was to change color codes to be optimized. An example would be to change #000000 which is black to #000 which as you can see reduces the code size from 7 characters to 4 and if you do this through out your entire style sheet for the color black, it will reduce the overall file size of your style sheet. There are other colors you can do this with as well.

Another example would be #ffffff which is white. Change it to #fff and you just reduced your overall file size.

Changing color codes won’t make a huge change in load times but if you can shave a few KB of code here or there, over time it will help your site load times.

Something else to do is remove the tab spaces before your code. A lot of people like to have 5 spaces or a tab before each line of code. Having so much white space also increases file sizes.

A good tool I use to check and clean up my css on sites is a SourceForge.net project called CSSTidy.

What’s nice about this tool is the site also offers an online version if you don’t want to install it locally.

I hope this information was useful to you and if you have anything to add, be sure to comment or better yet, join www.attackr.com and submit some articles yourself. Between everyone who contributes to the site, we can help each other out become better designers and coders making the internet a better place for all to see.

Cheers,
-Sean

#1 CSS Online Handbook

fuBar — Tue, 08 Aug 2006 20:18:00 +0000

You are a curious and creative web designer and wanting to know more about CSS and its hefty tricks. But the information on one CSS website is not enough. You blindly search, visit, and bookmark any website that intrigues you. But by the end of the day, your bookmarks that you collected are all over the place. Not only that, but some of the links you bookmarked are irrelevant.

Well, it ain’t over.

Online handbooks are getting very popular these days for its quickness of linking relevant information provided on the website. And CSS is like no other. It’s constant, sleek, and attractive. More and more CSS techniques are published everyday. Don’t bookmark, just bookmark the handbook which is a bookmark itself. Confused? Don’t be.

I am talking about: http://www.alvit.de/handbook/

It’s an all in one CSS Handbook, check it out and you will thank me.

Tableless Web Designs: Why I Switched

Karen — Tue, 08 Aug 2006 03:11:19 +0000

Since I made the switch 6 months ago to a tableless design on my main site, I’ve noticed some interesting things:

1. My search engine rankings have dramatically improved
2. My bandwidth usage has dropped about 50-75%
3. I can now make changes to the look and feel of my site easily by just changing the one file, the stylesheet.

Let’s look at why my search engine rankings improved. Now that I have less un-indexable code on my pages, the search engines can now spider my site quicker. Less code, more content, therefore a better ranking. Makes sense, doesn’t it?

Bandwidth costs money, and unless you have a really good hosting plan with lots of bandwidth, then your larger files will take up more room on your server, and take a lot longer to load. Tableless designs use up considerably less bandwidth and are more accessible.

Every once in a while I may want to alter the look of my site. I like to change font colors, link colors, menu items, etc€¦Before I started using tableless designs, these changes took me hours to do. Now I just open up my stylesheet, make the changes I want, and in a few minutes I have my site updated with the new look and feel. It’s so easy!

For a client who wants to make their own changes, tableless designs could literally save them thousands on tech costs.

Most of my clients still want sites with tables. I now give them the choice of either style. After all, the customer needs to be happy, right?

Some people have the misconception that utilizing tableless designs means having a boring and less graphical site. Nothing could be further from the truth.

Take a look at one of my favorite websites: http://www.csszengarden.com/. At that site you can really appreciate what can be accomplished through css-based tableless designs. Beautiful!

Make the switch to a more profitable, usable, and accessible website!

CSS Editors & Design Tools

Sean — Thu, 03 Aug 2006 23:38:23 +0000

This list is neither comprehensive nor an endorsement, it is just intended to show the options. Below I’ve provided a few of the best known CSS tools that I know about.

Top Style by www.bradsoft.com

Stylemaster by www.westciv.com

Additional links to other useful tools can be found at:

Eric Meyer on CSS: Links to CSS Tools: www.ericmeyeroncss.com/links/tools.html

CSS Tools: www.soxiam.com/Notes/CSSTools

Layout Gala: http://blog.html.it/layoutgala

Eric Meyer on CSS: Links to CSS Resources: www.ericmeyeroncss.com/links/resources.html

List-O-Matic: http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/