Today I have scraped together my courage, and decided to show you all my first website. It all started after someone I know was thinking about having her own website. It didn't had to be flashy, just a simple site to put some information on, to make her more easy to find (She owns a stained glass studio). Because she told that 'simple will do', I thought of Kroc's articles camendesign.com/… and camendesign.com/… , and a lightbulb started glowing above my screen.
Why not try do it myself? How hard can it be? (copywright by Jeremy Clarckson :)
So I started to learn html and css, the proper way, with notepad and firefox. I followed the tutorials from wwww.w3schools.com and htmldog.com, and followed Kroc's idea's of no div's and no classes. This looked doable because it would be a simple site. And there was revision revision revision...
And now I present you: revision nr6. Take a look at it at img96.imageshack.us/… and img689.imageshack.us/…. Since I don't know yet how to easy show code, I just took a screenshot or two. I made this site while looking at (now) Firefox 4 and Internet Explorer 9. I have seen that the site is ok in Chrome and Opera, so I assume Safari isn't a problem. Internet explorer 8 and 7 are visible in the IE9 window (with the compability-view).
If you feel like commenting, about the styling, the code, beginners faults, practices that are punishable by death, etc. please do. I'm anxious to hear some criticism from experienced coders :)
A little note: the text is mostly Dutch since I'm from Belgium, but luckily the code is understandable for everyone.
So here is a more elaborate description of my first attempt at building a website. I used Kroc's idea of not using <div>'s and 'CSS-classes' and sticking with the most basic a site needs. I also describe a bit of how i build it, and what my tools are.
::The Website
For starters, I would begin with the purpose of the website: to provide a little look into what Annemie does and how some of her works look to give an idea. It serves also as a portal to advertise upcoming events. There are a few pages describing the work and the possibilities when ordering a piece of art, next to the showcases of exhibits and such. Last is a page with contact information.
::The HTML
The html itself is simply structured, with the <body> being divided in three parts: a header with the title of the website and the navigation-elements to the other pages, an article with the actual contents of the website and a footer with a copywright message. The head only contains a <meta charset> element for IE (security reasons, thanks to Kroc for mentioning this), a link to the CSS and an IF-THEN for IE8 wher a different CSS is used, together with the html5-shim to add the html5 elements to IE8 (luckily enough IE9 has no problem with the site).
*Header*
The header is just the title of the website in an <h1>, while the links to the other pages are combined in an unordered list <ul> inside a navigation element <nav>. And that's all there should be in the header.
On other websites I've visited, a much used technique is to add a background image to the header so it looks more pleasing. I'm considering to use this, but that will be for version 2 of the site.
*Article*
The article is the meaty bit of the page. Here it begins with an <h1>, followed by text, quotes and figures. Although there is not much text on the website, the styling is ready for h1-h4. The <blockquote> is only used on the 'home'-page. The other pages are mostly <p>'s and <figures>. Within the figures I did not allways add a <figcaption>, and I'm wondering if it is semanticly correct to use multiple <img>'s in one <figure>? Idem with the <figcaption>.
I am inclined to think it is not so, because I had to use a <br/> after every <figcaption> to keep the 'logic of display:block' in the site. I will change this when a first maintenance of the site is due :) It will add quite a few more lines of <figure>, but the <br/>'s will be mostly gone.
"
The images and captions tend to just float in nothing, some more structure here is needed, as you've noted. Consider starting with placing images side by side so that the width of the page is better used
"
That's also on the list of quirks, but the first problem was getting it online :) I'm thinking of placing the images in rows of two. It would make the site more compact and have less wasted space.
*Footer*
The Footer is the last element on the page. This consist only of a copywright text so I only used a <p>.
::The CSS
The CSS is ordered to follow the site's structure, so to understand the styling you just scroll down the file and see the styling roll out. There is no fancy CSS, just me trying to keep it ordered while explaining most of the parameters. The only real feature I used is the CSS-selector.
::The Javascript and PHP
Quite simple, there is none :D
::The editor and testing
I used the amazing program notepad. Altough this would seem to be the equivalent to pen and paper compared to the full blown web design sites, it did make sure I now know what I'm typing, and changing the CSS is childs play. I used html5 elements, which are self-explanatory, and thus make finding the right element in the styling no trouble.
The testing part was done in Firefox, with the .html page and .css file open next to each other. A second screen and Windows 7 has never been handier: the firefox window on one screen, and two notepad-files half-maximized with aero-snap. For the IE8-css I used IE9 in compatibity mode, with F12 I could easily switch between different versions of IE. And that is a true mess, every version does something a little bit different. THat's why I'm just going to tweak the style_ie to fit IE8.
The uploading to the server was done with FileZilla, and also self-explanatory.
::The future of the website
To conclude this post, I'm looking into the future. What itches me, what do I want to add, to remove, to tweak, to rewrite?
*For HTML*
For the html, the over-usage of <br/> must stop, putting the images in different <figure>'s will hopefully do it. Also the unicode form of the ampersand does not work in IE, I wonder why. And I think I can find a few html5 elements to structure some paragraphs better (primarily the contact page, with address and such)
*For CSS*
For the css, I currently think it's not as sleak as it could be, so finetuning with spanners is coming.
"
The menu could highlight somehow which the current page is (as most websites do)
"
@Kroc That is a good idea. I'm considering adding an "id" to the specific link/list-item, and update the css to highlight it. I believe the styling will be the hardest part, to make the link stand out, without dominating the header. If that is cleared, I could reduce the visual impact of the article's <h1>, it looks quit massive now.
*Thinking out loud*
And for dreaming along:
Javascript. If I find the time to learn it a bit, I will try to make the list of images into somesort of slideshow with fallback to the no-script version. So that the images fade into one other, changing the description with it.
Making the site work with proper links. Now the server from the isp uses 'cloaking' to show only 'annemiedevadder.be' in the adress bar and the title. I would love to make it so that the title appears in the window-top (Home | Weef ...), and that the links are actually annemiedevadder.be/home.html instead of 'users.skynet.be/fb.../home.html'.
Making a .htacces file for personalised error pages, a sitemap.xml, robots.txt etc.
::Conclude
And to finish a question. If you want to view who visits the site (how many at what period of the year, from where they are and so on..) the previous site uses a service, but when you use it, they show ads every now and then. Can you do this with google? I found something called webmastertools, but does anyone know what it actually does?
Now I'm off creating a little tutorial for my girlfriend so she can update her mothers site by herself :)
Cheers, Wannes
Wannes added on
@impressed It wasn't the fact that I was on the second page, but I only saw 1 reply with reply nr. 1 form Author with a standard text. Guess a minor glitch
And damn it, got the quotes wrong! And forgot an @Kroc. One of these days I'll post a reply, and it will be fine in one go :)
Hello Wannes. I'm glad you're having a lot of personal success with this project. Learning to make websites is just plain hard because of so much complexity inherit in the market from new browsers and old browsers and having to learn so many things at once (HTML / CSS / JS / ...)
“I used Kroc's idea of not using <div>'s and 'CSS-classes' and sticking with the most basic a site needs.”
It's not wrong to use DIVs and classes, NNF does. For my site I am making a point to developers, rather than customers.
“Within the figures I did not allways add a <figcaption>, and I'm wondering if it is semanticly correct to use multiple <img>'s in one <figure>? Idem with the <figcaption>.”
1. Yes, figcaption is optional
2. Yes, multiple images (even paragraphs of text, lists &c) is acceptable, and even ideal for figures!
However, please note that my usage of figure on my website is not very good at all. Because of CSS issues, I have often used figures too often when just the image alone would do. A figure is not just an image wrapper; images on their own are perfectly normal and acceptable. A figure should only be used in the same instance as one would be used in a book -- to provide a table of data, image or other _reference_ text that the article text is discussing.
“The Footer is the last element on the page. This consist only of a copywright text so I only used a <p>.”
You could use `<small>`, which represents legal text / side text.
“I used the amazing program notepad”
That's where I started out. There's many fairly decent Windows text editors out there now (there wasn't a decade ago), so you could look at Notepad2, Notepad++ or for something serious Sublime Text.
IE9 in compatibility mode is not a true representation of the real IE8/7/6. Use IE Collection: http://utilu.com/IECollection/ for testing older IE versions, and Firefox Collection http://utilu.com/UtiluMFC/ which contains all the separate versions of Firefox (you only need to test in 3.6 [supported], 10 [current], 11 [beta] & 12 [dev])
“So that the images fade into one other, changing the description with it.”
Have a look at CSS transitions and animations :)
“If you want to view who visits the site [...] Can you do this with google?”
Yes, it's called Google Analytics.
“Now I'm off creating a little tutorial for my girlfriend so she can update her mothers site by herself :)”
Perhaps consider a product called Unify: http://unify.unitinteractive.com/ It would allow her to modify the static HTML file without having to learn how to edit the HTML code itself. It's simple enough to use and set up, but would require that you get the domain name sorted out first.
All right, time for an update. The site has seen a few under the hood changes, including:
- use <small> for the legal text in the footer
- highlighting the current page. This meant getting familiar with z-indexes of elements.
Not much different, still need to find some time to rearrange the figcaptions and images to reduce the vast open spaces at the moment. Need to find a balance between imagesize and spacing that feels right.
All in all it was great fiddling with the html and css again :)
Wannes added on
Oh and for the web statistics side, the owner wants the previous counter thingy so after I've added it to the site, some of you might see a pop-up with an ad. Guess that's the downside of writing a site for some one else, they decide in the end.
Reply
Your friendly neighbourhood moderators:
Kroc, Impressed, theraje, Martijn
