Cyanide

Cyanide

***-- (Rated by 4 people, viewed by 146 people)

A small{ish} site offering graphics, resources and tutorials amongst other things. Cyanide has been open for about a year and a half now, but I've been making graphics for much longer than that. =3
I'm afraid my html/css isn't all that... but I guess that's the problem with being self taught. Dx

Added by Shini in Graphics

Cyanide has 4 Reviews

Below are the reviews left by other members on Cyanide. Jump to review form?

  1. [img: avatar]
    Inga gave it ***-- on 20th May 2010 and said:

    My first impression was good. It felt like you have worked hard enough and it looks really when I took a small glance.

    Well, that is the first impression! What I noticed and didn't like was that the space between the lines was way too small. I personally dislike that I don't even bother reading something that is too close together. Also the navigation on top has a bit too small letters and you should use letter spacing with -2px. not really good looking. I use a high screen resolution and have difficulty figuring out what is written there.

    I like the variety of your content but for example "avatars all" and "avatars by series" could be combined into one page. Despite that I like how you've made them (would consider using a few myself).

    More or less you have done a great job but a few things missed out. You should think of all ways possible to make it easier for your visitors to view your site with the smallest amount of complaints.

    Using Firefox on Windows | Report This?

  2. sodevious gave it ****- on 18th May 2010 and said:

    My first impressions were, how cute! Pretty colors! And then, as I tried to analyze the page, I got kind of confused :/

    Design:
    I love the overall look, it is very cute! But, it seems 'flat'. Maybe some depth with gradients in the header? Or even effects on your logo. Other than that, the colors themselves mesh well together, and the way you used transparency was really nice. The copy is quite small, and so are the other elements on the page (navigation, footer, meta info). This could really throw some people off.

    *As a lesson from my mother, never make your text small!

    Content:
    The blog portion is well, a blog. Not much I can comment on that because it is personal. Although, below the updates box, your using proximity the wrong way. You put next/previous links far away from the area it was intended for. By putting it directly under the updates, its as if there were multiple pages of updates not posts.

    Also, your navigation at the top is also kind of confusing. I was expecting to find links like, 'home', or 'about me'. Maybe the back /forward /clear etc. kind of threw me off, but it is a new way of thinking; and different isn't bad either.

    You've got lots of site pages, which is great. It shows that you are dedicated and can really help visitors better understand your site. Although if it were me, I would put that section below you content nav, which can be the most important part of your site to some people.

    Your web layouts that you are offering look really cute and it shows that you put lots of time making them. In a cursory look at the code though, I found things like this:

    <div class=top>

    When it should look like this,

    <div class="top">

    Also, there wasn't a </html> tag, which was troubling. Also, 'class' is for elements used multiple times on one page, so things like your navigation and such should use id's instead.

    The rest of your content looks fine and you have a lot to offer, which is great! :)

    Coding:
    I found this at the bottom of your page.

    <div id="main">

    </div>

    It doesn't really seemed to be used at all. Whether you intended it as a styling element, or maybe it was a mistake but either way it wasn't a good thing to do. From a styling point of view, its been said that you should never use extra markup to purely for styling purposes. And if it were a mistake, you have to design with speed and performance in mind. If your images or files are too heavy, your site might take too long to load.

    Also, the id's con and dis were repeated, and for those your should of used classes instead.

    <div id="con">
    <div id="dis">

    Overall:
    Your site was very original and was a joy to review!

    Using Safari on Mac | Report This?

  3. [img: avatar]
    isyraroc gave it ***-- on 29th Apr 2010 and said:

    At first glance when I saw your website, I thought "Cute!" but then "Too small, too small!" I don't know, I used to be a huge fan of fonts being smaller sized (it showed up looking 8pt on my screen), but with screens getting wider and wider with every new generation... I just don't know. But that's not a problem, I'm just rambling now. :)

    I genuinely was attracted to your layout. The colors are nicely put together, the bottom graphic looks great, and I like the CSS for your navigation.

    I wasn't too much of a fan of the borders that surround your text (separating them into sections, I assume). I felt like your theme was meant to be soft, and the dark borders seem to disrupt that. I would suggest perhaps a lighter color to make it blend with the background more without completely disappearing. Or perhaps no border at all?

    The Shoutbox seems so unnecessarily wide there at the bottom of your page. With everyone's comments typically being 1 sentence long, it looks way too stretched out for my liking. I would suggest situating it somewhere else or maybe align the frame on the left and have the form on the right?

    I think the previous reviewer mentioned that it was bad practice to differentiate italic text by color, and while I would be inclined to disagree, I think the color contrast here is too much. The light tan color almost blends into the background, and differentiates it drastically from your regular text, which it shouldn't. Italic text shouldn't be seen as something separate from regular text. Although you want to emphasize, you don't want to separate. I noticed you also differentiated the color for strikethrough text. Same thing applies.

    I had no idea "tou" (in your top navigation) meant Terms of Use. Honestly, I would suggesting changing that, or modifying it so that users can tell it's the terms of use (unless maybe I'm just so out of the loop now that everyone knows what it means). Even the filename was tou, and I had to click on it to figure it out.

    I took a cursory glance through your goodies. I like your style, and the layouts you offered were pretty well designed. You offer quite a slew of goodies, all of which I would have considered using myself if I had the time. :p It's impressive.

    I wish I could be more in-depth and comment more on your coding and content, but it's getting rather late for me. I wish you the best of luck!

    Using Firefox on Windows | Report This?

  4. [img: avatar]
    Vera gave it ***-- on 26th Apr 2010 and said:

    Hello Shini. I see you don't yet have reviews, so I figured I might as well be the first one. :-)

    First Impression
    ======================================
    Lovely footer image, but it feels much too cramped.

    Presentation
    ======================================
    Like I said before, I like the footer image. Having a fixed background is also a nice touch.

    I'm not too keen on starting to read the content though, it feels rather cramped. A quick look at the code says that it's 11px, which is a decent size. Although since I'm used to staring into a computer screen all day long, it might be a bit too small for me. Incidentally, I'd suggest you use relative font sizes: namely em or percentages (%). Looking at the text better, I'd suggest you try out an off white background, or perhaps a background with an opacity of 70-80%? So that the green fields of the main background aren't completely hidden.

    I see you have two sets of navigation, though the top one is rather easy to miss. First of all, the font-size is much too small. I'd suggest you use a larger font size and possibly all caps as well. As for the actual links contained there, I'm not entirely sure why it's not enough to have them in the sidebar. Let's take them individually:

    - clear -> unless people are familiar with personal/graphics sites from 2004, I'm not sure they'd realize that clear means back to the home pages. Besides, instead of having it like this why not link the site title? Speaking of which, it's rather difficult to read the bottom of the site title. You might want to give it a border for more contrast.
    - back and forward - these links have the exact same functions as the back and forward buttons of any modern browser. Why would you need to duplicate their functionality? Furthermore, if a person came to your site for another, by clicking the back link they'd be taken right back there (and thus away from your site).
    - terms of use -> I suppose these are important what with it being a design site and all. Still wouldn't it be more effective to have a checkbox that users have to click in order to download the stuff you offer them? You know like when you sign up for e-mail, you have to agree to the terms of use.
    - exits -> why is this so important that it needs to be right at the top of the page? That keen on sending your visitors elsewhere?
    - host -> I'm sure your host is nice and all, but a link in the footer would be just as fine.

    Moving further down, I notice a large white blob... which seems to be the tagboard. A bit outdated, but I guess it's good enough to interact with visitors. Still, it's not very useful if people can hardly read what they type there.

    All in all, you have a lovely footer image, and a good color choice, but not a very good layout design. I'd suggest making the top back brown (like the background for the updates' metadata: posted on, author, comments). Have the content are be a bit larger, so that it doesn't overlap over the footer. The sidebar is much to lightly colored. I'd use a bigger top and bottom padding, ditch the affiliate links from the bottom. Move them to a links page. They make the list of links needlessly wrong. Also use a darker color for the links, to make them stand out more.

    Content
    =================================
    The brightly colored italic text really hurts my eyes. Furthermore, it is bad practice to differentiate italic and bolded text by changing their color. At first I thought they were links. It is quite enough that they letters are tilted respectively bolder.

    About
    I've always found CSS validation links (without XHTML/HTML ones) odd. As if you were trying to justify yourself, even if merely partially. Validating your site shouldn't be a goal in itself. Think of validation, the same way as you think of checking your spelling. If you spell correctly, there's a bigger chance that you'll be correctly understood. Similarly, validating your site will help a browser interpret it the way you want it. That being said, there's no need to display a validation link; it's something that should happen automatically.

    Contests Joined
    This only has one button so far. Why not combine it with the Awards page?

    Credit
    If you don't need to give something credit, then don't. It's rather weird to see something like "Listings none". Oh and the striked out text is illegible. Change the color.

    Terms of Use
    You keep misspelling "redistribute" as redistrobute. I'm sure this is just a slip up though, since for the most part your spelling and grammar are great.

    Layouts
    Interestingly enough, the layouts you offer for download are all much better than the one you use for yourself. Normally I see the opposite. Only problem with them, is that you use anime and game pictures which you are not allowed to make derivative works from (i.e. avatars, layouts, etc) without the permission of the creators. I'm pretty sure you don't have them, since it's cost you quite a lot.

    Since you offer these layouts for download, let's look at the code: how correct and easy it is to use. I chose your latest design, since that should (in theory) reflect your coding skills best. Congrats: your coding is well indented and for the most part well thought out. It is not, however, optimized and up to the latest standards. For example, your links list should be an HTML unordered list (ul), instead of being wrapped inside a paragraph. You can find two very handy articles for this on Tutorialtastic:
    http://www.tutorialtastic.co.uk/tutorial/horizontal_css_block_navigation
    http://www.tutorialtastic.co.uk/tutorial/semantic_css_block_navigation
    You also seem to suffer of a bit of so-called "div-itis", which means that you are using too many div tags. Why not customize the paragraphs to look the same as the divs with int class? It's much less of a hassle for someone not very familiar with HTML and CSS, but who would want to use your layouts.
    The CSS is incredibly neat and well thought out. Only thing I'd suggest is to use shortened code whenever possible.
    For example, instead of:

    padding-top: 1px;
    padding-right: 2px
    padding-bottom: 3px;
    padding-left: 4px;

    you should have (in that order)

    padding: 1px 2px 3px 4px;

    The above is not an exact example used by you, but it should show your the correspondence between the two types of codings.

    Avatars: all, by series
    Instead of having two links on the sidebar for showing all avatars, or for showing them by series, why not have only one links, and on that page also provide users with the possibility to filter avatars by series? For example, list the series inside a select box.
    The avatars themselves are rather run of the mill though. Seen this countless times elsewhere.

    Wallpapers
    Hm... these look a lot like your layouts. Which is not bad, but you might want to try different styles as well.

    Resources
    Most of this stuff is illegally offered (like I said, you are not allowed to make derivative work, or to offer these for free). Ironic really, how you demand the same for your own work.

    The brushes, textures and stock photos are not bad though.

    Your tutorials seem to be a bit repetitive, really. After all how many ways are there to make an icon? And by ways, I don't mean method 1: use effect X, method 2 user effect Y etc etc. Just like I assumed, this is exactly what your tutorials are: explanations on using various relative simplistic methods. Well yeah, I guess this is useful for beginners, but have some other tutorials as well. Or rather, apply these effects for some other types of graphics.

    Coding
    ===============================
    Just like with your linkware layouts, your own site's coding is very neat and for the most part very logically thought out. Unfortunately, even here you still show signs of divitis. Read up on more advanced CSS articles (I suggest http://smashingmagazine.com or http://alistapart.com ), to see ways in which you can optimize your coding and use CSS to the fullest.

    I see you're using an external stylesheet, so why is there an empty div like:

    <div style="position:absolute; top:0; left:0; background:url(images/top2.jpg) repeat center; height:350px; width:100%;"& gt;
    </div>

    Why not give it an id, and have the styling specified for that id?
    As for the purpose of this image, I would have done it differently.


    <div id="top">
    <div class="banner">
    <a class="title" href="#"><span class="hide">Cyanide</span></a>
    <ul class="hori">
    <li><a href="http://cyanide.chanlu.org/">Clear</a></li>
    <li><a href="javascript:history.back(1)">Back &laquo;</a></li>
    <li><a href="javascript:history.forward(1)">&raquo; Forward</a></li>
    <li><a href="tou.php">TOU</a></li>
    <li><a href="link.php">Exits</a></li>
    <li><a href="http://chanlu.org/" target="_blank">Host</a></li>
    </ul>
    </div>
    </div>

    and the CSS

    .hide {
    display: none;
    }

    div#top{
    height: 350px;
    color: #382323;
    text-align: center;
    }

    div.banner{
    margin: 0 auto;
    width: 600px;
    position: relative;
    }

    div a.title{
    position: absolute;
    bottom: -10px;
    background: url(path/to/title_text.jpg) no repeat 0 0;
    }

    The horizontal unordered list's code can be done with the method listed in Jem's tutorial, or you can specify display: inline for the list items (li tags). Speaking of the list: li tags need to be enclosed inside opening and closing ul tags, not opening and closing div tags.

    Arguably my coding solution, might seem more complicated as far as CSS goes, however the HTML is more easier to reuse for a future layout. It's very late now and I'm sure I didn't explain things quite as well as I should have. If you need any help, don't hesitate to send me a message. I could make a functioning code for you if you want to.

    Your CSS is also fine. For future reference you might consider adding comments as well, to make it easier to track certain parts of it down.

    Score: 3/5

    You have a lot of nice things, unfortunately for the most part you rely on anime/gaming images to make your work.
    Your coding needs to be cleaned up a bit, and your color choice for text is in dire need of change. My eyes hurt. Work more on making original stuff and you'll be on the right track.

    P.S. Sorry about the weird words/phrases am too lazy to proofread :P Yeah, I'm a bad reviewer.

    Using Firefox on Windows | Report This?

Write Your Own Review

Leave your feedback for Cyanide below, and remember - the longer your review, the more points you receive. Don't forget to look at things like style/design, content, coding and originality as they will all help to improve the quality of your review.

You have to be logged in to write a review.