Content management systems make web design easy

Posted by on Jan 13, 2012 in Website Development |

Creating a website from scratch using HTML and CSS coding is all good and well for the experts or those people that have time, but for newbies to the web design world or people without a lot of time, a content management system (CMS) can make a huge difference. A CMS is a programme that helps you create, organise, store and link all the elements (pictures, pages, sounds, etc) of a website – without having to fiddle with any actual coding. Free CMS are available online There are a number of free CMS’ available for download. These have been around for some time and are the tried and trusted programmes of many a professional web designer. Joomla is perhaps the most well-known CMS out there. It is easy to use and allows you to create web pages and web applications. As open source software, the community attached to Joomla also gives you access to Joomla experts who can give you a lot of advice and guidance. Drupal is second to Joomla and is used by millions of people and communities to power their websites. Easy to use with customisable templates, Drupal allows you to create design a simple website in a matter of minutes without any hassle. SilverStripe is another open source CMS that allows users to create an entire website in a matter of minutes. The online community offers a variety of templates, applications and other add-ons to make any web designer’s dreams come true. WordPress is not technically made for websites, but is a powerful CMS for creating and maintaining blogs of all kinds. WordPress allows users to upload blogs, change styles, manage comments and much more – all from a simple interface that is easy to use. These are just some of the CMS programmes available online at no charge. Most of these programmes are open source and have a bustling community behind them making changes and enhancing the capabilities on a daily basis. For anyone new to web design, these CMS programmes are the perfect place to start. Want a truly unique website, but don’t want to mess with CMS or other website builders? Contact WSI for web design in South Africa. Please follow and like...

read more

Using an online form creator

Posted by on Oct 25, 2011 in 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. Please follow and like...

read more

Create a web gallery – part 2

Posted by on Jun 14, 2011 in 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,...

read more

Slicing images in Photoshop

Posted by on May 23, 2011 in 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 Please follow and like...

read more

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