Posts in the category "Web design & Coding".

I enjoy designing websites. People often ask why do I bother with so many sites. Sometimes it feels that I keep my many sites because I want to try all kinds of design tricks on them and practice. Do I even need a reason, an excuse?

Layout hall of shame

Pull up a chair, or a recliner, this is going to be a long story. In a nutshell: new theme! In case you didn’t notice.


At last, a new theme for the blog! How I’ve missed the CSS and HTML tweaking! I haven’t worked on a layout in ages.

“Ages” also meant that I needed to brush up my knowledge and the code needed to be updated (HTML, CSS, as well as WP functions). And so started the process which I was determined to finish this time — from scratch: 1) created empty text files style.css, index.php, header.php, footer.php, sidebar.php, and functions.php. 2) typed <html><head></head><body> in the header.php and </body></html> in the footer.php.

Then I started digging through the WordPress Codex because I couldn’t remember the template tags — and, naturally, a lot had changed: functions were deprecated and nice new features were available, such as threaded comments and fancier image handling.

I also updated some of the code to HTML5 since the HTML validator noticed deprecated elements. I like using W3Schools as my HTML/CSS reference. For instance, <acronym> tag is now deprecated in favour of abbr and I wanted to clear all those out. Why did I use acronym, which needs more typing than abbr, to begin with, I have no idea…

As you may notice from my earlier post, I ended up using the nice (in my opinion) photo of my shirt collar and smiley pin that I had as a header in one of the unfinished themes. Even though I’m really bad at graphic design (or anything resembling it), I wanted some pictures in the layout.

The theme is by no means finished. I still have some tweaking and prettifying to do, but I wanted to publish this at last. It’s going to look weird for a while as I set up the widgets and things. I’m also going to browse my old posts to check which elements I’ve forgotten to style but hopefully everything looks more or less ok. I noticed I need to do some markup streamlining especially on my pages. (The headers are not logically tagged.)

While I was looking for some inspiration from my unfinished themes, I stumbled across files from my old layouts as well as pictures of some really old ones. I thought I’d put up a little Hall of Shame in honour of this historical day.

I got acquainted with HTML in an optional computer course (some pupils did crafts or PE; I was one of the few girls who chose computers) in junior high where we were taught to indent paragraphs with <li> tags. No, no <ul> or <ol> around it because that would’ve made an ugly bullet. Just the <li> with text. (I’m banging my forehead to the desk now.)

I would be curious to see how my HTML pages looked back then as I have no recollection. (Maybe I have something stored on a 3.5″ somewhere.) I do remember that I realised our teacher was bad, which led me to pick up a Microsoft Frontpage guidebook from a bargain bin. I didn’t buy it because of Frontpage which I did happen to have installed on a computer at some point and I actually used it sometimes, but because it was a basic guide to HTML (must’ve been HTML 3) with clear illustrations. And it knew about <blockquote>.

I don’t remember what I did (HTML- or otherwise) between junior high (~1998) and the first “blog” (~2004) but I do have a vague memory of a very simple homepage that I had in the small website space that came with the Internet connection. I believe the X-Files site was my first proper site. I don’t have it up at the moment because it got stuck in the middle of a re-design that I managed to destroy by uninstalling XAMPP. (Oh, the hours I had spent on making it!) The X-Files has been off the air for 8 years so maybe I won’t put the site up anymore. Not that I don’t love the show as much as I did; the collection part of that hobby of mine could easily be made into a new sub site.

My “blog” started as a launchpad for my different sites (about the X-Files, Stephen King, my alien and font collections etc.). I wasn’t even blogging, as such, only wrote a little about the updates and maybe about music I was listening to and things like that as a side note. Because it wasn’t blogging, I have no log of the status updates and asides; they could’ve been interesting to read (just for myself, that is).

