Helping You Rock Out Your Site Like A Rockstar!

In the past, getting rounded corners meant you had to create a rounded rectangle, splice up the image, and then code it with HTML and CSS. A couple years ago, developers came up with a rounded corners attribute in CSS. It is called the border-radius.

This CSS trick does not currently work in Internet Explorer. These can best be seen in browsers like Mozilla Firefox and Safari. The corners will revert to being squared, but it will not cause any issues. Also, this trick is not considered W3 web standards compliant. It is a nifty trick that even Twitter has used on their layout.

The following below are the elements associated with this.

Firefox:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Safari:
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

You may want to use all so this effect can be seen in as many browsers as possible.

There are two different versions as some browsers read each code in a slightly different manner.

To get this effect, you merely specify the area, usually a division layer in your actual web page.


<div class="roundedbox"></div>


In your web page’s CSS style sheet, you will need to define what you want the roundedbox to look like. In the case of this tutorial, I want a background with white and a border of light gray. In the case of this tutorial:


.roundedbox{
background:#fff;
width:100px;
border:1px solid #c0c0c0
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

}


The 5px can be replaced by a smaller or larger number. This number tells the browser how much of a curve radius the corner will be. In the case of 5px, the curve is slight. With 10px, the curve is a bit more noticeable.

Try it out! You can also remove some parts of the code to make it different. For example if you wanted the top corners to only be rounded you just remove the CSS for the bottom border radius elements.

Have you tried this out?

I was laughing lately about the title in the article that Dan Keller writes, called Does your blog suffer from ADHD?. However, as much as it was a funny title, the article shares a serious issue. Before I go into sharing some ways to help give your site a better focus, I thought I would share my own personal experience.

Some of the bloggers that are still learning the ropes may have started a site for whatever reason and built it with zest. However, months or maybe a year or two later, the site is one heap of a mess. This is what happened here at Blondish.net at one point. And that took 3 years and a very bad decision to have a hiatus. What I realized was that I needed to focus on what my site was about. I never wanted Blondish.net to be a personal blog. In fact, this site has evolved from a website I had in site competitions and the goal was to give free advice and free graphics.

Blondish.net is always evolving. A lot of people who visited 6 months ago have seen it in action. Two years ago, this site was quite a stranger. So, as I have focused more on what was important, my site has improved greatly.

Here are 5 ways I did this:

• 1. Go back to the drawing board. Your site does not make you. You are the one responsible for your website and can control it. Brainstorm what you want your site to focus on. Keep it within so many topics and make sure what you talk about is something you are familiar with as well as eager to learn more about. Too many topics and your site could continue to seem chaotic.
• 2. Get rid of the excess or move it elsewhere. All that content that no longer fits needs to go somewhere. You might want to open a second website, or keep it on draft.
• 3. Is your site design reflecting what you want it to? You need something to be proud of. If your site is too plain Jane or does not give anyone a reason to want to visit, why bother. Even if your site has awesome content, how can you make your site memorable. Think ‘McDonalds’ and all those places that you probably knew what they were as a child before you could read by just the logo on the sign.
• 4. Get feedback. As some people in your niche that you know about what you can do in order to improve your site. Make a survey. Send an email out or send a message through your social network streams. Ask anyone who has visited your site what interested them and what they believe would help you covert over more visitors.
• 5. Be open to changing and revamping your site focus at any time. You might go through several brainstorm sessions on your site focus before you get a winning plan. It is up to you to make sure you or your webmaster is on top of the most current ways to optimize your site for search engines, designs, and even your visitors.

What other ways do you believe will help a website owner have a better site focus?

So, you want to make a website? Whether business or for personal, there are several general guidelines you should follow. These are made to be flexible for most types of websites, however may not work for everyone. After webmastering several sites for almost 8 years now, these have been guidelines I have followed when creating projects. Some have flopped, and some have succeeded, but these have always been a great guideline to follow.

Because this is so long, I will be breaking it into parts. This is Part 2 of this series. If you missed the other, please read So You Want to Make a Website: Part 1

2. What can you invest into your website?

Will you be able to invest time into your website? Will you be able to invest money into your website? These are important and merely optional depending on the website owner/ webmaster choice in how to bring the site into existence.

Making a website takes time, sometimes even money, especially when having it hosted with a paid web host. If you are unable to design a site, then obviously you will have to invest money into having it designed and coded. Some web designers are cheap and others are expensive, but nevertheless, it is an investment to bringing the site together. The same can be said about web hosting. I actually sell off my server web hosting for as little as $25 a year at Host Solutions, which are perfect for bloggers and my server is geared to support WordPress.

For bloggers in particular, free hosting will only do for so long. As a website owner, you need the control to monitor your site’s success and breaking out on your own is ideal.

In regards to investing time, it can be a very finicky issue. The content will obviously be the main part added once the site has a general layout to portray it. However, it is also the part that takes the most time. You as the website owner will have to take time to put this together, if not, hire a webmaster who can. This can be an issue as some cannot utilize the internet efficiently and have no idea how to add their content, while others may not have the time.

