[C&C][MAL Website Redesign]

[dperolio]

This is a repost from my post on MAL forums. Feel free to ignore most of it if you want.

WARNING: I know this is quite a long post, but think about how much time I've put into this "project" and this post. At least look at the outcome and or skim over the thread info please.

The "Before Story" and a little Side about Responsive, Adaptive, Fluid, and Fixed Web Designs

Allison Grayce[/url]]
Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly.

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

With that being said, it looks like the OP might have simply been referring to fluid designs, because judging by the CSS files of the examples he listed (ANN and AniDB) they both have a mixture of fluid and fixed designs.

While AniDB does use some media queries in their CSS, it's not enough to call it an adaptive and responsive web design... Just to note, I myself don't own a cell phone anymore. Here's a quick test to see a website emulated on an iPhone, though.

TestiPhone.com - iPhone Application Web Based Simulator

If you try both AniDB and AnimeNewsNetwork, you'll see their designs aren't any better really when it comes to mobile.

I've never created a mobile version of a website myself yet either, but it's certainly going to be required in the future unless something drastic happens to change the way things are headed.

Getting back on track, I do think an adaptive or responsive web design would be a great change, but it takes a lot of effort and upkeep especially with the ever evolving mobile devices being added to the market.

I do think MyAnimeList needs a new design though; something less stale and "old fashioned" looking. Though the design isn't all bad, I might even almost call it retro.

Anyway, I went ahead and created my own style for MAL. It's the first design I've ever made without making a mockup in Photoshop. I just jumped right in and coded it from scratch with HTML and CSS. I intended to just do a quick simple design to highlight the points I found "bad" about the current design but ended up spending about 30 more days than I intended on it. I worked on this for about 10+ hours every day... Yes, I'm very slow. I went back and changed things so many times as well.

I'll highlight all the things in the design I think bare any significance or difference from the current website.

The coding isn't perfect, but it summarizes my ideas visually I think. None of the links take you to other pages, though some cause an Ajax call to load content dynamically or cause a script to run; those will be highlighted below.


After thinking about the MAL website and the MAL community as a whole--- and the types of people that watch anime--- I decided to make my "theme" of focus be user customizability. After all, it's a shame to have website with so few design image elements and no customizability for the user, especially when it comes to anime and manga fans which are a very diverse group of people.

The Model
I have simply re-designed a single page of MAL. The MAL website follows generally the same structure throughout the entire website though. The page I'd chosen to re-design was a no-brainer: Death Note (my favorite anime ) I tried to keep a very similar structure and style, while making an acceptable web design, since it seems a lot of people are opposed to change around here.

***sidenote: I changed Death Note's page cover art, however, as I really detest the current one. It has no style or flair in my opinion and just looks tacky--- that, and I love Light. :3***


The Outcome
MAL - Fresh, New, and User Customization Emphasized


Feature Highlights / "Suggestions"

"I want this!" "No, that's dumb I want something else."
I'll take some time in this section to quickly tell you a little bit about Theme Selection options you have with the design. If you hover over the little painting easel icon on the top right of the menu bar, a menu will appear letting you change the website looks to you. You have a number of options to choose from here.