I really liked iframes back then — and I still have them in Little Grey Men which I haven’t updated for a long time because I haven’t found any new alien items anywhere! I also liked image maps which I used in the first two menus seen below. Since I didn’t have much to say on my front page, this first one was probably just a simple table (gasp!) layout. I don’t think I knew any other way to align the content both horizontally and vertically in the browser window than put a table inside a table (contents of table cells could be aligned vertically). I did this in all of the first three layouts (even though you can’t see it in the pictures); the layout part of the site was small to accommodate 600×480 screens :D. I could say divs hadn’t been invented yet back then but I would be lying. I do honestly believe that I hadn’t discovered div’s yet and I didn’t know much about CSS — although just now I noticed that I was using style sheets already with this first layout. I’m quite surprised. (Then again, the very first layout(s) of which I have no record were most likely plain HTML with e.g. font styling in <font> tags, remember those? So, I had had practise.)

October '03 to January '04

Next came a brown theme with colours picked directly from HTML’s named colours (tan, steel blue, and antique white). I called this “Cafe Latte”.

January '04 to March '04

I had fewer elements to style then and therefore creating new layouts was faster (and I had more time and energy!), so this layout stayed up for only 3 months.

For some strange reason I kept using blue in my layouts even though I’ve never liked blue! (The “steel blue” is pretty nice, though.) The next one was based on a photo I’d taken at our summer cottage and now it did have an iframe plus a transparent scrollbar (available on IE only). This one survived for only 3 months, too… Here’s “From Dusk till Dawn”:

March '04 to May '04

At this point, around March ’04 I’d started writing longer entries instead of just update notices and so I started looking into different blogging platforms. My website was hosted in someone else’s (then known as Shirasade) domain for free and I think I couldn’t use MySQL for instance. I figured I wouldn’t be writing so much anyway and kept on “blogging” with plain ol’ Notepad and an FTP client. Or as I called it, “powered by coffee and noodles.”

I really like this next one, called “Scribble”. It featured some fancy underlining (whilst making a new design for my King site I’d discovered a way to do underlines with graphics) and an animated UFO in the header!

May '04 to June '04

Finally something pushed me over the edge and I decided to start using a blogging platform. I began with Greymatter and created a new layout, “Swirly”, for it (I’m shocked by the colour scheme, I didn’t remember this one!):

June '04 to September '04

(The screenshot is from the WordPress version because I didn’t have a picture of this layout. Luckily I had backups of the files so I installed WP1.2 on XAMPP and took a picture.)

Greymatter was soon replaced by WordPress because I started getting tired of the constant rebuilding of static pages.

I modified this to WordPress’s layout system when I started using WP in July 2004 (at a time just before templates and themes); WP was in version 1.2 back then. I kept the layout for a whole 4 months in total. I had used a drop shadow in most images, so they had the green background colour for a cleaner look. It was such fun to modify them to the next layout which had bright purple background instead:

September '04 to August '10

And now. Finally, after nearly 6 years I can present a new layout. To my defense, I haven’t been on a complete coding hiatus all this time because I’ve created several layouts for my “sub sites” (X-Files, Stephen King, alien collection, Ami (the dog), fonts…). And I also have been close to releasing new themes before. Apparently I had been nearly done with a design in 2005, only 7 months after releasing the purple one. I’d actually planned on finishing it in 2007 but never did. It must’ve been the design I’d created for my course work because I can remember fighting with some silly pixels — I just couldn’t get the building blocks looking the same (or at least similar enough) across browsers. It probably was structurally too complicated. Now that I look back at the design, I’m glad I didn’t finish it. The colours are… sheesh. Way too bright.

Without further ado (especially since there’s been plenty already), I present: “Not So Serious” (no reference to Batman intended). Dedicated to my late socks.

(Funnily, the colour scheme matches those boots… At the beginning of my vacation, I took a backup of the site to use as a sandbox on a local installation of WordPress and the boot post was the newest one then.)

Hope you like it! I think I do. At least it’s a change from the purple.

Pretending to be a designer again

This must be at least the fourth time I’m starting to code a new blog theme. I’m not sure how long I’ve had this layout — +3 years in any case. (Can it be 6 years? An internet archive site showed this layout in a stored page from 2004… Whoooboy, high time then.)

First I started making a theme based on the blogging application I did for a University course.

Then I wanted to do something red…
A layout sketch

Next I started creating something around a nice photo of mine…
Collar with a smiley pin
(The pin is from my sister and I often wear it on my winter coat.)

