Animara looks like a site created by something who is relatively new to web designing. This being concluded by examining the layout. The layout is poorly made: bad quality, lack of originality, and bad mixture of colour scheme. The fact that this is a graphic site and a domain is hard to believe, and if you’re trying to scare away your visitors, I believe the mission has been accomplished.
Site: Animara.org
Type: Resource
Owner: EternalSorrow
Reviewed By: Misao
Date Received: 01/24/08
Date Completed: 03/22/08
Preview
I only have one word for this layout: disasterous. I don’t know what you were thinking or what you were using, but whatever it was, it is definitely not enough for a graphic site. In order to create and maintain a successful and respectul graphic site, you must first be able to create respectful and accomplishing layouts. You failed in that respective. The choice of colour matching is awful. The quality of the layout is neither excellent nor poor. The skills and effort placed into the layout is next to none. Why couldn’t you have spent a little more time?
Look at the header for an example. Those three little spikey curly things are awfully drawn with a round brush using the mouse, but were not given care as to the shape, contour, and form. Splotches made by a round brush is not considered art. There wasn’t a lot of effort placed in choosing a font size or font type for the title, much less a better position. The image of whoever the girl is, is not properly feathered into the background. The dash/dot divider underneath the introductory box in the header is unnecessary. The background to the menu does not collaborate well with the header style (it looks like an attempt at two styles). DO NOT attempt anything by inspiration if you cannot replicate what the original creator have done.
Screenshot One - This is a screenshot of your layout marked in red with descriptions on the areas where improvement is of high need.
Now onto adaptability. The layout is misaligned when viewed with Internet Explorer. Since there is warning and Animara is a graphic site, it is to be expected the site can be viewed with both IE, Firefox, and if possible, Opera. The alignment of everything other than the header message (menu links, tagboard, updates) is misaligned because margins and paddings are not properly defined. Screenshot Two captures the errors when viewed with IE.
A closer inspection into the HTML coding helps me in understanding why the layout looks so out of place. There is not much coherency or organization. The HTML does not flow. There doesn’t seem to be much consistency nor is there an understanding of certain attributes. For example, div class is used in specifications for section heading levels. The class value is typically used reoccuring, much like the menu headings, which was used correctly. Div id is used in specifications for unique elements, and typically is not reoccuring. The best context to use id value is in specifying the container divider, which in your case is the center, bg, bg1, bg2, etc. elements. It is obvious you did not follow this simple rule.
Closing link reference tags were capitalized even though the opening tags were not (</A>). There are no closing paragraph tags anywhere on the document. A style sheet was included but not fully utilized, which honestly is pointless. You’re just wasting space for not using it. There are also no closing table tags (</th>, </td>, </tr>). I am not surprised the coding failed validation.
The style sheet is not any better in organization. As a matter of fact, it looks even more confusing. I have no idea what you’re doing or why you are making simple coding ten times more complication. I am not going to re-write the style sheet, because it will take too long and I will go insane before I complete the task. A few common errors to think about:
margin: TOP RIGHT BOTTOM LEFT. The same goes for defining padding.Despite the fact that website is not visually appealing or attractive, the organization style (structure of the updates, content and links) is sufficient. The introductory paragraph was brief but informative enough that visitors cannot mistaken the site for anything else but a fanfiction and free graphics website. The bookmark link is a great idea though it isn’t as visible up in the header as it would if you’ve moved to ‘Site’ navigation.
You may want to change the ‘back to top’ link at the bottom of the page to an actual back to the top link and not a link back to the homepage. You can achieve that by inserting <a name="top"> at the top of the page right after the body tag and insert <a href="#top"> as the link for ‘back to top’. The site map was somewhat helpful though there really is no need to break each fanfic series section down to individual titles since some of the fanfics have yet to be written.
The background to the page title header is really ugly. It does not blend into the background, the colours are not coordinated, and the size is completely wrong. The length of the text is longer than the background. The last bit of the last sentence need to be re-worded. “Please read the rules and requirements before sending in an application using the contact form.” The use of ‘through’ sounds awkward.
I like the variety of buttons you offer to link back, though none of the buttons being offered come as a set with the layout. Consider making a few larger banners in case some sites prefer banners over buttons for linkware. You might want to edit or contact the website owners in regards to these two links: Nisec Graphics and Second Eden Designs. Also, try not to justify the link text as it may break up the text onto two lines with a huge gap in-between the words like Second Eden Designs.
The opening line to Site History is misleading. What ratings? Review ratings or audience rating? You may want to consider including an introduction to this before jumping right into you leaving fanfiction such as “I began writing fanfiction at the age of ##. I have an account at Fanfiction.net under the username [you], which I still use occassionally. But several years ago, the audience ratings of my fanfiction began to exceed to those at Fanfiction.net so I began to search for other options.” Erase the last sentence from the third paragraph. You’re speaking of the site in past tense (site history) yet you’re writing in present tense and using words like ‘currently’ to stress the present. This is a bad habit.
Do not use words like ‘fandom’ and ‘canon’ in the definition of fanfiction. A definition should use simple English words (not abbreviation or slang language) to explain the subject. Consider this version of the definition: “Fanfiction is a fictional story created by fans of a specific series/book/etc. using the characters from within the medium. Often times arguments erupt over the representation of the characters, as the issue of what is canon and what is not tends to be a hot subject, couples that are matched in the original series/book.etc. versus matching of non-couples as couples in the fanfiction.”
I dislike the Creator page. I don’t understand the creator profile. Whatever you did listed under usual bio information IS NOT usual bio information. This is usual bio information:
Real name:
Online Aliases:
Age/Birthday:
Ethnicity (optional):
Location (optional):
Favourite Anime:
Favourite Manga:
Favourite Anime Movie:
Other Sites: Fanfiction.net, DeviantArt
What you have is called ‘brief and incomplete descriptive information’ of yourself. There’s nothing to tell me how old you are (and borderly on elderly could be anywhere from 50-100), whether you’re female or male, or anymore than three words that does not describe your personality. Not to mention, short fuse is spelt short-fused. Quotes do not describe a person especially when it is all over the place. I don’t really get the humour of some of the quotes other than the mind wandering quote. There is a grammar error in the last quote of the page (since it is one about grammar, I am not too sure if it is intentional). “Even if your grammar within the story is lacking, portray otherwise in the summary. That’s what attracts people.”
The Contact form looks really hideous. You could have chosen a different background colour and placed the form components in a table with the text headings to the left column and the fields in the right column. Instructions on how to contact you otherwise if the form is not working would be a great idea in case of technical problems.
Note: I did not read any of the fanfictions, but I have checked to make sure all the links were working properly, where broken links are listed below.
The search is a great addition to the section, although it should be provided on the main fanfiction page either at the top or the bottom of the page rather than a separate page. The layout of the search form is much more organized, and the contact form should follow this format. The drop menu has an extra > tag next to each line. Which of the ratings on the chart is yours? I assume it is the first row though there is no indication on the left column as such. The ratings don’t mean anything unless a brief sentence about what each rating mean including the age specification for each rating. The information on number of stories will look better if displayed across on the same row and the guide links displayed on another row directly below. Dates should be included next to the titles under Newest Chapters to indicate how new or how old the newest chapters are.
Errors are as follows:
Some general suggestions: include chapter numbers next to the chapter titles in the drop down menu links, do not link unwritten stories unless there is some content to read (consider writing ‘coming soon’ in red next to the title), include the main characters of the fanfic in the information area underneath the summary, and move the ‘back to Series’ link from under the title to the bottom of the page.
Under Series Information, consider displaying related links in a column rather than a row. It’ll look more organized. Row in columns are typically only used when there are numerous links to display. You forgot a very important character in the series description for Card Captor Sakura, Kero-chan. Reframe from using manga images for the character profiles because in some cases, some anime characters do not exist in the manga or their story is different. Remove the Related Sites heading from pages where no links are provided.
I find the series summary too brief and it does not explain anything about the series. For example, who are Sousuke and Chidori from Full Metal Panic! Fumoffu? Why are their last names not mentioned? What is their relationship? What is Sousuke’s mission? You call yourself a fanfiction author but yet you cannot even write an anime summary. This is an example of a brief summary and review I’ve written on Full Metal Panic! The links to A Single Spark from the Inuyasha page and Destined from Witch Hunter Robin are broken. Fanlistings and forums are not exactly related links because they are not sites relaying information about the series. Divide links into general fansites, fanlistings and forums, etc. The link Adultfanfiction.net under Miscellaneous is broken.
I don’t like how the layout links and statistics are displayed in the two columns, but that is a personal preference. There should be no need to include a link for Lastest Additions as it should be moved to be displayed alongside the one latest layout on the layouts’ main page. Alignments including margin and padding specifications cannot be properly viewed in Internet Explorer for all the layouts. I must admit I am surprised at the quality of some of the layouts when I compare it to Animara’s current layout because there is no basis for comparison.
There is no need to direct the download links to target="_blank" for a new window since a POP-up window will appear nevertheless to ask the user whether to save the file or to cancel the download. The extra window is a waste of time. I notice many of the layouts credit AnimePaper for the image. Make sure you’re crediting the website in the use of its scans and you’re not taking other people’s wallpapers and making layout out of their designs (layout #36). As a designer yourself, I am not sure you don’t want anyone to do the same to you. It is rude and disrespectful.
Again, like the layouts, there should be no need to include a link for Lastest Additions as it should be moved to be displayed alongside the two latest avatars on the avatars’ main page. To keep the site unique, consider designing unique avatars for the series information pages instead of using the free avatars you’ve made for this section.
Like the previous two sections, for both Wallpapers and Signatures, there should be no need to include a link for Lastest Additions as it should be moved to be displayed alongside the latest addition on the section’s main page. I noticed that though some of the graphics may be made quite nicely, the font type and style does not show the same degree of craftmanship. I would consider playing around with the text more. Download more font types from free websites and play around with the gradient, inner glow, shadow, transparency over a layer style such as screen, saturation, overlay, etc.
There is no need to include an entire tutorial in this section’s home page when promoting the latest tutorial. The title, type and summary is plenty enough. If visitors are interested enough, they will continue to read the rest of the tutorial. What you currently have is a waste of time and waste of space. Considering that this section is not all that large, the search tutorials link is not very helpful. There are two broken images in tutorial #12. I am not too fond of your HTML tutorials since your HTML knowledge and organizational skills is not exactly a model for your visitors. Also do not include half of the tutorial on the main page. It looks messy and unprofessional. Instead display the title, the type of tutorial,a summary on the main page, and a thumbnail image (if applicable). This will allow four to five tutorials to be easily displayed per page that will not invovle too much scrolling.
A general note to this entire section, the default page view should be text links to ’sort by series’ (for wallpapers) or ’sort by size’ (avatars and signatures) or ’sort by type’ (layouts and tutorials). This makes viewing much easier because there’s fewer clicks to get there. Of course the latest addition section can appear above the default page view. The other options (view all and search) can appear below all the content.
There is no use for the Animanga page in this section, because technically it isn’t a type of graphic offered to the visitors, and there is already a Exits & Resources page under ‘Site’. Some of the links are repetitive and they’re not even in alphabetical order. This page can be combined with the Exits & Resources page. Do not use abbreviations in section titles (i.e.) Animanga DL. Also what is the difference between Animanga, anime, and manga? You’ll need to specify this in the section for the visitors. The following links are not working: Anime Ambition, Anime Ark, Da-Forums, Say Anime!, and Anime Sharing.
All links are working properly though you may want to contact your affiliate at Anime Difference and remove the link temporary because my computer detected a virus on the website and closed down my Internet windows.
Since the Affiliates links are displayed in the navigation menu on every page, the Affiliate Information page should also be listed underneath Affiliates. There is no point in making a separate section and repeating the links. There is a ‘15′ after the site title ‘Otaku Tenshi’ of which I don’t know if it is intentional or not.
Violators is more or less a completely useless page. Sure you’re boardcasting to the world and to your visitors and warning other website owners about sites who steal graphics, but that’s not going to stop them. They’ll continue to steal with or without you blacklisting them and honestly, how many people visit your graphic site to visit a ‘Violators’ page? I certainly don’t.
Other links to webpage review sites are working properly though you should indicate with an asterick that links are exterior links and opens in a new window or make a separate review page. Though FHR does not require a link back to the site, it would have been appreciate for all this work and for the fact that other WPRs are linked back.
Animara is not certainly not my first choice to visit for graphics and resources but it isn’t my last. You need to demonstrate quality and style first with the site’s layout before you can earn the right to design layouts for others. Appearance may not be all but it speak volumes.
EternalSorrow Says:
March 23rd, 2008 at 11:26 pmGreetings,
Unfortunately, I did not receive an email notification about the review being up, so I am a day late. First off, thanks for the thorough review of my site, but some of the information you presented is quite misleading.
First off, the suggestion of a brush for the top graphics is untrue. My graphics program is not capable of those. Also, I was not attempting a “replication” of the original, which is not even the definition of inspiration. To replicate is to steal.
Second, the site is identical in my resolution of 1024×768 in IE, Firefox/Mozilla, and Opera. Perchance, what resolution are you using? Also, the majority of pages on the site are HTML valid according to the W3C Markup, meaning the ending tags are a matter of preference. Were you perhaps looking at the page with an XHMTL validator?
The “back to top” link works properly in Firefox, but not in IE. Thanks for the heads up on that problem. Also, the focus is both on fanfiction and graphics, which supports both the stories being named individually in the site map and the site history focus on the beginning being with the fanfiction (most visitors come from for those, so I am focusing on my base).
The site is not about myself, but about my creations. Information about myself is irrelevant, nor do I want to sound like some naive, egotistical teenager bent on getting attention.
The fanfiction links worked properly, so the status of “Unwritten” accounts for their empty pages. Thanks for the heads up on the duplicate chapters, though, since those really are my mistakes. The series summaries are meant to give a glimpse into the series for those either roughly or familiar to them, without giving spoilers.
I credit those websites where I gain graphics because those are the policies of those websites. Also, I’m unsure how I am to visually display the newest additions to graphics, and having a simple text link attracts no one.
Thanks are again in order for the Anime Difference virus detection, and I will contact my affiliate about the warning.
Overall, after waiting several months I removed the link and never expected my review to be finished. Unfortunately, after the long wait I’m a little disappointed. Generally this review is more of a critic’s examination of the site rather than a review, as a number of the points were made without full knowledge of the site’s workings or the suggestions are a matter of preference.
I’m very grateful for the mistakes you pointed out (which I will quickly fix all), and will indeed take your graphic advice to heart.
Misao Says:
March 27th, 2008 at 1:05 amI am glad that you have found the review somewhat helpful though I have to say I am a littled disappointed that you saw the review moreso as a critic’s examination rather than a review. Sometimes the line between the two is so fine, but nevertheless.
In reply to your comments, I am not too sure what type of graphics program you are using. I presume you must being using at least a recent version of either Adobe Photoshop, Jasc Paint Shop Pro or Fireworks. There are quite a few tutorials with step-by-step instructions on how to create “things” in graphic programs that do not necessarily require a brush. An example would be a tutorial on how to use the pen tool in Adobe to draw all sort of shapes and designs. I would love to give you the URL but Imanimetions.net is currently down. You could also consider drawing two circles, move them several pixels apart like they’re overlapping each other, and fill in the smaller overlapped section to construct those brush-like designs.
I agree that replicating is more or less stealing but if you’re replicating a piece of art and adding your own touches and a few changes here and there, you’re no longer replicating. You’re creating a new design.
The resolution I use is 1280×800 on a widescreen laptop and I have the latest versions of both Firefox and IE. But regardless, as a graphic site, Animara should be identical in all resolution sizes across whichever browsers you choose to have the website properly viewed with.
I inputted your website’s URL at W3C Markup Validator and the doctype was automatically detected at HTML 4.01 Transitional. Animara failed validation with 4 errors. The end tags are indeed a matter of preference but it is highly recommended before it becomes too much of a habit. Next thing you know, you’ll be forgetting to end divider tags and header tags.
I understand your need to link to each individual fanfic title in the sitemap but think for a minute in the eyes of the visitor. It would be confusing and overwhelming to see all these titles in a sitemap of which its purpose is to assist visitors in finding the right pages in the right sections. A regular visitor would know that those links are to individual fanfictions but to a new visitor, I would have no idea. Sitemaps are suppose to simplify the site’s navigation system, not make it more complex.
I understand that the focus is on your creations and not you, but honestly do you think your fans would not be interested in knowing who you are? I am a big fan of specific DBZ fanfictions at ff.net and I make an effort to learn about my favourite authors. In some cases, I make direct contact with the author and become friends. Look at novels you buy in bookstore; most, if not all, include a mugshot and a snippet at the back about the author. It isn’t about drawing attention, but allowing your fans to understand and learn who you are.
Some visitors may not see the “unwritten” status right away and become confused at the empty pages hence my suggestion not to link them but in adding a “coming soon” message next to the title.
Click here for an example of what I mean by changing the display of the newest additions in the graphics sections. Chocolate Peach has a fairly organized system of displaying the graphics sections and so does Aethereality if you prefer the use of dropdown menus to navigate. Animara can adopt a similar system to make viewing more efficient.
If you have any other questions or concerns or require further elaboration, please let me know. I’ll be more than happy to assist you.