The old www.artbyherbie.com website was a simpler affair than this one. Back in early 2008, I registered the domain name because I wanted to showcase my wall art. I was becoming renowned as a ‘shit hot’ wall artist around my neighbourhood and felt a web presence was mandatory. I was already a confident web designer and I started jotting ideas down for the site.
As a creative designer, I wanted something unique and eye-catching whilst allowing the user minimal input (clicks, scrolling blah blah blah) so that they could view my portfolio with ease. The old site is still ‘live’, albeit on a sub-directory of my domain and you can see it here. I stopped updating it around September 2009, when I started developing www.artbyherbie.com V2.0, using WordPress. Click the picture below to see the old site.
Layout – Inline Frames
I used to rely heavily on DreamWeaver as my HTML editor. I would create full websites and then publish them through DW’s onboard publisher, or FTP. Back then before I delved into the world of php and content management systems, it was simply a case of laying out my pages in my graphics software, and then transferring the images and layout using div tags and inline frames. Aesthetics and graphics always looked great, but functionality and user interaction was limited. I opted for a single index page, within which there would be FOUR inline frames. I chose this idea because it meant my users wouldn’t have to navigate different pages. Instead, the content area of the various inline frames would change.
The layout I decided on was a bit ‘unorthodox’, but hey, creative design is exactly what I’m about, right? I created a 900px by 150px image of a wall with the ABH logo, with abstract sillouettes of a graffiti artist and his equipment. I decided to use this as the footer graphic, with all my content and navigation above it. This eliminated any user scrolling. Yeah I know, I’m a genius.
This was a static site, not at all dynamic and interactive like the new one. All my various pages content would show in the far-right inline frame. Only this area of the screen would change depending on which navigation button was clicked. I had to save each page as a seperate HTML file, and then link all the pages to the inline frame.
I created thumbnails of each and every image to be used in my portfolio. These thumbnails were aligned in a list format on a separate HTML file and then called from the inline frame which displays the thumbnails. I had to make sure the scrolling element of this frame was active because I wanted all the thumbnails to be available by scrolling down, as only three or four would be visible in the space. When clicked, the left inline frame would show the same corresponding bigger image. This was laborious as I had to create two sized images for each portfolio photo, and my dimensions were strict so that everything would fit in the allocated space.
Old versus New
I had been reading about content management systems such as WordPress around the time I was developing the old site. Deep down, in my heart of hearts, I knew this was the way to go in regards to new technology and Web 2.0. However, my wordpress skills at this time were basic and php was new to me. I opted to go with what I knew and went ahead and created the site in DreamWeaver. Updating meant adding new photos and content, as and when needed.
It’s been four months since I dove head first into the new site, this one you’re on right now. To say the least, the learning curve has been steep! WordPress, xhtml, php, template files and the blogging world in general was new to me. However, I am so glad now that this site is shaping into the creature I so much want it to. The benefits are HUGE. Users are able to post comments and links to me and I have a lot more functionality and features. There’s so many advantages such as better SEO and exposure on the web.With plugins attached, anything is possible. For me, this was a HUGE step forward from ststic websites. I say to anyone looking at WordPress or any other CMS as a replacement to your old web development methods – ‘What the hell have you been waiting for?’