Monthly Archives: July 2017

Work with Website Designers

This article is targeted at business owners, small and large who are interested in getting a web site built for them. When approaching a website design firm, or individual web designers, these preliminary questions will go a long way in forwarding the project.

Although this article is speaking to the business looking to hire a web designer, the information is also relevant to web designers and is recommended reading for people new to web design.

Questions about the site:

1. What is the goal of the web site?

That is the first question you have to answer. Do you want to sell something to end-user; do you need to e-commerce enable it? Is it a support site for your offline business, an information resource or contact point? Or is it simply a branding tool?

2. How big will it be, how many pages?

3. Do you perceive the need for any special technologies? For example, are you interested in FLASH animation, protected directories, hooking your product catalogue database into the site?

4. What is your target launch date; when do you want this site live?

5. Do you already have a domain name and/or an existing web site?

6. Have you looked into hosting or do you need the web designer to handle that for you?

7. If you are already hosting your site somewhere you need to let the web designer know what type of servers the web site is sitting on and what technology they will need to work with. Examples of such server-related technologies include: ASP, PHP, MySQL, SQL server etc …

This piece of information can be very important when dealing with the web designers, as they may not have the skills to use the technology that your current servers support. In that situation, if you want to work with certain web designers you may need to switch servers.

8. Your budget: Some people don’t like to give out their budget and wait to get bids. While others will give a ballpark figure of what they are looking to spend. This 2nd option helps give an idea to the web designers on what scale you are looking to build the web site. When you go out for RFP (request for proposal) the more detailed your specification is, the more accurate quote you are going to get.

Choose a web designer or firm that matches your business:

You will find that in this business just like many others, there are specialist and levels of experience. You need to judge what your project is in terms of size and subject and try to pick a company or web designer that match’s you. If you’re a small company it might be a better choice to find yourself a free-lancer type of designer rather than the big firm. And the opposite is true for larger companies. Also consider the experience of the company/designer you are looking at, have they created sites of the same nature in the past, have they worked on other web projects for companies in the same or similar field?

Be flexible with the details of the site:

As the client you have every right to have the site delivered to you the way you want it. But it is always wise to be flexible in those micro-requirements and defer to the experience of the web designers. Sometimes they (the web designers) may see a better way of implementing some feature that is diff

erent from what you had envisioned. Many times this alternate method will in the end give you a better web site. Why hire experts and not listen to them?

Web designers should work with an iterative process:

The larger the site, the more this rule comes into play. I have found over the years that most clients are not exactly sure what they want until they see it. Or perhaps more accurately, they know what they don’t want when they see it! As such I have developed an iterative process in web design. My goal is to get out something for the client to see as quickly as possible so I can get feedback. You should look for this in the process of building your site as it helps to eliminate potential misunderstandings and speeds up the project production as well.

Why Style Web Pages With CSS?

The web today is a much different place than it was just 5 years ago. Technology for the web has grown in leaps and bounds and is reflected in the sites we see and the way they are built. In the past, the HTML markup language – the language that is used to build web pages, had an assortment of tags to both set the structure and the style of the page.

Today the preferred method of styling pages is something called CSS or Cascading Style Sheets. CSS is an extension to HTML, an extension whose sole task is to style pages. Before CSS, all we had to work with was HTML’s built in styling elements like the bold tag:

<b> This becomes bold</b>

There are several other tags in HTML that allow you to style your pages, but they are limited in many ways. To deal with these limitations and browser incompatibility issues, designers would resort to creating GIF or JPEG images of text rather than using raw HTML text. These images would establish the style for the pages and because HTML (at the time) simply had limited capabilities, images would allow the designers to get the specific look/layout they were after.

This could result in many images in your pages – images not just used to show off a nice photo or logo, but images used to replace text that should have been created with HTML. The only positive about this approach is that you get the exact style you are looking for, after that it goes down hill …

Having images make up your body text is a time consuming process to be sure. Now you have to jump back and forth between your HTML pages and your image editor to make changes to your text.

Many times the process of fixing one error can require many trips back and forth from the image editor to the HTML editor. If on the other hand the text were created with HTML only, the changes would take only a fraction of the time.

Another negative in using images for body text is that they begin to quickly bloat the page in terms of kilobytes. You should strive to make your pages as ‘light’ as possible so that the user can download the pages very quickly. The old rule of thumb is if a web page doesn’t load within 10 seconds you will lose most of your visitors. Even today with many people going with high speed Internet, I try to get my pages in at around 50-60k.

Another good reason to not use images to create your pages’ text content is GZIP compression. All web servers today support GZIP; GZIP is a method of dynamically compressing HTML content to as much as 1/10th of its original size!

So if you have an HTML page that is 50k, with GZIP turned on you are now only sending the surfer 5k! GZIP only works on text and not images, most images are already compressed to their maximum when in GIF or JPEG format anyhow.

