Weblog
22/02: A simple HTML and CSS tutorial : The basics
The Internet is full of many wonders. Since its messy birth several decades ago, it has grown into one of, if not the best places to publish information you wish to be seen by millions. As little as 10 years ago, such a statement would be laughed at. The Internet was nothing more than a new fangled toy, a gadget for geeks in Silicon Valley and dot com entrepreneurs. These days, though, the Internet is everything. And the Internet is everywhere. Websites spring up daily, numbering in their thousands. Well designed websites, poorly designed websites, massive websites, tiny websites. Websites to make you go "Ooh!" and websites to make you run away screaming, clutching your scorched retinas(warning - contains purposely terrible design)
Behind each and every one of these sites, though, lies something much more mundane. Click "View | Source" on any good browser and you'll be presented with what looks like page after page of confusing, poorly laid out text and symbols. "What is this?!", I hear you cry. That, my friend, is HTML, the language of the Internet.
Of course, any web designer worth his salt (or graphics tablet, or wireless mouse, or whatever salt is equivalent to these days) knows what HTML is, and what it does. Any good designer should also know how to construct a website using HTML. But some still persist in using software such as Frontpage to piece together their HTML code, which results in messy, unintelligible HTML code that some other designer will no doubt have to decode at some point down the line.
Learn HTML
Now, I'm not saying programs like Frontpage are a bad thing. It's a great way to get started in web design, and allows you to piece together simple websites and analyze the code produced to see how things are really done. If you don't know your <span>s from your <div>s or your <a>s from your <b>s, then you can easily get Frontpage to stick them into the code for you, and you can see how they're used. But it's messy, and inefficient and prone to errors.
The problem is, HTML doesn't come in handy little blocks you can stick together so easily. Creating something like a table of data requires many different "tags" and elements to give it a unique appearance and feel. You wouldn't build a house by putting up premade walls complete with windows, curtains and wallpaper. You would start with the bricks and mortar, layer them one by one and it may take a little longer, but once you get the hang of it you can build anything - seriously, nearly every simple feature on every website you see (with the exception of things coded in Flash or Java) can be achieved with a mix of HTML and CSS
Creating your own HTML code can seem like a daunting prospect. After all, it's like having the training wheels removed from your bike, you've got to head out there on your own without Frontpage to support you. It's a brave first step, but it's not as hard as it seems. Take the following, as an example (if you wish, save this text into a blank text file, say called webpage.html and open it in a browser, or double-click on the file, it should load automatically)
<html>
<head>
<title>My Test Page</title>
</head>
<body>
<h2>Sample Page</h2>
<p>Here's some text to get you started</p>
</body>
</html>
That is an HTML file, pure and simple. What will that output though? Here's what...
Sample Page
Here's some text to get you started
And the title of the page - the title appears in the very top bar of the browser window - will be "My Test Page". So, you can see how simple it is to construct basic HTML. Now, moving on...
Learn CSS - It's the milk in your tea
"Oh no!", you're possibly saying, "More things to learn! Milk?", well, yes, unfortunately so, but CSS is the second part of this wonderful story. CSS (Cascading Style Sheets) are what butter is to toast, wallpaper is to walls and milk is to tea (yes, I know some people drink tea without milk, but that's just wrong!)
CSS adds flavour to HTML, it adds shine and flair. It also allows you to remove the job of styling and decorating from the .html file and place it somewhere else, to allow you to edit the appearance easily and without fuss in a .css file.
CSS can be inserted into HTML by the use of "id" and "class" tags in HTML code. Take, as an example, the following HTML code
<span class='bold_orange_text">bold orange text</span>
Now, that might not look like much, and indeed it doesn't do anything terribly special, not until you place, within a CSS file (or inside the HTML file itself, inside <style> tags) the following declaration
.bold_orange_text {
color : orange;
font-weight: bold;
}
which results in...
bold orange text
Neat eh? If you place this CSS code in an external file (say, called "style.css" in the same directory as your HTML file) you'll need to tell your html file how to find the CSS file you want to use. At the top of the HTML file, between the <head> tags, place the following...
<link rel="stylesheet" href="style.css" TYPE="text/css">
This will load up the external CSS file and apply the rules you've added inside it to your HTML file. Et voila!
Plaintext editors
"But, what can I use to edit HTML? Do I need a fancy program?", I hear you mutter? (Ok, I'll admit, I can't hear you saying any of these things, but I'd like to think it's a reasonable guess) Well, you need nothing more complex than a simple text editor, both for the html (simply create or edit a .html file) and the css (inside the cryptically extensioned .css files). Here's a couple I'd recommend, just because they're great
Notepad - What, that dinky little text editor in windows? Yep! It's good enough to build pretty much any webpage you can dream of. Since HTML is just plain text, nothing more, all you need is a text editor. Of course, you might want some extra features to make things easier...
Crimson Editor - a wonderful little thing, with enough features for the budding web developer to happily tap away at html code and experiment in the arcane arts of css. It allows you to highlight HTML code in special colours too, to mark out keywords and to display any errors that may have cropped up. [link]
Eclipse - One for the big boys, Eclipse isn't a simple text editor like Crimson, instead it's as complex as you'd like it to be. It contains pretty much anything you'd need to develop a large scale application, including project management, integrated version control systems, code completion, [insert long list of jargon here]. Best of all, it's completely free, and excellent! So good, in fact, it's what I use whenever I'm working on any site larger than a few pages.
Eclipse comes in many flavours, and can be used to develop from anything from C to Java to PHP. It takes a fair bit of getting used to and really isn't suitable for doing simple HTML pages, but once you've mastered HTML and CSS and feel like taking on something a bit juicier, it's a good step in the right direction! [link]
Now, as for actually building your website, and understanding all the technical details of HTML, CSS and numerous other web technologies, that's another article altogether!
21/02: CakePHP - MVC Framework
We've recently started offering a website design service which utilises the up-and-coming framework, CakePHP, which is feature-packed and offers a new way of looking at project development. Not only does it reduce the time it takes to build a site, but it also allows for a reduction in complexity, an increase in productivity and an all-round improvement in the way in which we do businessHead on over to our "Large Projects" page to learn more, and get in touch for a quote if you're interested
19/02: The ugly side of web design
On my journeys around the internet, I've often been puzzled at the choices made by developers when choosing features for various websites. Some seem out of place, others seem like overengineering. Getting the balance right between functionality and form can be a tricky thing1. Beauty is only skin deep
It's true that beauty is in the eye of the beholder, but sometimes too much emphasis can be placed on making a website "beautiful" while the functionality of the site suffers
The main purpose of any informational website is to inform, and to do so in a way that provides an enjoyable experience for the visitor that they will, hopefully, wish to repeat at some future time. The way in which this information is presented may not always be the most visually pleasing, but websites which appear distasteful to the visual senses may still be very successful. After all, the most popular novels are not always (indeed, hardly ever) the finest examples of the genre! Likewise, traditionally beautiful websites are not always successful.
It takes a lot of thought and consideration to fathom exactly why any particular website has the effect on people that it does (Why are my visitors visiting page X and not page Y, Where do my visitors come from, where do they go? Why are my visitors not buying my products?) This area of website analysis - Analytics - is deep and complex, and you can easily get lost in the maze of statistics produced by even a medium complexity website without a knowledgable guide. The deeper this well of information goes, the more you have to consider various elements of your site, and how they are presented - clean and concise navigation, information that can be easily found, and design elements that will not drive away visitors due to overdesigned or cumbersome interfaces.
Of course, maybe the opposite is true. Maybe, in some cases, people do want complexity and clutter. Take MySpace, for example...
2. The MySpace phenomenon
Granted, MySpace may well be declining somewhat in popularity these days, being overtaken by the likes of Facebook or Bebo, but it is a fine example of how incredibly ugly websites can be popular. Since its conception in 1999 as a simple social networking experiment, it rapidly expanded to become the number 1 force driving the current "Social Networking" phenomenon. This, despite the fact that the individual pages, or profiles, on MySpace were designed by the users themselves, allowing the public at large, for the first time, to imprint their identity upon such a large-scale operation.
The end result of this was a network of shiny, noisy webpages, each the unique result of one person's desire to be different. And different they were - page after page of YouTube videos, animated graphics and music players would bombard the senses. And you would think, for any commercial company, such a diverse and varied range of page appearances and experiences would cause disaster, confusing the average visitor and causing a hasty exit, but that variety is exactly what was appealing to people, in the millions.
Facebook was yet to come along and reverse this trend, preferring uniform, rock-steady design over user-customisable profiles, but MySpace had already proven that an ugly site is not necessarily a bad site. MySpace, under its brash exterior, does include a great deal of functionality, and continues to grow and expand. It is on top of this functionality that users were permitted to scribble and scrawl their thoughts and dreams.
3. Form vs Functionality
Now, it's fair to say that not every company can get away with creating a criss-crossed network of noisy, retina-scorching pages. In fact, it is pretty much commercial suicide to take the MySpace approach and allow your visitors to scribble all over your corporate identity. But what can we learn from MySpace, and what does it tell us about how people behave on the internet?
When building a website, a lot of attention has to be given to how people will react when they first view a certain page. Will they want to stay? Will they want to click on through to see that lies beyond? The exact way in which we can keep people's attention varies, depending on the purpose of the page, but it is not always what we think it may be. You might consider a particular type of font-face, or a certain colour to be eye catching, or a combination of animated banner header and dynamic sliding menus to be effective in catching attention, but it is not these specific elements alone which will ensure the success of your site. Something else, something less substantial is at work.
Think of your website as a canvas, a blank slate upon which your products and your information is drawn. Consider if your website were hanging in an art gallery. Consider that the average user might not even see your fancy menus, your carefully considered font-face within the first 5 seconds of their visit. Consider that, what matters is the overall appearance, and the impact it has, and not the individual elements
Good art can be beautiful, great art can stun the senses. Art can also be ugly, divisive and strange, but it will always gain your attention. Much like a well designed website - when built correctly, and with due consideration - draws the eye, and intrigues the viewer.
19/02: A new Solarise Design Blog,,,
In the beginning God created the heaven and the earth.And the earth was without form, and void; and darkness was upon the face of the deep.
Many years later, after considering the fact there was a dark void in his website, Robin said, "Let there be a blog". And there was a blog.
Robin saw the blog, that it was good. Although he wasn't toally happy to begin with, and decided to change the custom layout a bit...
Creating a blog isn't a difficult thing. I set this one up in about 5 minutes, and applied a new layout, or "skin" in about another 5. And what is the purpose of the blog, you may wonder? Well, it's partly to keep you updated with news of my business, solarisedesign.co.uk, partly to wax lyrical about the nature of things and partly just to write words for the fun of it!