• Layout Style
  The first one you can choose between is the basic layout style. Remember at the start of this thread we discussed the different layout types? Well, here you go! Fluid sets the layout width to 75% of your screen (no maximum limit, and a minimum size of 980px). Even though it's called "Fluid" it's not a totally fluid design; it mixes both fluid and fixed elements. The Fixed option keeps the layout a fixed width of 980px (the same as MAL's current design).
  
• Header Size
  Tired of that boring little text logo in the top left corner? Well, try switching to full and add a little more flavor to your day. I'll admit, my banners aren't amazing, but I feel they do the job. Even though the option is "Full" I didn't want overly elaborate headers which would slow the website's load time considerably, which is generally undesirable.
  
• Contrast Mode
  This one's a biggie. Hate relying on gimmicky, and almost always ugly/poorly done, userstyles and browser addons to force a dark version of MAL because you don't want to go blind from looking at white all day? Well, that's no longer a problem! Simply go Kage mode and watch as your eyes breathe a sigh of relief--- darkness embodies! Or maybe you've just been looking at the website all day and your eyes need a break. Or maybe you don't like Kage mode at all--- feel free to stay in Hikari mode and keep on cruisin'. Remember, the choice is yours.
  
• Color Scheme
  Another biggie. After all, you can't have a theme changer without being able to choose color schemes, right?! Right. So, we have the default, Aoi Hana blue, then we have Sakura red, Wasabi green, Murasaki purple, and Onigiri gray (black and white). Feel free to switch them depending on your mood, the time of day, or just because you feel like it.
  
• Background Selection
  You can also change the main background style, each appropriately color coordinated with the theme color you have selected. Plain is default (which is nearly white for Hikari mode and nearly black for Kage mode). After Plain we have Nature, Metal, Diamond, Rock, Star, Wood, Pattern, Akatsuki (yes, from Naruto ;p), and Light Noise. Some are "better" than others, and some seem more to more heavily favor Kage or Hikari over the other, but again there are no "right" choices. If you like it, go for it!

That's all for the theme choice. "What, that's all?" Hey now! That's a total of 400 different possible style combinations! And it's all yours for the choosing. Oh, did I mention you can smoothly switch Theme Options on the fly just by clicking? That's right, it's performed with Ajax and PHP which means it takes your choices and applies them real-time. It also stores your choices as "cookies" (no, not chocolate chip) and remembers them until either: 1 year passes, you manually choose a different theme option (in which case it saves your new choice for 1 year), or you delete your browser's cookies.

What's Your Fav Icon?
Website's fav icon automatically updates (on page load) to appropriately fit with your current Color Scheme selection.

Select Boxes
As you can see, the select input boxes are no longer those stale, unstyled ones that you see on MAL. They now have color. They also degrade gracefully for those users without Javascript enabled (people do that?).

Menu Style
As you can see, the menu has been re-designed slightly different, yet the same.

[ This is a good time to bring up another point why I think MAL needs a new design--- their code is horribly outdated (sorry guys but it's true). Now, my coding used in this certainly isn't anything modern--- in fact, I don't think I used a single HTML5 specific element. But meh, I think it's still safe to say most people don't use the new HTML5 elements for the most part, yet. But MAL is still using tables to structure their layout, when it is only meant for tabular data. Back in the day, certainly we used tables for HTML structure, but those days have long passed. In fact, as I just mentioned, even divs are slightly "outdated" since the new HTML5 elements are accessible (though they don't replace them entirely). ]

Whoa, got a little offtrack there. Anyway, contrary to MAL's current menu which uses Javascript (and breaks completely for users without Javascript enabled) mine uses only CSS, so it looks lovely and no breakage involved. Also, I added a notification icon to the Profile section, because there really needs to be one, in my opinion.


I said "I'm going joggin", not "time to login"
Wait, there's a join and login section, along with a notify icon?! What is this I don't even--- Obviously these things are just for demonstration to show you various aspects. One thing I really hate about MAL (yes I know it's something simple and I never have to look at really, but even know that it's there annoys me) is the Fanybox login modal popup. It's just so unpolished and poor, it irks me. They couldn't be bothered to style it all and besides that, there's not even any Forgot password link! I remember when I forgot my password, I ended up googling it to go to the forgot password page, as I'm sure many others have had to resort to. That's terrible. MAL's login also breaks for users that don't have Javascript another really dumb choice in my opinion. Mine still works, has a Forgot password link, and looks alright. Win, win, win.

Advanced Search
Another of the big things that annoys me a bit, and I find a bit unusual compared to other websites, is the lack of an advanced search link until you actually submit a search. I took it a step further, so there can now be an advanced search on every page of the website with a simple click, without having to submit a search first, or even having to load a new page, since it's called dynamically with Ajax.

Anime Page Navigation Panel
So, as you can see, instead of the small, cramped page navigation on the current MAL anime pages, we have a more robust, more noticeable, more convenient, and more efficient page navigation. When you're scrolling down and it gets to the top of your browser window, it will attach to it and keep scrolling with you. This makes it easy to change to any panel you want quickly and easily. If you scroll even a little further, a "Go to top" arrow (↑) will appear, which will send you to the top of the page, woohoo. Did I mention that actually clicking on a tab will scroll you to the top of the body and load the section dynamically with Ajax? This increases user experience and saves bandwidth; we're doing good! You can click the tabs just to see the loading (they're all separate pages). Only the Reviews page actually "works." We'll get to the reviews later.

Wow, she's my Type
As I'm sure you've noticed, this page uses a font different from the current MAL. It uses Roboto and Roboto Condensed to give a visually stimulating satisfaction while increasing readability too. Don't get me wrong, I love Verdana as much as the next guy, but using it solely on a website is very... boring. And old. And outdated. Let the days of yore live on in our minds, not our websites.

Whoa I just saw you watched this.
One of the biggest "changes" I made from the MAL's current physical structure is to move the "Recently Watched By" section to the sidebar. As it is now, it simply loops through 10 static divs (though I also did set it up to work with a simple database and PHP). In production, it would either update (checking every 10 or 20 seconds or so) automatically when a new user is added to the database, or it will loop through the 10 last entries in the database once, and then upon reach 10, it will refresh itself, calling the "newest" last 10, and loop through those. Nothing particularly important, but it adds a little something to the page, as opposed to the nothing that it does sitting at the bottom of the page currently, in my opinion. Some users might find the animation/updating annoying though, so they have the option of hiding it (which I'll get to next). Also it uses the user's forum avatar (if they have one enabled).

Less information can be more
Hey there. So I heard you don't like particular sections? Or maybe you just would prefer to have them in a different order? Or both? Well, now you can! This goes for both the sidebar and content area. If you don't want to see a section, simple click the title of the section (even though it will show you move cursor) or the little - to the right of the section title. Bam, it's gone! Well, all of it except the title. Click it again to make it reappear, like magic zOmg. If that wasn't enough, you can also drag the sections by clicking the title and dragging it, so you can put them in any order you wish. Terrific right? Crap, did you refresh the page accidentally? Have no fear, as you're hiding and moving sections, your choices are automatically stored in cookies and will remain effective for 1 year, or until you clear your manually clear your browser's cookies.

Who's that?!
So we're at the characters and actors. "Whoa, that's a human?! I thought it was Michael Jackson..." I jest. Have you ever thought those little pictures were a bit too small? So much so that they're even a little silly? Well, some of you have. I saw the recent suggestion thread and I took note and implemented a picture tooltip which retrieves the full size pictures using Ajax, and scales them down a bit, but large enough to give you a decent view of what the picture actually is. Short delay (300 milliseconds) on hover to keep you from accidentally having them popping up simply while you move your mouse around.

Reviews with Roger Ebert--- no, not really.
Moving on to the review section you can see a slightly more fresh format keeping the same elements. Instead of that smashed, barely noticeable "read more" link, we have a luxurious, hard-to-miss "READ MORE" button. Clicking it will automatically scroll you to the top of that review, as well as show the full text of the review, and make the "NOT HELPFUL", "HELPFUL", and "REPORT THIS REVIEW" links to appear. Also, if you hover over the review's text for one second, a tooltip will appear to the left of it which displays the reviewer's scores for Overall, Story, Animation, Sound, Characters, and Enjoyment. If you don't like these tooltips, you can simple click the "RATING" link at the top right of any review and it will toggle all review score tooltips on or off, and store your choice as a cookie for one year. If you click the review's "READ LESS" button, it will also scroll you back to the top of the review. Very convenient.



Letter of Recommendation
On to the Recommendations. Like MAL's current system hover over the anime's picture and after a short delay the anime's tooltip will retrieve the anime's information with Ajax and appear. I like to think mine are a bit more visually appealing though. Also, not that it matters much, but you can see a "read more" link on MAL's current tooltips, but it seems they never got around to making it so you could actually hover over the tooltips. Mine, however, work as intended. To load in the similar Recommendation comments, simply click the button.

Is this the End?! Or just the Ending Theme?
The ending and opening themes don't have anything special. I just wanted to make a note here that, although MAL uses tables for everything they're not supposed to, we come to the Ending and Opening Theme sections which use arguably tabular data, and they DON'T use tables... I'm not sure if they're trolling or what. A div is alright too though, really. I opted for a table though.

That's Gr[s]ad[/s]eatient.
Yes, yes. I generally tried to not use any gradients, as I saw at least one of you complaining about them. However, I really feel the gradients here are subtle enough and would really complement the site well.

I'm gonna Club ya!
Nothing much to see here. Just made the Related Clubs section a bit less un-bad. Proper spacing instead of a jumbled mess. Though, I personally feel the section is a bit pointless and just bloats the page.

Well, that about covers it. I'd very much like to hear your comments below, both good and bad. However, if you hate the design and my ideas, you're allowed to but please tell me why you feel the way you do. If you don't know why, it's okay to say, "I'm not sure why, but I just don't like it." That's a valid "reason" to me. Don't just make a comment of, "Wow this ****ing sucks," though please. I've put a lot of time and effort into this and don't really need random flaming. On the .0001% chance MAL actually consider this, great. Safely assuming they don't even notice it though, I have plans of continuing it on my own, so your comments and greatly appreciated and won't fall on deaf ears.

There is minimal degradation for users without Javascript (certainly more than the current MAL site), but it obviously still needs work. I have (very) briefly tested this in Chrome, Firefox, Safari, Opera, and IE. If you see any mistakes (I'm sure I made several and or forgot to change some things), let me know what browser and give me a screenshot if you could. Also, please forgive any spelling and grammar errors, thank you.


Thanks to applicable suggestions
New interface for reviews.
Larger pictures in search results
Responsive Site Design
Putting the forgot password link right after a failed login
Hide Actors
How about an "I Forgot My Password" option?
Color Themes
Poll: Myanimelistbackground
Profile/Panel/Site themes
site/forum background
Different colour themes for MAL
Theme

(and any others I forgot)


Honorable Mention
LazyLoad or something similar for lists please? (Speaking of which, I had LazyLoad enabled on this, but because there are so few images, it was pointless. Lists using images would benefit so much from it though, it's mindboggling not to use it. True it wouldn't work with the way we add images in the CSS currently (which we shouldn't have to do anyway), but you should add an extra table category for cover art and then scale them down slightly, give them a lazy class and it would be great.)

The good things about this design are that it's very functional, looks pretty good, very lightweight, and fast loading. (Which loads faster? -- my page vs. Death Note - MyAnimeList.net shows my page load 3 times as fast. True my page doesn't contain any real backend, but still) Anywho...

Redoing the website's design would be a good excuse to redo their outdated coding as well, and maybe, God forbid, fix up those mysql problems its had for years. Yes, "the design isn't that big a problem, the coding problems are more important." Why are these 2 things exclusive? Both are important. You should have different people working on different parts.

Yes all of this would take a ton of time, money, and effort but I think it would pay off in the end. Obviously Crave doesn't think so though. I suppose they only bought MAL to let it sit stagnant and collect its meager profits when they could be earning much more if they actually put some of their resources into it. I don't know the whole situation though I'm sure.

End rant and forum post.

PLEASE give me feedback and or critique on my version, both the features and design. Also, let me know what your favorite theme combination is! I'm leaning towards Fluid Full Kage Red Nature.



TL;DR Version:
I made this webpage based off the structure of this MAL webpage. Let me know what you think.


On that note...

[Nakeshahendry]

In your opinion what is the wifi jammer used for? Do you have a basic understanding of the knowledge about it? If you want to know more about it, then you can stop your step then you will get the information and the knowledge you want.

[dperolio]

Thanks for the bump, bot. >_o

[MyungCalvert]

These Portable phone jammer s are available at a very reasonable price. You can buy this Portable phone jammer very easily. As this service takes nominal charges on the network, so you would need to spend a little amount to get complete peace of mind when you are not willing to get disturbed.