Consider this: HTML not compressed with GZIP is already much lighter than the same text in image format. But when HTML is compressed, then there is simply no comparison! Ok, so now we know that we should use images sparingly in our HTML pages, but how do we get around the limitations of HTML layout? The answer is found in CSS.

CSS is very powerful as it allows you to style your page in a way that was not possible before. Up until recently CSS implementation in browsers was spotty and not consistent. As such people stayed away from it and only used it to a minimal degree. I myself am guilty of that and up until this day I still mix the ‘old ways’ of doing things with the new.

Today I will still use tables as my main structure of the page and will still use some images to create headlines for my pages, but never body text! But I think that at last we can feel safe with using CSS1 and CSS2, the first 2 specifications of CSS, being fairly certain things will work properly in all the browsers. Since IE has about 95% to 97% of the market and it supports the CSS standard well for the most part, we should be ok.

The emergence of stylistic guidelines:

When the web first started to go public and browsers became able to support sophisticated layout and images, people went wild in terms of design. It was a free for all and the diversity of styles and websites that are still out there today is evidence of that.

The problem with the anarchy was that there was no consistency in the way websites worked – navigation and other structural elements could be totally different from site to site and even from page to page. This has had a major impact in terms of usability of the web for the average surfer.

In mature software platforms, patterns and best practices emerge. These standards are put in place to make things consistent for both the guy working to build the software and for the user destined to use it. When MAC established strict look and feel guidelines for their OS there were many complaints at first but in the end it made for a much better user experience and it made it easier for the programmers to create their software.

The web today is slowly moving toward that same goal; CSS starts’ by making the styling of the pages consistent while experienced web developers have developed structures that they know work and they use them consistently on all their projects.

Over the years I have done the same, both with my programming and web design. People will argue this approach it just using templates and not original; I would argue that good ideas should be reused and that original work can be found within the context of an established working structure.

A page’s ‘mood’ is all about the colors and fonts; structure only makes it easy for users to navigate the page and website. One nice image properly positioned can make all the difference between a good-looking page and a bad-looking page.

Today I style my pages with CSS and a few well-placed images. I combine some traditional methods (like table formatting) with the occasional CSS positioned element. I am not totally CSS centric yet but plan to explore the possibilities more so over the next little while.

What you need to first start creating a website

Making websites doesn’t require much at all; a text editor like Notepad and a browser to test your code and you are ready to go if you know HTML.

If you don’t know already, HTML is what makes web pages. HTML is what is called a markup language, and what HTML does basically is tell the web browser (like Internet Explorer or Netscape) how and what to display on the page.

Like any language, HTML has rules and words that have a meaning, in this case the meanings of those words are related to displaying web pages. These ‘words’ are called ‘tags’ or ‘HTML tags’, so when building HTML pages you are actually just typing out a series of HTML tags with text and images (among other things) stuck in-between.

Example: This is an HTML tag that tells the browser to make text bold:

<b> This text will be bold. </b>

The ‘b’ in-between the angled brackets ‘<>’ stand for ‘bold’. This tag tells the web browser to make whatever is in-between the <b> and </b> bold. Most HTML tags come in pairs where there is always an opening tag: <b> and a closing tag: </b>.

There are many tags that do everything from formatting text (as we did with the <b></b> tag.) to structuring the page globally. This is the very basics and I will not go any further in this article.

Now you know the magic behind web pages! You now can guess that all those programs that make web pages (GoLive, Dreamweaver, FrontPage) are just really writing out a bunch of HTML tags for you. Don’t get me wrong, I think using HTML editors is a must, but it always good to know what these programs are doing ‘behind the scenes’.

How to view your page:

Once you have written all your tags on the page and inserted the text and links to images you want to display, all you need to do is change your actual file to have a file extension of HTML or HTM. Every computer file has a file extension (mostly) so for example Notepad produces a file with the extension of ‘txt’. So you might have a file called ‘myGroceries.txt’ if you typed out your grocery list in Notepad. So if you typed out your web page in Notepad, all you have to do to let browsers know that your file contains HTML is to change it from ‘.txt’ to ‘.HTML’ or ‘.HTM’. When a browser is directed to open up a document that has an HTML or HTM extension, it knows that this is an HTML page and it reads your tags to display the page as you intended. That is basically what is going on when you are surfing on the web.

See what Acronyms are Used in Web Design

On this page we discuss some technologies commonly used in the world of the web. The aim is to slowly introduce you to these concepts so that when and if you ever need to work with any of them, you will at least have some basic knowledge of what people are talking about.

Some basic concepts by acronyms:

HTML: HyperText Markup Language -> the written language of tags that you use to create web pages.

– What is a tag?

To explain what a tag is we need to talk about page elements. Elements are the base components of an HTML page. Examples of elements are tables, paragraphs, and lists. HTML tags are used to mark the elements of an HTML file for your browser. Elements can contain plain text, other elements, or both.

To mark the different elements in an HTML page, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are typically paired (e.g., <B> and </B>) to start and end the tag. The end tag looks just like the start tag except for a slash (/) that precedes the text within the brackets.