Now I’m creating a theme around this colour palette I created at Colourlovers.com when I was planning the colour scheme for my apartment (back in 2007, sheesh).

I’m feeling this time I’m actually going to finish it. Thankfully, I have 2 more weeks of vacation left! The creation process is always very difficult for me because I can’t doodle, draw, or design the graphics, AT ALL.

all-things-me.net goes mobile

Well, only in part. I often find myself scratching my head when shopping: I stand in front of a bookshelf or a DVD shelf and can’t for the life of me remember if I’ve bought a specific book or a specific movie.

B.N. (Before N73) I used to carry a small note where I’d listed all the King books I have and, more recently, all King movies I have. Nowadays it’s easier for me to remember which King books I don’t have (that is, only Cycle of the Werewolf and any recently released — currently Blaze), so the book list is pretty much unnecessary. I haven’t listed other books I have because books are things I remember more easily. A.N. (Anno N73) I’ve surfed to my Stephen King site, to the Bookshelf page and waited, waited, waited for the pretty pictures to load. I don’t have to worry about moving too many bits because I’ve never come close to the 25 Mb per month I pay for, but it’s the wait that bothers me.

My “Achilles heel” in the remembering department are movies. Although my movie collection is small by movie-buff standards, I often buy a DVD and put it on the shelf without watching it right away. I also record quite a bit from TV. And I don’t usually have my sister with me (she remembers my movie purchases better because she usually watches all additions as soon as I bring them home; movie-deprived, that one).

Therefore, I decided to create a mobile-friendly version of my movie and King book collections. Possibly in the future I’ll make the different pages modular so I only have to update one or two files but for now the mobi site is plain and simple HTML. I set the font size to 60% so that I don’t have to zoom out on the phone. (I view pages at 50% zoom.)

Without further ado, I present: mobi.all-things-me.net. Pretty much for my viewing pleasure only. The movie collection isn’t complete because I haven’t listed all my VHSs (bought and taped) or all movies I’ve recorded from TV.

Here’s a snapshot of it on my mobile:
all things me gone mobile

Lots of will but no skill

For a long while I’ve been wanting to re-do my site — the blog, more specifically. I try and sketch, find colour schemes, and start coming up with the basic structure. The problem is, I have no graphic design talent.

Finding nice colours is quite easy, there are lots of tools to make it even easier, too. I have collected hundreds of fonts through the years and there are the selected few that I really like. But after those are taken care of, I should start making my site pretty. That’s when I hit the wall.

I can’t draw (seriously), I possibly can doodle but doodling doesn’t make pretty. Of course, I could make my site with only coloured boxes, but that’s quite dull.

I took a look at my past designs and I may just resort to using one of the old ones (coded better, of course). However, I’d really really like to create something new. Maybe I’ll finally continue with the design which was in the “final polishings” stage two years ago(!!!) — if I can find the files, that is.

How do you do it? Are you one of the lucky ones who have an artistic bone in their body? Do you use some sort of resources to help with the design?

[Edit May 18] And where do you get an idea for the design?! I’ve only managed to think of the main colour so far. Argh! [/Edit]

I just don’t have anything to say right now

I had received the following spam comment which was sort of refreshing after the “Hi Jane! I like your site!”, “Best site I ever seen!”, “May we exchange links” comments that come in the dozens.

HiHi
I’m really stupid
Yestarday I’ve got married and
today Im going make money online
So stupid
O-O-_ohh Mein Gott really you can see

Mein Gott, I’m so glad to have spam blocks.

I don’t really understand what this means:

Your site is very cognitive. I think you will have good future.:)

What is a ‘cognitive’ site?

But this is the most idiotic of all:

I just don’t have anything to say right now.

:roll:

Removing content without deleting

HTML comments show up in the source, so what if you want to remove text from the page without actually deleting it from the files?

<?php if (false) {?>
  (content to be removed…)
<?php } ?>

Tiny accomplishment

Nowadays I can’t help but feel like a procrastinator in everything else but work. The infamous magazine article is still waiting for a final glance which shouldn’t be such a big hurdle but in reality I’m terrified. An ontology is waiting to be built, an article waiting to be read, and I haven’t played in ages (except Minesweeper)!