A webmaster can make the changes necessary. Some web designers may even offer Site Maintenance/ Webmaster services. Like web design, it may be expensive or cheap, but make a good choice on someone that is reliable. A hired webmaster who seems like they are hard to contact and get any site updates done in a decent time is not exactly ideal.

Also, for both time and money, how will you get your site out? Do you plan to invest money in advertising, or do you have a lot of friends who can spread the news like wildfire? Getting the word out on a website is not easy. It takes a lot of time, even a lot of money, and even though you could reel in quite a bit of visitors, you have to maintain this, seeking larger areas to reach more of your audience.

Are you still free hosting, but find that your site is quickly becoming popular? What is holding you back from investing in your website? What kind of plans do you have for your website in the near future?

If you already have invested some, is your site succeeding or are there areas that you need to focus on that are not up to your satisfaction?

The page jump is a simple HTML trick that involves the anchor tag and a little naming. The page jump allows visitors to click and jump to a different part of a page. This is a great trick to use in FAQ type pages, especially if the list is quite long.

1. Create your hyperlink code with the URL.

2. Add after the URL ‘#’ and a name for your url.


<a href="URL#nameyourlink"></a>


3. Place the following anchor where you want your topic to jump to on your page.


<a name="nameyourlink"></a>


Simple, right?

By the way, if you have a question on web design and would like to see a tutorial, you can use the Blondish.net contact form to ask. If it is WordPress based, your tutorial might be published at WPAddict.net.

So, you want to make a website? Whether business or for personal, there are several general guidelines you should follow. These are made to be flexible for most types of websites, however may not work for everyone. After webmastering several sites for almost 8 years now, these have been guidelines I have followed when creating projects. Some have flopped, and some have succeeded, but these have always been a great guideline to follow.

Because this is so long, I will be breaking it into parts. This is Part 1 of this series.

What is the focus of your website?

Do you want to have a business? Do you want a free entertainment site? Do you want a personal site? This is where you as the website owner/ webmaster have to decide what you want on your website content wise. You could register a domain, buy web space at a webhost, but it is the content you need to have down or at least a nice brainstorm plan for your site-to-be. The content will help you decide the rest of the mood of the website, especially when it comes for your visitors to navigate your site. Without focus, you could have a very disorganized website.

When brainstorming, first list the major areas of the website you wish to have more emphasis. Then, underneath each main category, go into detail of what you want. For example, you might want to consider:

- Will you need a membership script?
- Will you need a content management system?
- How do you want your site designed in order to help brand your business online?
- Will you need to invest money?
- Who do you want to target?
- What do you want to sell?
- What is the purpose of your site?

All of these issues are important when embarking on a new website venture.

Factors like considering what kind of audience your site will reach are extremely important during the brainstorming process. This involves age, gender, personal quirks, ethnicity and more. Obviously a website for dentures may not appeal to a younger audience, while a website of hard core rap may not suit those who are died hard country music fans.

You might want to do a survey to find out what might be best for your website? You might also want to check out sites in your niche that might give you insight what people are expecting and how you can capitalize and make your site both unique and be THE PLACE to go to.

Lastly, what kind of accessibility do you want your site to have. Do you want it totally PC, W3 standard and cross browser compatible, or are you willing to take a few risks to make your site happen?. Although it is best recommended to have a site that is cross browser compatible, not every design and coding technique will allow this to happen. This will always fall back with who you intend on as an audience for your website. It is important in this part of the process to keep in mind cross browser compatibility and try to apply as much as you can to your site.

What factors have helped you determine your site’s focus? What tools or sites do you like to use in order to find out the best way to both target your ideal audience?

[This is a guest post by Lawerence Hall. Lawerence Hall is working as community manager at Go-gulf, a Dubai based web design company that
provides affordable web design and development solutions in the Middle East. ]

Choosing the right color scheme is vital in successful web design. Colors express feelings while bringing attention to areas of interest even before imagery or text begins speaking to a user. The goal here will be to understand what to use and when to use it, that’s where color theory comes in.

Color theory is the set of rules that say which colors work well together and why. Following these rules during your color selection can improve the efficiency of color in design. Here I’ve outlined some popular tools for color selection including color schemers, color palette resources and a few general color theory information sites below.

Kuler : Color Scheme Tool from Adobe

Kuler is Adobe’s free online color schemer. Kuler makes color exploration educational and social. Themes can be generated from scratch or from uploaded images. Using the community functions of the site can provide inspiration. Many user-generated themes are posted and rated here, waiting to be downloaded directly into adobe programs.

ColorsOnTheWeb : Color Wizard Color Scheme Generator

The Color Wizard is a great tool with many options. The greatest function it may have over the others is a quick way to check color variations. When you select the main color you want to work with, there are three boxes that provide various color tones by hue, saturation, and tint. This is a great way to experiment with fine toning your color selection quickly.

Color Scheme Generator 3

This easy to use tool has both a color wheel, and will generate color palettes. It allows for selection of many color theory algorithms and is easy for anyone to understand. It will also has settings to display the chosen color palette for various states of color blindness. The exports are plentiful with options for GIMP, text, HTML, Photoshop, and xml.