URL: Uniform Resource Locator -> this is the geek’s way of saying ‘address’. So for example: http://www.killersites.com is a URL.

CSS: Cascading Style Sheets -> an extension to HTML that allows you to style your pages in ways you cannot do with standard HTML. Check out my article on CSS.

XML: Extensible Markup Language -> a way to store and present data in a format readable by humans. XML is used today for all sorts of things. For example: as configuration files for web servers, as mini-databases, and as a universal means of exchanging information between computers. XML can come into play in a big way when you get into server side programming and FLASH work.

PHP: PHP (recursive acronym for “PHP: Hypertext Preprocessor”) PHP is a very popular web scripting language and engine. It allows you to create dynamic web pages easily and quickly. It is easy to learn and so once you get the basics down you will progress quickly and start writing some useful scripts. In non-geek terms: it’s an engine that runs in conjunction with a web server that allows you to create web pages that change – examples of such include guest books, discussion boards … and so on.

I’m not going to try and teach you PHP but I thought it might be fun for you to see what it looks like. PHP is very simple to use, the first thing to note is that PHP is embedded into HTML. That is to say that PHP code is intermingled to some extent with your HTML code:

<html>
<head>
<title>Example</title>
</head>
<body>

<?php

echo “Hi, I’m a PHP script!”;

?>

</body>
</html>

The PHP code is enclosed in special start and end tags that allow you to jump into and out of “PHP mode”.

The special start tag is:

<?php

And the special end tag is:

?>

Anything in-between these special tags is processed by the aforementioned PHP engine (The PHP engine is just a program that knows how to read and use the PHP code – in a nutshell). In the above example we are telling the PHP engine to do something very simple; print “Hi, I’m a PHP script!”.

In PHP (like in all programming languages) there are special keywords that tell the PHP engine to do something. In the above example ‘echo’ it is a special keyword/command that tells the PHP engine to print something to the HTML page.

So now you know PHP pages are just like HTML pages except that they have special PHP code in places surrounded by the special PHP start and end tags. Oh yeah, PHP pages have the extension (that is to say: end with the letters) ‘.php’ rather than ‘.html’.

So if you have an HTML page called: ‘books.html’ and you wanted to add some PHP in the page to for example grab a list of books from a database, you would first have to change the page name to: ‘books.php’ and then insert the PHP code into your page. You need to rename any pages that have PHP so that the PHP engine knows that there is PHP code in there. Finally, you cannot run PHP pages unless your server has PHP installed. This is very likely since PHP is free for everyone, and runs on both Windows and non-Windows servers like Linux.

If you want to learn more about PHP you might want to go to the ‘source’ of PHP.

You can get at a whole bunch of PHP scripts here.

ASP: Active Server Pages -> Microsoft’s Scripting Engine.

Active server pages is Microsoft’s PHP-like scripting engine for dynamic pages. It is different from PHP in many ways (ASP uses VBscript or Jscript as it’s programming language and it is free only on windows) but it is also very similar in that they have the same purpose of providing a means to creating dynamic web pages. If you want to learn more, please let me know and I’ll start writing!

You’ll learn more about ASP at Microsoft’s website.

JSP: Java Server Pages -> Java’s version of ASP and PHP.

You can learn more about JSP from the source.

DBMS: Database Management System: A program that provides all kinds of functionality to allow you to easily save, update, delete, and search for information. Examples of DBMS products are MySQL and Oracle, among many others. People typically refer to DBMS products as simply ‘databases’.

SQL: Structured Query Language -> the language of relational databases, databases like MySQL and Oracle. Relational databases are a type of database that has been around for about 20 years. A relational database is the most popular type of database out there today and is commonly used with dynamic web sites.

Just in case you’re confused, there are several different types of databases as there are several types of automobiles. If you ever get into database work, you’ll find that there is a 99% chance you will be working with a relational database so you need not worry about the other types. But for those wannabe nerds who really want to know, here are some other types of databases out there:

Object Databases: everything is saved as a programmic object. Has everything to do with Object Oriented Programming, Object Oriented Programming is a way/style of programming that organizes the code as conceptual objects. OOP (object oriented programming) is very popular today and can be found in languages like Java, JavaScript, and C#.

Flat File Database: Typically a custom way of storing the information in a simple text file (as in: example.txt). It was common just a few years ago for programmers to create their own database by saving the data to a series of simple text files referred to as flat files.

This is a very primitive form of database and is not normally something you need to do today with so many commercial and free database products out there that have a lot of functionality built in.

CGI: Common Gateway Interface -> the first method developed to create dynamic web pages. Usually written in the PERL programming language, CGI has been replaced by easier-to-use and more advanced technology like PHP, ASP, and JSP. Yet CGI is still used today by many people.

Because CGI has been around a long time, there are a lot of free scripts out there that you should be able to easily run on your webserver as just about all webservers support/allow for CGI scripts – to a certain degree.