Yesterday I did manage to finish something: a website for a relative, an entrepreneur. Usually I hate taking the smaller screens and Internet Explorers in consideration but this time I had to because of the target audience. It wasn’t so bad after all — no mysterious spaces after I put a doctype on the page. I even left the font size to default and it scales to humongous proportions (on Mozilla and Firefox). Then again, having the doctype in place, I couldn’t do trickery in order to get the smallish boxish page center vertically. Oh well, usability over looks — that’s the way to go. It’s valid XHTML and looks alright even when you remove all the images. No fancy-schmancy JavaScript either. I even made a special stylesheet for printing! Ah, gotta pat myself on the shoulder for once.

Here’s a little tasting. Nothing fancy.

Snippet of the layout

Yeah, I’m still alive

Today I read the strangest definition for ‘blog’: a website, which is regularly updated. Which means this — currently — isn’t a blog.

I clicked on to Weblog Usability: The Top Ten Design Mistakes from Blogging Pro. An interesting read but I’ve raged about item 2 in the past: using a photo. I understand that people want to see faces, but who wants to see my mug? I don’t! How shocking would it be if I posted my photo and you’d see that I’m actually male?

I am, however, going to implement some of the enhancement ideas. When I was designing this site, I didn’t find a good colour for visited links (I did notice that some of the links, in blog content, lose underlining after a visit) so I forgot about it (accidentally!). Also I’m going to try and list some of the “must-read” entries but I’m afraid I might not find any (This is a blog for dog’s sake! Not a magazine. Why do people take blogs so seriously? It’s supposed to be fun, not 2nd or nth job (for most)). I did have a category for these, something like Minna’s picks, but apparently I removed it at some point (or it doesn’t have any posts!).
(There’s a list in the archives now.)

Jafer woke me up from my work-daze. In addition to not having written in over half a month (I honestly don’t know how that’s possible), I haven’t finished a book since July! (I’ll need to check my papery booklog, but the one here says July.)

I had hard time not laughing today. A group of people were talking and roaring with laughter (at work, of course) and I was sitting at my desk. Because I wasn’t in the group I couldn’t laugh along but I kept bursting so I had to leave for a while to cool off. I went and washed my coffee mug. Interesting, innit?

Censorship

I’m the webmistress of my aunt’s website (for a stable) and I’m currently updating the photo section. There was a new photo to add with their horse and a donkey — and an enormous pile of doo-doo.

Living the last day of my Photoshop trial I decided to use the Healing Brush Tool (don’t know if Adobe Elements has it, I hope so), so I wiped the pile (no pun intended) off the photo. I hope it’s ok with my aunt. :)

Before:
Doo before

After:
Doo after

Quaint, isn’t it?

Geekazoid wars

Ahh, a potentially heated discussion at the WP forums — again (it’s like should you or shouldn’t you target external links to _blank). Table layouts and the importance of CSS.

Well, you know I think people who can’t write HTML by hand are not supposed to make homepages either, but they do (I don’t know about electronics so I don’t go fixing my TV! I know borking your code doesn’t kill you, though). They get into something like WP which, to satisfy their grandiose ideas, requires some knowledge of PHP, CSS, and HTML. If they don’t know about those and are scared to get elbow-deep in them (I think I hadn’t seen any PHP before WP, but because I know a few programming languages, the syntax came naturally), they flock the forums with lots of things they want to achieve and need help to achieve them (“Help!!!!1 this is very important! I need it done today!”).

But I do understand people who are just starting in the wonderful world of web design, who maybe know the basics but not the more “advanced” stuff like CSS. It maybe be too much to them to get an all-CSS layout, especially if it needs to be a bit on the complex side. Layouts with tables are easy! You aren’t supposed to make them, but boy do they scale nicely and you can do all kinds of cool images for the layout and just slice them up and whack ’em in a table. I know I’m maybe just trying to justify my own table layouts which I have been too lazy to change, but CSS gets frustrating at times. Maybe I should just get a few recipes up my 3/4-length sleeve that I can happily type around without going through the trial and error from scratch every time.