Annoying Features of Web Pages – The No No’s!

Posted by on Mar 2, 2011 in Website Development |

Your primary goal as a web designer is to hook users and keep them, so reading the following points below should assist you in not losing them by annoying them! These irritations are enough to have them move on and keep browsing. Link after link after link If a user has to click more than 3 times to find what they are looking for, maybe your site is not set up efficiently. Misleading Links It’s both annoying and frustrating for a user to click a link to a web page he desires only to be led to an entirely new site, of which they have no interest. It is a waste of time, and very annoying to the site’s users. If you wish to lose your visitors, this is one sure way. Grey text on white Grey text on white backgrounds is simply harder to read than black text on white backgrounds. Sound! Music and podcasts that start automatically annoy the user. They will listen to it when they are ready to do so. Pop ups Many people don’t enjoy having to close the window on every single page that they visit. Especially when they are built to overlay content which the user may be trying to read. Leave them as a static link built into the content design and the user will click it when they need to. Typography No-one wants to see carnival styled writing on a website regarding funeral parlours! Think of the relevance and the style most suitable. Unable to re-size text Users of all ages make use of computers and some have vision problems. It is terribly frustrating when one cannot use the re-size or zoom in to get the text to be able to read it. Too many graphics Believe it or not, many still have slow connections. Putting too many graphics on your page, or anything else design-wise that slows the pages down, and you are sure to lose the user. A few extras for good measure 3-D advertising that jumps out when the mouse goes near it. Sites that use new adobe versions and want you to upgrade to use the site. Sites that use new Java and pester you to download the latest version to use their site. Css built sites that jump all over the place until all the downloads are finished. Css/xml/flash sign-in panels that are not part of the page so login software doesn’t work. Please follow and like...

read more

How to centre your CSS layout inside a web browser

Posted by on Jan 20, 2011 in Website Development |

This article is part of a series about website design and the basics of creating a CSS (cascading style sheet) layout in Dreamweaver. In the previous articles we discussed how to create Div’s, change the sizes and how to create “nested Div’s” (a Div inside a Div). This article will focus on how to centre your CSS layout inside a web browser. If you’ve worked with table-based layouts before, you’ll know that centering your layout is relatively easy. CSS, however, can become a little bit more complicated. When browsing the internet for tutorials on this, you will find there are a few different techniques. The technique we are going to show you is the only sure way to get your layout centred every time, in every condition and in every browser. Step 1 Down at the bottom of the CSS Styles panel, you need to create a new CSS rule (click on the third icon from the bottom right of the menu in this panel). A dialogue box will pop up – select “Tag”’ as the Selector Type. Change the Tag to “body” and press OK. A dialogue box called “CSS Rule definition for body” will pop up. The only property that this tag will have needs to be changed in the Block category, set the text alignment to “Center” and click OK. Step 2 Now we are going to wrap our entire layout inside one single master Div. This happens inside the Code. Look for your opening <body> tag (give yourself some space to work so hit Enter a few times). Put your curser inside the white space and click on Insert at the top of the page – click on Layout Objects and then Div Tags in this drop-down menu. A dialogue box will pop up, click on New CSS Style, check the Advanced Sector Type and change the name of the Selector to #Master and press OK. Another dialogue box will pop up and there are a number of definitions to set: Within the Box category: In the Margin definitions, uncheck the “Same for all” box and set the positions as follows (Top = 0; Right = auto; Bottom = 0; Left = auto). Within the Positioning category: The type should be set as Relative, Width = 990, leave the Height value empty (we’re going to allow the content to determine the height), Top = 0 and Left = 0, click on OK. Step 3 Inside the code, highlight the following line: <div id=#Master”> Content for id “Master” Goes Here </div>. This is “dummy content”, so delete the “Content for id “Master” Goes Here” sentence and then cut the closing Div tag – </div> – and...

read more

Giving a cost estimate for website and graphic design jobs

Posted by on Jan 7, 2011 in Website Development |

Drawing up costs and proposals are time-consuming. If you are a website designer or a graphic designer, you need to know how to accurately bill for your work (even if you are working for a salary, it’s a good idea to make a mental note of how this gets done). Although you won’t get every job you bid on, you need to make sure you are providing clients with a fair, realistic and profitable cost estimate for design jobs. What are your competitors charging? You probably won’t know who else is bidding on the job, but find out what other designers and agencies are charging for work. If you’re vastly overpriced, the client probably won’t even consider you (unless you have something extremely unique to offer) and if you’re charging much less, the client may not take you seriously (or the money won’t compensate for the effort you put into the job). Get some ball-park figures from other designers in your area so that you have a good point of reference. Who’s the client? If you’re setting up a cost estimate for a blue chip company, chances are they have bigger budgets and are prepared to pay for what they want. If you’ve got a smaller client and you know they are a bit strapped for cash, rather speak to them about a payment plan for you (or how you can compromise) instead of undercutting yourself from the get-go. You don’t want to be the cheapest designer, but try to be flexible if you are looking for new clients. A good tip is to have specific price ranges for website design and graphic design jobs. Ask a lot of questions about the job (if the client is too vague during the brief, they could either be looking to you for some guidance or they could be expecting you to re-do various logos or website ideas until you present something they like – which will take a lot of time). If you can get a lot of information upfront, you’ll have a better idea of what you can charge for the job. Please follow and like...

read more

Changing sizes and positioning of a Div layout

Posted by on Dec 14, 2010 in Website Development | 1 comment

