subscribe to receive this blog per email :: unsubscribe from the mailing list

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Thursday, July 8, 2010

Planning your Site: The How

In my last blog, I talked about two of the most important questions you ought to ask yourself when planning your website: "Who will this site be for?" and "What do I want them to do?"


In this blog, I will look at some of the most obvious tasks a website can perform for you, and the technologies that are needed to make those tasks possible.


Most professional or business websites fulfill one or more of the following functions:


  • present information about your work or your products in an easily accessible manner that can conveniently be kept up to date - the "brochure" website
  • sell things, either directly through a shopping cart system, or by enabling people to place orders from a product catalogue - the "online shop" website
  • offer user interaction: guest books or message boards to leave feedback, search functions to find targeted information, forms to request quotes, online booking systems, online help desks - the "interactive" website
  • inform and entertain: blogs about topics relevant to your industry, collections of helpful or fun links, image galleries, online video or flash presentations, interactive games - the "brand building" website

Different technologies are needed to fulfill these different functions: a brochure type site may only require straightforward html/css - though it may be advisable to include features like a search function, login system, or catalogue type features, which would require Php/MySql, or another programming language that works with a database. And unless you are comfortable to update your own html, by using an html editor or even writing your own code, you may wish to have a content management system included, which also requires some programming.


Shopping carts can be installed either as ready made packages - Zendcart or Cubecart are popular systems, though it requires some programming expertise to set them up - or they can be custom programmed. Security is an important issue when it comes to e-commerce applications: you would want to make sure that your client's credit card information will be well protected! The simplest (and free) solution is using the Paypal system. This is only really advisable for shops with relatively few products, but it is a feasible solution if for one reason or another, you cannot run Php/MySql on your web server.


If you would like to interact with your clients via message boards, have "members only" features on your site, enable visitors to do site searches, or even upload content themselves, you will not get around using Php/MySql or one of the other web programming languages, such as ASP. All these features work with an online database, where information can by uploaded, by yourself or even by visitor to the site, depending on how it is set up. The Php scripts then pull this information from the database and automatically write the html code that is at the base of what your site visitors see. Not only does this make site maintenance and updates much faster and more painless, it also allows for all sorts of customizations - to the point where no two people will see exactly the same content when they visit your site! It does require a bit of setting up and programming, and the price tag for an interactive site is therefore quite a bit higher than that for a simple brochure type site or even an online shopping cart.


Flash is another technology which is very prominent on the web. Flash has got a bit of a bad name in some web design circles: not just because of the infamous (and once so popular) "Flash intro" that takes fifteen minutes to load and is a surefire way to make most prospective visitors click on to the next site - but mainly because sites which are built entirely in Flash, cannot be indexed by search engines. Obviously, this is not good for your search engine ranking! A Flash site essentially is a self contained file that is embedded in an html page. Search engines only read html, they do not read Flash - so any keywords you display within your Flash site will be invisible from the search engine's point of view.


The beauty of Flash, however, lies in using Flash components within an html context. Flash also comes with its own very powerful programming language, Actionscript 3.0. It is an essential technology if you wish to include rich multimedia content in your site: music clips, video, slide shows, animations, little interactive games or even just a few cool buttons that do interesting things.


Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

Monday, September 21, 2009

Hello World :: welcome to my brand new web design blog!

First of all, the good news – as of last Monday, I am officially running my new web design business! My Enterprise Allowance Grant has been approved, I’ve been given a little stack of money to buy things for my business, and all systems are go.


As a thoroughly productive start to my new business, the same day my latest website went live: www.juliecomparini.com is a personal portfolio site for my former fellow musician, and good friend, Julie Comparini, a singer based in Germany and specializing in the performance of medieval, renaissance and baroque music, as well as contemporary interdisciplinary theater projects.


The site is what we call a “static website”, using straightforward HTML and CSS. HTML stands for Hypertext Markup Language - this is the code that determines the structure and content of a web page – headlines, paragraphs, lists, block quotes and such – which will be displayed in a standardized format by your web browser.


CSS stands for Cascading Style Sheets – this is where all the fancy formatting goes. CSS offer the ability to determine the looks of a site in great variety and detail: font styles, sizes and colours, background colours and images, rollover effects, positioning of the individual elements of the site, and a number of other parameters.


The elegance of the system is that the same style sheet can be attached to a whole series of HTML pages, making sure that the styling for all pages is consistent. It also enables the designer to change the entire look of the site – say, the overall background colour, or the font style - by only changing one bit of code in one file. You can even write a whole new style sheet and attach it to the same old HTML page! So one day, your website could have sober businesslike look, and the next day, a crazy jungle theme, all by changing one line of code.


As someone who has done the hard yards of hand-coding my own html pages back in the days before CSS became widely supported, I can tell you, this technology cuts down on a lot of really tedious repetitive tasks! Of course, you have to know what you are doing – starting to work with style sheets was where I realized the limits of my self-taught html skills a few years ago, which is one of the many reasons I ended up getting myself a proper Diploma in Multimedia Design.


If you’d like to get some first hand experience of what a HTML page without its attached style sheet looks, you do the following little experiment (this works best with the Firefox browser – you can download it for free if you haven’t got it installed: ):


Load a web page – you’re welcome to use Julie’s as an example – then go to “View – Page Style” and choose “No Style”. Tadaaa! Not pretty, huh? The page content will still display properly (at least if the HTML page is set up the right way) and headlines, paragraphs and lists will still be recognizable, but all the fancyness is gone. (Make sure to switch your Style Sheets back on by selecting “Basic Page Style” after you’re done.)


I hope you have enjoyed this little glimpse into the mysteries of the art of building good websites. But I know, most of you just want to know: “And what is a websites going to cost me?” – Well, how long is a piece of string? It is really hard to quote people a price without knowing their ideas and requirements. But I will tell you how much I charge for a site like Julie’s, if you send me an email mentioning this blog.


Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net