MEMBER LOGIN   |   Username: Password:
Twitter: (The Twitter thing is temporarily down due to a Twitter-related bug or something!)
Recent Updates: The New Site is now open! (5 years ago) Which of [these facial express... Vulpin Adventure OST| "Blast to the past!", a review of Plazma Burst 2 by Rating Orb Duogduogduog
...
Pseudolonewolf`s Avatar This Bubble Layout (Edited) Sat 27th Aug 2011 10:41am

Category: The New Site

Since the issue from the previous post is now solved, I'm replacing it just so then I don't get more suggestions and stuff...

I want to talk more about the newer layout, which I'll link to a screenshot of again, here: [LINK]

It was called a 'mobile site', 'chilidish', old-fashioned, and such, which is sort of hurtful, but I want to try to explain what led to me coming up with a layout like this in the first place.

I worked with the 'old new version' for the last few weeks, or however long it's been, and while at first I liked it, I grew to dislike it over time... It just didn't feel right, it felt clunky, there wasn't anything sleek or elegant about it, and the positioning of content wasn't very interesting.

I looked at some previews of Windows 8 the other day though and it seems to use a really rather interesting layout, completely different to anything from previous versions. The start screen, for example, looks like this: [LINK]

I like the idea of sorting information into distinct boxes, blocks, which would be *different on each page*; this is a key thing. It's a different approach to web design compared to what I've done before. Rather than just building a 'template' that all pages follow, with a content area that all pages fill and a bunch of border stuff like a topbar, sidebar, etc, each page would be built completely different out of these building blocks to create unique layouts, which all follow the same general design rules but not the same placement. And stuff.
And boxes themselves would function as links if necessary; rather than clicking on the text inside them, you'd just click the whole thing. It seems sort of intuitive, or something.

Their corners were originally hard and angular, since they were just rectangles, but these fancy rounded corners are trivially easy with new versions of CSS, and I've seen a few sites that take advantage of them (Bulbapedia comes to mind), so I gave them a try myself, and liked the result... So I kept it.

Anyway, I don't know what a 'mobile site' is since I've got no mobile devices and as such have never seen one, though I can see why some people would consider such a look 'childish' or amateurish or something similar, just because it's clear and blocky and simplistic. The vibrancy of some boxes is surely a factor too, but it's something that I find interesting myself.

The colours themselves aren't final though; it's still in the early design phases so it's not like I'd have everything sorted out from the start. I've just been trying to *assemble* the thing for now, and normally wouldn't even have shown it off at this stage, if it weren't for that annoying problem.

I don't expect it to be everyone's cup of tea as it is, but it works much better than the other design on various screen sizes (it stretches), and I do think it will make different pages look more interesting or something. I want to build some different pages to show what I mean, but it'll take a while; I'll upload screenshots when I have done.

So yes... It's always difficult building new layouts for a site that people are already familiar with, since there's always the chance that people would prefer the old layout... A lot of thought has gone into this design though, both in terms of usability and interestingess, so I really do hope it will work out once people see it in action.



EDIT: Here's another screenshot of the Blog page, showing what I mean by assembling different pages from different blocks, rather than using a template shared between pages: [LINK]
As you can see, the general *idea* of the layout is the same, but the placement of elements isn't. Other pages would follow that idea.
I still need to tweak the colours though; it's hard finding colours that I feel completely satisfied with, it seems...
30 comments

 

30 Commentson 15 roots

FakeKraid`s Avatar
Rating Orb FakeKraid 27 United States PhlegmaticMelancholic 40C 1F
6 years ago | (1)
Well, it's hard to make a judgment regarding usability without being able to do anything, but the screenshots are definitely visually appealing. It looks promising to me. I'm interested to see how it works in practice, though I say it as shouldn't, perhaps, since I spend over 99% of my time here in the chatroom...
CaptainAwesome`s Avatar
Rating Orb CaptainAwesome 17 Iceland PhlegmaticSanguine 3C 1F
6 years ago | (13)
this might be the wrong place to ask but Pseudolonewolf. I have a problem. i forgot my password is there some way you can send it to me through my email address? if you can then please do so. i dont wanna wait to long =/
LiadyC`s Avatar
Rating Orb LiadyC 21 Israel MelancholicSanguine 287C 65F
6 years ago | (3)
Unfortunately.. there's no such a function.. Appearantly you may ask from Pseudo to resend the Password and then you can edit it to something easier to remember for you...
(BUT STILL hard to guess...)
Also.. Emoticons aren't realley suggested to use in comments.. but who am I to convince you?
Aetherus`s Avatar
Rating Orb Aetherus 20 Brazil MelancholicPhlegmatic 3C 0F
6 years ago | (3)
but ti send this message you would need to be logged, why would you need your password? if the problem is logging in the site, if you click the link in the confirmation email you receive after registering on this site, you can log even without the password, I know because I forgot mine and was able to log in due to this method
orcris`s Avatar
Rating Orb orcris 16 United States MelancholicCholeric 85C 82F
6 years ago | (3)
I see that you can log in. That makes me think you have the password saved. If you use Firefox, you can right click the page, click View Page Info, go to the security tab, and click View Saved Passwords. Then click Show Passwords. This will show you your password. This doesn't work on Safari, Opera, Chrome, or IE. I don't know about any other browser.
DeNovo`s Avatar
Rating Orb E β DeNovo 24 United States MelancholicSanguine 244C 201F
6 years ago | (8)
Dramatic change is always going to draw dramatic responses. Since you're the webmaster, I don't think you were expecting anything less with such a big change in your website layouts. I do want to point out that the Live Tile (TM?) interface is originally designed around the touchscreen interface, which isn't the same as the classic mouse and keyboard since you can touch any point on the screen at any instant; moving from one corner of the screen to the other is as intuitive and efficient as moving two pixels to the left on tablet and other touch-enabled devices. I don't think this will hold true for the more traditional navigation model, which means that any spatial organization of your sites will require more movement than a consolidated menu.

I also want to mention that the Live Tile interface was designed specifically to produce "shallower" navigation: most things you want to do are at most 2-3 clicks away. This has always been the goal of web design in general, but the approach taken here focuses on "bubbling up" information which is most relevant and useful. For instance, the Calendar tile of a Windows Phone (TM) will show the most immediate event to be handled next, the Mail tile will update with a count of how many new emails you've received since you last checked, and the Weather Channel App shows the current weather and temperature.

If this is where you were planning on going with this, switching to tiles will make it happen. However, there are a few things you might want to keep in mind:
1. Browser/Hardware Compatibility: any site which wants to be more animated and "live" will require more processing power than static text. I'd say that HTML5 or such designs will reduce the ability for a majority of users to experience the site as intended. Since IE isn't and continues to focus on features other than standards compliance, this means that most Windows users will never know better.
2. User-friendliness: If navigating the site goes from clicking on a few drop-down menus to moving my mouse all over the screen, which is actually part-and-parcel in the touch-oriented interface the Windows team had in mind, the site becomes more challenging to get through rather than more intuitive. If this is mostly a cosmetic choice, then I'm more curious about the technical hurdles you're trying to overcome by "hand-crafting" each page, which sounds like a lot more tweaking and work.
3. Technical Challenge: This site does generate some income for you, so it's a worthwhile investment even without the inspirational value it might give you. This is also potentially a technically interesting or challenging problem, which might be just what you need. But I'm not sure this was anticipated in your planning for releasing your games--this would be a second departure from your plans, and since you do tend to work in sprints of a few months, it's possible that you might come out of this wanting to work on a different game entirely, which leaves Miasmon in a tantalizingly complete state, if your weekly updates are any measurement. Is this worth the effort? When do you expect to finish, and what do you want to work on when it's done?

If you feel like a new look for the website is necessary, I think it'd be a great idea. I hope everything works out for you!
Pseudolonewolf`s Avatar
Rating Orb A β Pseudolonewolf 23 United Kingdom MelancholicPhlegmatic 2257C 559F
6 years ago | (7)
I did realise that the tiles thing was done for touchscreen layouts, since I watched a video showing someone actually interacting with it and going to other screens and so on... So I'm not really trying to copy it exactly in terms of functionality or anything. It was just 'mildly inspiring' visually rather than something that made me think 'ooh! I need to copy that in every way!'

The main navigation of the site is done via drop-down menus in the upper-left part of the screen, similar to the ones that exist on this site now. The top bar is fixed in place so it scrolls as you scroll, meaning that they're always in easy reach for navigating to any of the main pages.
However, some of the block things can serve as links in themselves, out of convenience. Blog posts, for example, are contained in a block, so rather than clicking the 'n Comments' bit to read feedback and post your own, you'd be able to click on the block itself to get to the individual page for that blog post. And so on.

I've already got it built and working for the most part, and it *works* on all browsers and only look worse on IE (or IE8, anyway, which is the version I have; it might look better on newer versions) rather than being completely broken... Due to the grid-based layout, and the lack of a general page template, it's more awkward to build new pages, but with a lot of copying-and-pasting, it's not too difficult.
I've considered using a bunch of PHP functions to generate the divs for the blocks, meaning at least that the code would be nicer, but that might just reduce functionality...

It shouldn't take all that long to finish building the new site; I'm probably about half way there, maybe. Most of the major features are done, and the layout's mostly sorted out, so now I'm just having to add relatively minor things to finish off.
I'm also trying to work on Miasmon alongside it, rather than just one thing at a time, since it's nice to vary what I'm doing to stay motivated. Any time I work on my site rather than Miasmon makes me feel more eager to get back to Miasmon, though; I only get bored of projects when I'm working on them, not when I'm working on something else.

Hmm, I often wonder when struggling with web design stuff whether Microsoft is aware that it's essentially holding back the whole web because of how Internet Explorer lags behind in terms of following standards... Do they do that on purpose, as a choice? Do they not see it as important to have it render sites in the same way that other browsers do? What features are more important than that, more worth working on?!
It's a pain how a large chunk of web design seems to be struggling with how to get things to work in IE, and many layouts have to be abandoned because IE can't render them properly... It's frustrating. And IE doesn't even seem to update itself like other browsers do, meaning that loads of people used *outdated* versions of it, and they're the sorts who don't know what a 'browser' is so are unlikely to update it themselves... I don't think any designer is fond of trying to cater to IE6 rather than the more reasonable browsers.
freedomcaged`s Avatar
Rating Orb freedomcaged 18 United States MelancholicCholeric 86C 64F
6 years ago | (4)
Microsoft goes out of its way to make sure that what they produce is less compatable other companies products. In this way they can essientailly force people to upgrade only with Microsoft products, rather then crossing over if someone else has a better program in one feild. Most people don't have the money, time, or willpower to change their entire system at once, and so they are forced to upgrade slowly, but exclusively, with microsoft products. As for IE, Microsoft has rigged it to become slowly incompatible with older computers, for example, anyone who still has Windows XP who tried to download IE 9 would find that they suddenly could no longer axcess the internet, forcing them to upgrade their computers. Sadly this is the nature of Microsoft and IE, even those that do know how to upgrade may be unable to for various reasons, it's an annoying trait fueled by selfishness (somehow this seem a more accurate word than "greed" right now), but it is what it is, and you really can't do anything about it.
SavageWolf`s Avatar
Rating Orb β SavageWolf 17 United Kingdom CholericMelancholic 533C 105F
6 years ago | (6)
Microsoft completely ignores standards, and anything that it didn't create. They are very . It's also not just the internet it's holding back, every "cutting edge" technology I read about (USB3, IPv6, etc.), is ether not implemented in MSWin or implemented reluctantly... They are the leaders of the computing industry, they don't have to CARE what anyone else uses... None of its users will change browser/OS ANYWAY, so why bother making things that support them?

Oh look, an anti-Microsoft comment from SavageWolf, how unexpected.
Brilliand`s Avatar
Rating Orb Brilliand 23 United States MelancholicPhlegmatic 27C 6F
6 years ago | (3)
IE9 handles at least the rounded corners correctly; I suspect it will display your site as well as Chrome/Firefox, or nearly so. It also doesn't have IE8's tendency to slip into IE7 mode regardless of your doctype. IE6 and IE7 are quite rare nowadays, so it isn't necessary to care about them anymore, but if you have trouble with IE8 acting like IE7, you might want to tell it explicitly to use its newest features. This is done by setting the "X-UA-Compatible" HTTP header (or meta http-equiv, provided it's the first thing in your <head>) to "IE=Edge".

I think Microsoft is aware of what the vast majority of web developers think of them, and are trying to fix it. They still believe in "Windows Update" for updating IE, though. They're far too much in the public eye to pull their old "Embrace, extend, extinguish" stunts, imo.
DeNovo`s Avatar
Rating Orb E β DeNovo 24 United States MelancholicSanguine 244C 201F
6 years ago | (1)
The good news is that IE9 is more standards compliant! And the better news is that, just like you and I, the IE team would be happiest if no one ever used anything older than IE 9 ever again. The bad news is that there exist plenty of users out in the world who don't, and won't appreciate the vast improvements modern browsers bring to the table. These are the same users running Windows XP, who have developed lengthy and inordinate workarounds to the many problems that more current interfaces have attempted to solve. They also prefer these workarounds.

It's worth upgrading to IE9, if only because it's a less ugly version of IE. I think it'd be fair for you to suggest upgrading to a more secure, faster version of IE as well if someone wanted to experience the site as you envisioned it. I can't and don't guarantee it'll ever look like a reference implementation, but there's a good chance that it'll come a lot closer in the future.
JiQi`s Avatar
Rating Orb JiQi 99 Montserrat PhlegmaticMelancholic 41C 9F
6 years ago | (1)
Hello. I'm an Internet Explorer 8 user, and that's so very nice of you that you're doing your best to have your site work allright on my precious browser. Thank you so much.
However, if IE is really giving you so much trouble, maybe just give yourself a break? It's not your fault at all, you know.
And I also have a Firefox installed, so I s'pose I can get used to it if I have to - not a big deal.
Anyway, good luck in your efforts. :-)
Eskay`s Avatar
Rating Orb Eskay 21 United States Phlegmatic 4C 10F
6 years ago | (2)
The Windows 8 start screen seems to have been inspired by the start screen in Windows Phone 7, which does the same things with multipurpose tiles that you liked in Windows 8.
amelt`s Avatar
Rating Orb amelt 15 United States SanguineMelancholic 69C 0F
6 years ago | (3)
I'm a fan! Also, please tell me there will be categories of Grapefruits and Juicy Bosoms. Preferably with posts that encompass both.
freedomcaged`s Avatar
Rating Orb freedomcaged 18 United States MelancholicCholeric 86C 64F
6 years ago | (2)
I notice that there are the same number of blog posts on grapefruits as there are on juicy bosoms, hmmm.

Joking aside, I have to say that, while I perferred your first option more, I have to admit that the bubble layout does seem to better convey the idea of a gaming site. I said it before, but your other option did look like a bussnisse site, while this one seems more relaxed and... (I don''t want to say fun) eccentric. (I usally count this as a good thing.) Anyways, good luck getting the new site to work, I'm looking forward to it.
Silk`s Avatar
Rating Orb Silk 17 New Zealand 191C 0F
6 years ago | (4)
The new site design looks wonderful, I love it! However, you should probably post more about juicy bosoms and grapefruit. I think that they appeal to your audience more than any other topic.
MyNameisNobody`s Avatar
Rating Orb MyNameisNobody 18 United States CholericMelancholic 79C 116F
6 years ago | (2)
I like this layout, but the flat shading seems a bit dull to me. I realize this is an 'in progress' layout, but would you consider adding some simple gradient shading?

Maybe it's just me but I really seem to have trouble getting past the flat-shaded, borderless containers. Other than that, I love the way this looks.
coreyj`s Avatar
Rating Orb coreyj 18 United States MelancholicPhlegmatic 105C 152F
6 years ago | (2)
Like Abbx901, I didn't comment on the last update, but I do like the new site design. Not more than the current, but not less. It's different; and, depending on how it works, it may be a better layout. I personally like the rounded boxes (corners wouldn't really look as good).
coreyj`s Avatar
Rating Orb coreyj 18 United States MelancholicPhlegmatic 105C 152F
6 years ago | (2)
EDIT: What about the wiki? Are you going to remake that? Or leave it as it is. It's design should probably match that of the main site; plus, it has several glitches that hinder its effectiveness.
Dragonshark`s Avatar
Rating Orb Dragonshark 16 United States MelancholicPhlegmatic 2C 10F
6 years ago | (2)
Uh, an external company controls the look of the wiki (as in its layout and functionality), so we really don't have much control over it, though I plan on updating the color scheme and other CSS to resemble this site more once the remake is done. Also, what glitches are you talking about? (There have been some glitches regarding formatting recently due to new features added by the company, so we don't have much control over those things either...)

(Strangely enough, the 'old new version' of this site strikingly resembles the old look of the wiki, before it was changed in November of last year.)
1 Reply
Abbx901`s Avatar
Rating Orb Abbx901 15 Pakistan SanguineCholeric 149C 20F
6 years ago | (2)
Oooh... Much, much better.
I didn't comment on the last update, but I just can't resist mentioning how totally cool and unique that idea sounds. I don't know what the final thing will look like, but considering the basics that we have, there is a firm foundation for something grand that could be added to the new Fig Hunter.
Cheers!
Page 1 of 2: