What is responsive web design?

Posted by on Dec 4, 2013 in Website Design, Website Development |

This is the question that seems to be on more and more people’s lips. Simply put, it is when the design of websites respond to different screens’ dimensions. Websites that are built to be very responsive will be able to intuitively take note of the width and height of the screen. It will then adjust the web page layout accordingly to best fit the viewable area. Even though responsive web development is mostly used in web layouts, responsive design can also go well beyond mere layouts. It is achieved by using code which is referred to as media queries. It allows developers to easily create web pages that are entirely independent of the viewable area. Why it matters If you’re looking to give your users a great online experience, then responsive website design becomes of value, especially with the smartphone and tablet wars currently raging in the marketplace. More and more people will be accessing the web from different platforms so you should provide them with the best web experience possible. Here are a few ways responsive web development will help you to achieve this: Seamless user experience: Instead of having to develop individual websites for different screen resolutions, the responsive design will allow you to target all of the different dimensions. This will deliver a fantastic user experience that will display beautifully on any device. PPC and SEO benefits: Google’s page on ‘Building Smartphone Optimised Websites’ actually recommends using a responsive website design above other development methods. A single URL will help Google to assign indexing properties for the content while at the same time reducing load time, all of which will benefit your SEO and PPC efforts. These are only a few ways in which responsive web development is leading the way forward in website design around the world. Contact WSI OMS for affordable and reliable web design today. Please follow and like...

read more

How user-friendly should an ecommerce website be?

Posted by on Mar 22, 2012 in Website Development |

Your ecommerce website won’t be successful if it looks good, but lacks usability. Your web design should ensure that visitors on your site can find what they are looking for with ease, whether it’s information or products. If your website doesn’t draw attention and facilitate easy shopping, people will buy the products elsewhere. Five tips for designing easy-to-use ecommerce websites Keep it simple: Your web design layout should be simple and self-explanatory so that visitors and potential customers know exactly what you’re offering. If you want your website visitors to keep coming back, make sure they can add products to their online shopping basket with ease. Navigation menus: Designing an ecommerce website requires a different approach to navigation menus than other websites. With ecommerce sites, the top navigation menus are usually dedicated to product categories. At the bottom of the page, you can have small text links that will take visitors to the About Us Page, Terms & Conditions Page, Shipping Agreements Page and other technical information pages. It’s also a good idea to have a link to the home page at the bottom of every single product page – this will help people navigate the site if they get “lost” amongst your products and categories. Loading time: Visitors and potential customers can easily be put off by slow loading websites. This is also a particular hassle for ecommerce websites, because it can lead to problems on payment processing and shopping cart pages. To prevent this, keep your web design simple. Categorise: Some customers will be looking for specific brand names while others might be interested in the least expensive products.  If your web design makes it easy for customers to browse products by brand, new releases and other relevant categories, it will help them find what they’re looking for within a short amount of time. This type of category planning should be done before you start the web design process. Checkout: Visitors and customers won’t return to your website if your web design layout doesn’t provide a smooth checkout procedure. Stick with one or maximum two pages for the checkout procedure. Please follow and like...

read more

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