by Marelise da Silva | Oct 25, 2011 | Website Development
Having Google Analytics on a website can give your client valuable information about who’s clicking on which pages, but Wufoo can help you gather more in-depth and personal information about website users. Wufoo is an online form creator that lets you set up any type of poll or forms on websites. The great part of this program is that it has full CSS and XHTML integration, meaning that you don’t need to understand any of the programming behind it (this is probably one of the reasons it was voted as one of the top 50 tools for Web Design by Mashable).
There are a few websites that can help you build online forms, but what makes Wufoo helpful is that it automatically creates a database and backend system that gathers the information and presents the data in an understandable way.
Some of the types of forms you can build with this include invitations, classifieds, event calendar, quizzes, tests, surveys, job applications, media collection and more. You can change the settings to make the information (such as survey results) public or password-protected. The company also offers different subscriptions that can get you some serious SSL encryption security (if your clients are particularly concerned about sensitive information or privacy issues). This service isn’t free – the plans range from $14.95 to $199.95 per month.
You may be part of a large corporation that has its own programmers and developers to help you build forms, but if you are a website designer for a smaller company (or a freelancer), you know the challenge of trying to keep on top of all the new website fads. Instead of outsourcing website forms (or telling your client it can’t be done), check out Wufoo. You can sign up and get three forms free before buying anything.
by Marelise da Silva | Jun 14, 2011 | Website Development
This is the second part of a two-part blog post about creating a web gallery for your website. Be sure to read part 1 before continuing with these steps to create your own web gallery:
- In the last post, we ended by choosing a destination folder for the website gallery photos and deciding which extension (htm or html) we are going to use. Now that these options have been clarified, you will now have a Banner option, which will require you to provide the name of your website, the name of the photographer and the date.
- The option “Large Images” enables the program to understand how large images must be processed. On the drop-down menu titled Resize Images, you will be able to choose between small, medium, large and custom sizes. For our example, we are using the custom setting and typing 600 into the pixels box (this is the maximum size for your large images). You will then be asked if you want the 600 pixels to constrain height or width (or both height and width) in your gallery. For our example, we are choosing both height and width.
- On the JPEG Quality option, select Maximum. The numeric value of the Maximum JPEG Quality option is 10 by default. Select the 10 and change it to 12.
- For the Titles of your images, you could use the file name, description, credits or copyright. Choose the option that you want to have as your titles.
- When you click on “Thumbnails” in the Options box, you will be asked for more information about the size of your thumbnails and the pixels as well as how many columns and rows you want in your web gallery. For our example, we are choosing Medium sized thumbnails, 75 pixels, five columns and five rows.
- On the Custom Colours option, you will be able to choose the colours of your text, links, background, banners and active links in the web gallery.
- Once you are done, select OK. Photoshop will go ahead and start processing this information. Once it is finished processing the information, the web gallery will be opened in your default browser.
You will see you have banner information, name of photographer, the date as well as the contact details of the photographer displayed in your website gallery. You will also see that the icons are the sizes that were specified and the specified number of rows and columns were created. Photoshop automatically generated the appropriate amount of pages for the photos in the folder that you specified. The navigation buttons of the web gallery (such as Next Image and Previous Image) are also created automatically by Photoshop. Now you have a new, state of the art gallery for your website!
If you need help with your web gallery or other internet marketing activities, contact WSI.
by Marelise da Silva | May 23, 2011 | Website Development
Image slicing can be used for website design, graphic user interfaces or just getting one big image and splitting it into a bunch of smaller images. This technique will work for Photoshop CS1, CS2, CS3 and CS4.
For this example, we are going to be splitting a menu bar (which is usually found at the top of the website) into separate image files:
- Go to File, New or pres Control + N
- Select 700 width and 40 Height
- Add a gradient overlay for a background. This is your background (Layer 1). Go back to the arrow key – now we are going to add text.
- Select the font you want and type in the text you want in your menu bar (for this example, we are creating a Home Page, About us, Services, Download Centre and Contact us pages). Align the text within the bar.
- Now we are going to add some effects. On the bottom right-hand side of the screen, double click on the text layer so that the Layer Style box pops up. Add a gradient overlay (for this example, we are adding a grey overlay) and click OK.
- Go to the Slide Tool on the left hand side of the page. Now select each page (such as Home page and About us page) within the bar. There will be a small box around each option. Simply drag the box over each separate button that you are going to create.
- Now click on File and Save For Web and Devices. A box will pop up where you can see all the slices. Select the Preset that you want on the right hand side of the page (in our example, we are using PNG-24 which is the highest quality PNG) and press Save. You can save the menu bar buttons as HTML and Images or as Images only.
This creates an HTML document that pieces each of the menu buttons back together so that it looks the same as it originally did in Photoshop, they are now all in sections as different image slices.
Contact WSI if you need a helping hand with Digital Marketing
by Marelise da Silva | Mar 2, 2011 | 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.
by Marelise da Silva | Jan 20, 2011 | 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 paste it just above the closing body tag – </body> – at the bottom of the page.
Save the document and check out the layout in your browser (by clicking on the Globe icon). Now that you have centred your layout, you can start refining the site by creating more nested Div’s, inserting content and so forth. This article is based on a video by Creativebits.org, an Apple-oriented design community). If you want to see the video, click here.
by Marelise da Silva | Jan 7, 2011 | 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.
