Izi
May 24th, 2011, 02:34 PM
I was working on the CSS for my website this morning and thought I would create a thread to share important information about various problems I encounter in the web development process. I do all of my own coding and understand the basics of web design from working on professional Web Dev teams as the artist, doing a tiny bit of cleanup code and overhearing frustrations voice by the programmers. I would love to hear other artists talk about code wrangling or about other problems they see unique to the artist web presence situation. Good examples, bad examples, etc.
What I understand now for the 2011 year is "CSS GOOD, OPENING NEW WINDOWS BAD"
About my website:
Even though my website features art from more than one person, since we are a design team, it's still my main link to refer customers to. My files are labelled "templatemo_26.jpg" etc. like a total noob. (it's ok, I don't build websites for a living, I just make graphics for them sometimes) Looking at "my" source code reveals a slick little site built on the shoulders of CSS geniuses (well they are geniuses to me). The free template itself was named "Fruit Art" and had this silly color scheme of red and black, with a bowl of fruit. "Diamond in the rough!" I mentally shrieked, downloading it greedily to find out how I could corrupt it with my art.
Here's a before and after shot:
Fruit Art:
http://www.templatemo.com/preview/templatemo_199_fruit_art
Ningishzidda Art:
http://www.ningishzidda.com/mutationalalchemytarot.html (http://www.ningishzidda.com/mutationalalchemytarot.html)Edit: (this link was edited due to the following post!)
The top two scripts artists need to know about for implementing into their site are Lightbox and Mootools.
Lightbox and Mootools
Lightbox is the script conceptart.org uses in the galleries at the top of the forums. I've used it before, it's safe and sane and not too hard to implement. I use Mootools for their Slideit feature, a simple and sleek slideshow bar that actually came with the template . I found it a little too n00bish to just link straight to the jpeg from the Slideit bar.
I thought I would try to incorporate Lightbox into my Slideit bar, but after an hour of research, uploading test html files, swearing, mumbling to self, and code editing I found out Mootools and Lightbox have known compatibility issues and can't mesh unless you're some kind of programming genius I guess. (if anyone has any ideas on how to make this work simply let me know)
Good Example
For now I'm just going to have to decide if I want a bloated set of html pages for each individual image. Ken Wong has an excellent and simple example of this time consuming setup right here, however it's also a very professional looking result if you're not staring at the wall of insurmountable .html files on your server behind the scenes. Anyone can build a website like this if you know basic HTML.
http://www.kenart.net/index.htm
I love that when I click on an image, I get art, instead of an awful eternal loading bar or other nonsensical result as I do on most other artist's websites. Updates are simple and relevant on the side. Even though it doesn't have a lot of bells and whistles, it's one of the few artist websites I don't leave out of sheer frustration (without seeing a single piece of art)
Bad Example
To illustrate, recently a movie premiered in the Pacific Northwest about occultism. The website is horrible, but functional, I was able to view the trailer, find out about the producer and the name of the artist who designed the sets. (You can view the website here (http://www.verticalpool.com/fallingup.html).) I decided not to go see the premier, but I wanted to know more about the artist, his shit was pretty cool.
Here's the link:
http://beaucaughlan.com/
The first thing you get is an odd little yellow and green animation in the top left (depending on your connection speed). You have to be quick to notice it, but it's there. Like a lemon and lime conducting some sort of exhibitionist sex crime.
The website loads, and at the top a weird animated banner greets you. I have not a lot against animated banners, if the artist really wants them, and if they are attractive and load quickly. This grainy, pixelated mish mosh of "distressed" imagery looks like a website from the late 90's when animated gif's were in and "gigantic" 320Mb.tif files of naked girls wern't so daunting - we had bandwidth and it didn't take 3 hours to download one image.
Then we have a lovely tiny photo image of a gallery that the artist has presumably shown in. With green pancakes all over it. I sigh.
This artist has really lovely art. If you can get to it. Guarding the easy access to images is an evil slideshow that tries to load an autoplay feature if you try to wrest control for yourself. There is no visible pause function. Images are tiny and hoarded - the gorgeous photos of murals flit away, replaced by something else. Try to go back, the slideshow feature will start loading again with an annoying fadein effect.
Argh.
To be honest, the only reason I am revisiting this website is because it is the most recent bad example that I could locate again in recent memory. I didn't even bother trying to load the images the first time. The lemon and lime having sex followed by green pancakes and memories of web surfing in High School didn't have my hopes very high. It's sad because his stuff is really decent.
Today I'll be deciding if I want to go ahead and make an html file for each image on the site to link to. I have done this before and it's not fun. I might just leave it alone and let people find out more from Deviantart or whatever.
I am breaking the "open new window" rule in the links from images in my Slideit bar. Reluctantly I edited out the target=blank and put in the parent rule when I realized you can definately choose "open in new tab" on right clicking in the Slideit bar. I have to admit this is one web faux pas I should never have been guilty of...
What I understand now for the 2011 year is "CSS GOOD, OPENING NEW WINDOWS BAD"
About my website:
Even though my website features art from more than one person, since we are a design team, it's still my main link to refer customers to. My files are labelled "templatemo_26.jpg" etc. like a total noob. (it's ok, I don't build websites for a living, I just make graphics for them sometimes) Looking at "my" source code reveals a slick little site built on the shoulders of CSS geniuses (well they are geniuses to me). The free template itself was named "Fruit Art" and had this silly color scheme of red and black, with a bowl of fruit. "Diamond in the rough!" I mentally shrieked, downloading it greedily to find out how I could corrupt it with my art.
Here's a before and after shot:
Fruit Art:
http://www.templatemo.com/preview/templatemo_199_fruit_art
Ningishzidda Art:
http://www.ningishzidda.com/mutationalalchemytarot.html (http://www.ningishzidda.com/mutationalalchemytarot.html)Edit: (this link was edited due to the following post!)
The top two scripts artists need to know about for implementing into their site are Lightbox and Mootools.
Lightbox and Mootools
Lightbox is the script conceptart.org uses in the galleries at the top of the forums. I've used it before, it's safe and sane and not too hard to implement. I use Mootools for their Slideit feature, a simple and sleek slideshow bar that actually came with the template . I found it a little too n00bish to just link straight to the jpeg from the Slideit bar.
I thought I would try to incorporate Lightbox into my Slideit bar, but after an hour of research, uploading test html files, swearing, mumbling to self, and code editing I found out Mootools and Lightbox have known compatibility issues and can't mesh unless you're some kind of programming genius I guess. (if anyone has any ideas on how to make this work simply let me know)
Good Example
For now I'm just going to have to decide if I want a bloated set of html pages for each individual image. Ken Wong has an excellent and simple example of this time consuming setup right here, however it's also a very professional looking result if you're not staring at the wall of insurmountable .html files on your server behind the scenes. Anyone can build a website like this if you know basic HTML.
http://www.kenart.net/index.htm
I love that when I click on an image, I get art, instead of an awful eternal loading bar or other nonsensical result as I do on most other artist's websites. Updates are simple and relevant on the side. Even though it doesn't have a lot of bells and whistles, it's one of the few artist websites I don't leave out of sheer frustration (without seeing a single piece of art)
Bad Example
To illustrate, recently a movie premiered in the Pacific Northwest about occultism. The website is horrible, but functional, I was able to view the trailer, find out about the producer and the name of the artist who designed the sets. (You can view the website here (http://www.verticalpool.com/fallingup.html).) I decided not to go see the premier, but I wanted to know more about the artist, his shit was pretty cool.
Here's the link:
http://beaucaughlan.com/
The first thing you get is an odd little yellow and green animation in the top left (depending on your connection speed). You have to be quick to notice it, but it's there. Like a lemon and lime conducting some sort of exhibitionist sex crime.
The website loads, and at the top a weird animated banner greets you. I have not a lot against animated banners, if the artist really wants them, and if they are attractive and load quickly. This grainy, pixelated mish mosh of "distressed" imagery looks like a website from the late 90's when animated gif's were in and "gigantic" 320Mb.tif files of naked girls wern't so daunting - we had bandwidth and it didn't take 3 hours to download one image.
Then we have a lovely tiny photo image of a gallery that the artist has presumably shown in. With green pancakes all over it. I sigh.
This artist has really lovely art. If you can get to it. Guarding the easy access to images is an evil slideshow that tries to load an autoplay feature if you try to wrest control for yourself. There is no visible pause function. Images are tiny and hoarded - the gorgeous photos of murals flit away, replaced by something else. Try to go back, the slideshow feature will start loading again with an annoying fadein effect.
Argh.
To be honest, the only reason I am revisiting this website is because it is the most recent bad example that I could locate again in recent memory. I didn't even bother trying to load the images the first time. The lemon and lime having sex followed by green pancakes and memories of web surfing in High School didn't have my hopes very high. It's sad because his stuff is really decent.
Today I'll be deciding if I want to go ahead and make an html file for each image on the site to link to. I have done this before and it's not fun. I might just leave it alone and let people find out more from Deviantart or whatever.
I am breaking the "open new window" rule in the links from images in my Slideit bar. Reluctantly I edited out the target=blank and put in the parent rule when I realized you can definately choose "open in new tab" on right clicking in the Slideit bar. I have to admit this is one web faux pas I should never have been guilty of...