In our last post, we discussed the basics of creating a CSS layout in Dreamweaver. For website designers, the basics of a good website designs starts with creating your website’s layout (before any images, text or design elements are incorporated). Now that you have your three layout boxes (Header, Content and Footer), we are going to start changing the positioning so that the layout is fit for an internet browser. Step 1: As mentioned in our previous post, you can change the positioning of the Div’s by clicking on the Div’s and dragging them around, but using fixed values for the positioning is much more accurate. To use fixed values for your Div positioning, click on the Div and go down to the property inspector at the bottom of the page. You will see that the positioning values of the left, top, width and height (called L, T, W and H) are in the boxes. Click on the Header Div and reset the values (the L should be 0 – this is how far you want the Div from the left side of the screen), make the Width 990 pixels, Height should be 100 and T should be 0). You may be wondering why the Width is 990 pixels – this isn’t an arbitrary number, it’s because we want this layout to fit inside a monitor resolution of 1024 x 768 (vertical scrolling isn’t a big deal in website design, but we want to avoid any horizontal scrolling). Click on the Footer Div and make the measurements as follows: L = 0, T = 560, W = 990, H = 50. You will see that there’s a “px” after the numbers, don’t take these letters out of the box when you are changing the numbers – the layouts will work in Dreamweaver but they won’t display in an internet browser if you remove the “px”. Now, click on the Content Div and change the values to the following: L = 0, T = 105, W = 990, H = 450. Step 2: You have now created the Div’s for your layout, but they won’t have any visibility in a browser yet. A good tip is to add a different background colour to each of the Div’s so that you can check them out in a browser (you can do this by clicking on the Div’s and them going down to the on property inspector at the bottom of the page – choose a bright background colour for each Div). Save the page and click on the globe icon at the top of the page so that you can see it in a browser. These are the basics of using...

read more

Refining your CSS layout with nested Div’s

Posted by on Dec 7, 2010 in Website Development |

This post is part of a series about the basics of creating a CSS layout in Dreamweaver. In the previous post we discussed how to create Div’s and change the sizes. When designing a website, one needs to create “nested Div’s” (which basically refers to a Div inside a Div) so that you have the layout you need for menu buttons, advertisement spaces and so forth. Once you’ve got the basics of CSS layouts, you can start to refine your site with nested Div’s. Step 1 We have already created the three Div’s (in our example they are called Header, Content and Footer – if you are unfamiliar with Dreamweaver, it would be a good idea to keep Dreamweaver open in front of you while reading this post). Once you’ve checked out the Div’s in the browser, go to the CSS Styles panel at the top right-hand side of the page (if you don’t see the CSS Styles panel, go to your window menu – you might have to expand the styles button to see your three Div’s). Now that you can see the three Div’s, select the Header Div to see its various properties, such as the background colour, positioning values etc. *Note: This is an important aspect of CSS layouts: As soon as you draw out a Div in Dreamweaver, the program will create the rules for you. If you double click on the Header Div, a dialogue box will pop up that says “CSS Rule definition for Header” – this dialogue box has all the different categories for the rules of this Div and this is where you can control the font, set a border etc. If you click on the Positioning button in this dialogue box, you will get the Width, Height and other fixed values of the Div’s positioning. You will notice that the Type setting in this box is “absolute” – that’s what Dreamweaver means by calling the Div’s an “AP Div” – it stands for absolute positioning Div. If you have some time, explore the different options besides “absolute” to see what other creative aspects you can bring to your Div. Step 2 For our example, we are going to put a nested Div inside the Content (middle) Div that we have drawn. Click inside of the Content Div and then click on the Code button at the top left side of the page (this will show you the coding behind your Dreamweaver site). Scroll towards bottom – you’ll see the three Div’s that Dreamweaver created for you: <div i.d=”Header”></div> <div i.d=”Content”></div> <div i.d=”Footer”></div> Seeing as we clicked on the Content Div, the curser should be in this line of code: <div i.d=”Content”></div>....

read more

The basics of creating CSS layouts

Posted by on Dec 2, 2010 in Website Development | 1 comment

Most graphic designers will tell you that anybody can use Dreamweaver. Although this is true, you can’t always just download the program and expect to know how to start using it. If you’re an experienced graphic designer that hasn’t built a site in Dreamweaver before (or you have no website design experience and want to get the hang of it), your first point of departure is creating CSS layouts – also known as Div-based layouts. CSS layouts help you create a website with a creative layout without using inhibiting tables. So, after you’ve opened Dreamweaver, defined the site and saved the pages, this is what to do to start creating CSS layouts: Create CSS layouts Step 1: Turn the Insert bar on (if you don’t have the Insert bar turned on, go to the Window menu at the top of the page and look for insert – this is the first command in the drop-down menu).  Inside the insert bar, go to the Layout tab and click on the second icon in the bottom row called “Draw AP Div”. Once you’ve clicked on this button, you will be able to draw a box in your screen. Click anywhere in the screen and draw a box – this box is called a Div (if you have used Dreamweaver before, this can be confusing because these Div’s used to be called “layers” in previous versions of Dreamweaver). Step 2: To change the size of placement of the Divs, click on the box and drag. These Div’s can hold any type of content such as text, video, images, another Div and tables. If you come from a print background, Div’s may remind you of image boxes when designing in InDesign or Quark. For the first exercise, draw three Div’s (boxes) in the page – you can do this by going back to the “Draw AP Div” button on the insert bar. You will need three Div’s for this exercise because we are going to be making a header, content and footer layout. When you are done, close the Insert bar at the top of the page. Step 3: Click on the first Div so that it becomes highlighted, then go down to the property inspector at the bottom left hand side of the page and give the Div a different name than “AP div 1” (rename it to Header for this exercise). Grab second Div and rename it to Content and then the last Div and call it Footer. You can drag these Div’s around on the page to determine positioning, but it’s much more accurate to use fixed values for your CSS layouts. These are the basics of creating a CSS...

read more