Color Hunter

Color Hunter is a nice tool for designing a scheme around a specific picture. After you upload a url or picture file the tool returns a light and a dark set of colors. If you create a login to the site you can save, tag, and rate schemes that you create for other users. Also schemes can be rated to see which ones are the most popular.

WebsiteTips : Colour Scheme Chooser

The SitePro Color Scheme Chooser users sliders instead of a color wheel to aid in color selection. This may be more familiar to people not accustomed to advanced design programs. It also has a drop down menu with seven values to choose from. This is a nice tool to perform quick color scheming tasks.

ColorSpire : Create Website Color Schemes

ColorSpire is a simple scheming tool. It uses a color wheel for color selection on the palette. Instead of working with known color theories it uses the selected base color and users can adjust for brighter, darker, saturation, or just make a random palette. It won’t help sort out usability issues like other tools I’ve listed but its quick and intuitive.

ColorBlender

The Color Blender is another simplified tool. It develops a 6 color pallete based on the main color you select from the slider. Like some of the tools here it includes functions to export pallete files to photoshop or illustrator. They can also be sent by email.

ColorDB

ColorDB is a very robust tool. Upon selecting the base color, variations and harmonies are all shown at the same time. Amongst the harmonies are complimentary, opposite, neutral, shades, split opposite, split complimentary, triadic and tetradic, which you can use to build color schemes from. There is also a color map and memory functions so that you can return to the site later and learn more of its many many functions.

ColorSchemer

The online ColorSchemer is an extremely simplified version of the popular desktop ColorSchemer. Once you simply pick a color it will show you 16 matching colors on the palette. Great way to get a quick look at some possible color combinations.

If any of the above terminology went over your head. Or you if just couldn’t figure out some of the terms and need a good root understanding of how color theory works check out the following sites.

Color Worqx
The Color Worqx website provides a step-by-step tutorial on color theory. It starts from the very basics and builds to very complex ideologies involving color that transcend the boundaries of just web design.

Color Theory – Wikipedia
This is a basic article on the Wikipedia on color theory. It is not as in-depth as the one by Color Worqx, but that makes it a great resource for picking up a quick overview on color theory.

Do you know any more online resources for color scheme generators? Do you use them?

The PRE tag, or <pre> is short for preformatting. It is a way to space your text the way you like, especially for those who like to do poetry with some fancy spacing. The PRE tag allows you to leave your text exactly how you typed it, including the spaces.

The PRE tag requires an opening and closing tag.

Just an example

I loved to watch the sunset
blue sky
f a  d   e    s
   into orange and red and yellow
        then
s
i
n
k
s
below the
h o r i z o n

This was the code used:

<pre>
I loved to watch the sunset
blue sky
f a d e s
into orange and red and yellow
then
s
i
n
k
s
below the
h o r i z o n
</pre>


Pretty cool trick, huh? So for those who like to write poetry or even for a dramatic effect, this is a pretty nifty html tag to use. Although it really is not an extremely important piece of code, like any resource – you never know when something comes in handy.

Have you tried it?

I thought after I was reading a few websites that I would address some common mistakes I see in web design layouts. I am not too much of a stickler about being valid, but more on the design issues as those are what people catch.

1. Margins. I cannot express the times I have been to websites and the margins between images, the browser itself, or other elements within the layout are either too far apart, over lapping, or way too close. Whitespacing is obviously an art in itself.

2. Bulky site. Too many graphics or too many large graphics.

3. Colors. Some sites, the colors are absolutely atrocious. For those who are unsure of what looks great together, try Colourlovers.com for some great palettes.

4. Too Simple of a design. Sometimes simplicity is great, but too simple and it can detract from the reader’s experience. Remember, a website is like a business card. Sometimes having an interesting one will stick in your reader’s mind more than others that they have gone to.

5. Inability to navigate easily. Some type of navigation should be clearly placed. With WordPress users, WP-PageNavi and Yoast Breadcrumbs are great tools to incorporate into layouts. They allow people to always know where they are on the site and can find a way back.

6. Too many scripts. Like images, too many scripts operating at the same time can be a real drag on load time. Make sure to choose ones you believe are really necessary. This goes for plugins as well.

7. Too many advertisements. Monetizing a site is a great way to make some cash, but too many ads, and your visitors might feel spammed. Your visitors are on your site for the content, not to be blasted by your advertisements.

8. Inconsistent fonts. While making different sections have different fonts, too many can detract from the layout. Keep it consistent and to no more than a couple choices.

9. Header tags are wonky. There are times when I have gone to websites and h1 tags are huge as well as h2, h3, and so on. Keep these varied and tasteful. Also, try not to vary the, no text tranform, uppercase and lowercase on text transforming in your CSS. Plan to choose one.

10. Not a memorable main graphic. Whether it is a logo or a special image, if it is too small, too plain, or sub par on design, you might not be putting your best foot forward. You do not want your logo too small or where next to it is a huge banner. Your visitors may get the idea that your banner is more important than you trying to brand yourself properly.

What mistakes do you often see when you visit websites?