G2 Core Layout Mock Up
|
rossr
Joined: 2002-08-19
Posts: 28 |
Posted: Sat, 2003-05-24 09:45
|
|
Hey all! Ok, I've completed some mock-ups of a core G2 layout. A few comments: :: It uses CSS (no tables!) http://home.reyman.us/projects/gallery2/ (Sorry, no fancy choice page... You'll need to use your browser's back button. Keep in mind that none of the links are active...) album-view.html item-view.html Things to discuss: I'm looking for help in implementing this layout into G2. Please post feedback, criticism, ideas about the UI layout... Thanks! Ross A. Reyman |
|
Posts: 37
CSS instead of tables is excellent decision.
It seems to be fixed thou? Why not make the albumthumbnail area atleast resizeable according to browser (or whatever reader is user) width.
Of course gray is is "safe" but also little dull and sometimes difficult to read. So maybe more color or at least contrast. (ofcourse everyone can change the colours)
Font sizes... I don't know what is the "right" way of defining them. px is maybe the safest choice. Keywords render too differently in IE and Moz based/linux browsers. EM is also different in different platforms. But if you use px IE users cant change the font size (with default IE settings).
But anyways I like the design even if it's the first publick version
Panu
Posts: 28
Thanks! I'm glad you like the layout.
I started the layout as a "resizable" fluid vesion (as you mentioned), but ran into a few positioning problems. I decide to iron out a fixed layout first, and once the UI elements are agreed upon, we can begin work on "fluid version" as well.
And yes, gray is being used as the "vanilla" first version to focus on alignment and positioning rather than color. Think: drawing a black and white thumbnail on a sketch pad before working on your full color 12' x 12' mural.
I invision at least 5 themes being shipped with G2 so that users can see how customizable themes can be, and for variety for the "non-tinker" types.
I've read on A List Apart and other CSS resources that px is the safest "cross-platform" way to define font-sizes, so I went with that. If anyone knows differently or has other suggestions about this, please let me know. (I was unaware that PC IE users are unable to resize text by default using this method... Hmmm... :\)
I appreciate your feedback!
Ross
Posts: 32
Hi, nice job!
Here's how it appears with IE6 and Opera 7.11 on winXP.
The alignment of Opera's pages is on the left, IE centers on middle.
http://www.trabant.it/images/gallery/gallery.htm
Posts: 17
I like the design, it is very clean. I also don't mind the gray. However, I am running Mozilla 1.4b on XP at 1600x1200 and it looks too small. It only comes halfway across my screen and, since it isn't centered, creates an eye sore. I don't mean the text is to small, just the width of the page. I hope that makes sense. I guess, if you get the resizable version working, that won't be a problem. Other than that, looks good!
Andrew
Posts: 28
volleyclub, thanks for the screenshots. They help me see how the pages look cross-platform...
I've added an index page to the URL I mentioned above.
Tweaks:
:: Fluid layout > The layout should change based on your browser window size.
Please let me know how it is looking...
Posts: 32
You're welcome, rossr!
Happy to be helpful!
Here are new screenshots for you:
[url]http://www.trabant.it/images/gallery/gallery2.htm [/url]
The add, edit, delete pages are too long, for a 1280x1024 too...
In IE6(not in Opera7.11) there's an annoying gap between the header and the gray control block, that make drop the last colum of thumbnails.
Posts: 11
ross, you do test your layout in different browsers do you?
IE/NS/Opera seem to be the most popular, unfortunately all three render css differently.
Posts: 3474
Here's Tantek Çelik's now-famous "IE 5/Windows plus be nice to Opera 5" hack, which should iron out 99% of known CSS rendering differences. It's usually only a concern when you need pixel-perfect rendering. Not sure if it's any use in this situation.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
-Beckett (
)
Posts: 19
It's very easy to get an over idea how everything works.
Well done with developing the non table based designs, however, as posted out, all browsers have their own idea/interpretation of what the w3C has laid out for them.
Have a look at http://www.jason.hybd.net/gallery/
It shows some flaws in IE. I see you seem to have modeled everything using NS 6 or 7. I don't have opera, and I don't like it, so I can't say anything there.
Image 1 - This shows a small error in NS, where the right hand pale grey header is cut off too soon. That goes with resizing the page.
Image 2 - Again, only a small error where the wrapping for Niobe has been shifted down, out of alignment. Nothing major but it's a rendering glitch.
Image 3 - This is the famous IE 5.5/6 float bug. I say no more. There are tonnes of site on this beautifal feature in IE. This is the MAJOR reason why I still use tables. Sometimes floating issues in IE can be resolved by directly specifying a pixular width and height, but that's a pain in the ass for some who need dynamic width / height designs.
Image 4 - Again, the float bug, but another thing is the numbers above the 'Powered by Gallery 2/Validate this page' haven't shown up. This is another well known bug of IE, normally known as the peekaboo bug. I have had problems with this even on designs that don't use the DIV and SPAN tags much. This goes with scrolling. However is these numbers where at the top of the page, you would have needed to scroll down and up again to refresh the rendering so they show.
These problems are not your 'fault', however, testing designs is important on non table based designs, due to CSS issues. Anyway I like the way the album view wraps. This is something that can't be done with tables and needs span/div tags. I like the idea and have used that technique myself before.
Anyway, for mocks ups, they prove to be very good. It will be nice when a bit of colour is added and some nice grahpics maybe is used for icons in places. Keep up the good work.
Posts: 314
Of course creating a nice future looking layout based on CSS2 and W3C standards is good to aim for, but on the other hand, browser statistics show that about 93% of all internet users is using MS Internet Explorer 5 or higher, see http://www.thecounter.com/stats/2003/May/browser.php. Logic dictates a design that first and foremost looks nice in these browsers, we can care about the rest later...
Posts: 28
Thanks to everyone for the feedback!
Answering a few concerns:
Bottom line: I agree that layout on IE 5+ is very important, and I will shoot for proper display on IE 5+... (Although I will need quite a bit of aspirin to keep me sane...)
:: I'll look into the "annoying gap" problem... I was worried about that...
:: I am aware of the "Be Nice to Opera Hack" but haven't implemented it yet. Thanks for the reminder, I'll incorporate it soon.
:: Thanks again for the PC screenshots. It keeps me honest... :P
:: I agree with the pragmatic side of BorgKing that says we should target the layout to look good in the most popular browsers first, then work on the W3C standards later. It does annoy me to no end that M$ by way of shotty programming is trying to force us to adhere to their standards. Alas, the constant struggle...
Keep the feedback coming, I appreciate everyone's comments...
R
Posts: 974
I'd like to vote for standards compliance first, braindead browser compliance second. It may just be the principle of the thing. There was a time when people worried about Netscape 4.7. Obviously that has changed.
People can always upgrade their browsers. I do.
Posts: 314
Please don't start about Netscape 4.x, it spent quite some lost hours trying to get my sites to look nice in these browsers, sometimes even using different stylesheets for Netscape 4.x, because the browser would otherwise screw it up too much. Nowadays I just don't care anymore about those few users who still use Netscape 4.x (indeed, they should just upgrade).
But upgrading nowadays means for most people upgrading to Internet Explorer 6 SP1, which is fairly standards complaint, but basically setting the standard for web design, due to the huge marketshare of this browser. As long as Microsoft Windows is installed on 95% of the desktops, Internet Explorer will have a similar marketshare, simply because most users are too lazy to install another browser. And I actually don't blame them, I've got Mozilla 1.3 installed as well, but it has no added value over IE6, aside from the Multizilla option to spoof referrers :D
As for you argument that people can always upgrade their browsers, this is not always true. At work (the largest bank in the Netherlands) I still have to use Windows NT4 with IE4. Nevertheless, I think we should not spend too much time on non standards complaint browsers with a low marketshare.
Posts: 7994
My primary goal for G2 is to support the latest version of every major browser. So that's Mozilla 1.3, IE 6, Netscape 7 and Opera 7. I don't know what the latest versions of Galeon, Konqueror, Safari, etc. are.
The philosophy here is that the browsers are improving at a considerable rate. I don't want to clutter up our code jumping through hoops trying to support archaic versions (IE5 has been out since 2000). If we're going to do that, at the very least we should do it at the END of the process, especially when we have so much work to do now.
As for the new mockups, they look great! One thing though, Ross: in the item edit views you're intermingling the layout views (viewing an album and viewing an item) with the item admin views (editing an item, deleting an item) etc.
Those views are actually generated by completely different parts of the code. The layouts are modular and interchangeable, but the item admin views aren't. I don't want to constrain your creative process, but we would have to move things around a fair bit to make it work the way you've got it now. Would it be possible for those views to be on their own separate page? You can still show the image thumbnail and details, etc.
If you feel it's really important to mingle those, we can figure out how to make it happen, but if it's not important then now would be a good time to do it differently :lol:
Posts: 28
Ok sounds good... I will modify the "edit" pages to accommodate the current code. However, from a user-interface perspective, I believe that "intermingling" the layouts (as I have done) would provide a clearer, user experience. Perhaps we can discuss something like this in another version or point-release?
No worries, though... After tinkering around in Gallery 2 a bit more I think I understand the logic behind the current system now...
Also, I have made some minor adjustments to the layout that I believe should solve previously mentioned problems in Win IE 6 (Win IE 5 users will need to chime in...). I also am planning to implement the Opera fixes soon also.
BTW, I also added a "Last modified" date to the Gallery 2 Navigation Map to save future confusion for those viewing the forum...
> http://home.reyman.us/projects/gallery2/
Take care!
R
Posts: 2
I’m new to posting on this site. I use Gallery 1.3.x with my company and would really like to see Gallery 2.0 to be Amazing just like you said. I am a professional UI designer and I would like to help as much as I can even though I might not have much time to put into this project.
I have quickly reviewed what you have so far. It looks like you are off to a nice start… There is still room for improvements, I spent about 45 minuets working on a variation of what I have seen so far. (Images only, designed in 800x600 Adobe Illustrator 10 no html)
http://www.pluginbox.com/proofs/gallery/
Notes:
· Having the navigation on the right side feels awkward.
· Some of the forms and links aren’t aligned properly
· Having redundant links on a page are a good thing. Notice links on the left and the navigation on the top.
· I didn’t fill in all the features that you are adding because I don’t know them all.
So tell me if you are even interested in this design or would like me to continue.
Posts: 28
Thanks for the feedback, Gloves...
Hang on to your ideas and keep checking the forum. I'm sure we will be able to use your help...
The goal of the core G2 interface is to be very customizable. Once we iron out a core layout/base structure of the G2 UI, the layout should be very easy to change. In fact, I'd like to see G2 released with a variety of themes and layouts. So, keep the ideas coming!
BTW, I have posted revised mock-ups based on the present G2 feature set. Again, some parts are a little rough, but the logic behind the layout is coming along...
Ross
Posts: 37
You have fixed the cutofflines, and it "feels" much better overall. I'm impressed.
The edit screens don't have navigation back to upper levels thou. But I think you knew that
Panu
Posts: 2
Rossr,
How do you mean "very customizable"? Does this mean you will be able to change the places of design elements, not just change the colors or style of them?
Also, much like the phpBB project, i think it would be cool for Gallery 2 to have optional Themes or skins. Such as background images. I can provide an example tomorrow of what my simple and plane layout would look like with some stylish background images.
Posts: 37
You may want to read this thread http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=5638
Also, you can modify the layout with stylesheet only, addition to that the smarty templates allow you do whatever you want - remove, add parts of the ui etc.
Panu
Posts: 7994
I see Ross dropped in some new changes earlier this evening. The new mockups now a navigation section which is pretty cool. And some of the inter-mockup navigation is working now also.
It's looking really sweet, Ross! Can't wait to start hacking it into the templates!
Posts: 15
I really like the way G2 is looking!
One thing I hope (and thought I should at least express) is that we can get rid of the pop-up windows for settings. . .hope there is a better way (it seems the mockup is not using popups).
Posts: 28
I'm glad you like the mock-ups!
Indeed, no popups are being used in the creation of Gallery 2...
I'm doing some work on the admin pages, and cleaning up some minor typographical annoyances, and should have them posted soon.
I'm hoping to have some help soon actually implementing the GUI into the existing G2 framework soon... If you are interested in helping out, please contact me: rareyman (at) fastmail (dot) fm
Keep the comments coming and please alert me to any browser layout-css-rendering problems. I will address them ASAP...
Posts: 15
I am willing. . .not sure I have the skills you probably need. . .
Posts: 32
Hey, ross, I've encountered some problem with IE 6 for WinXp.
I've tested on 2 PC.
Look at this page
http://www.trabant.it/images/gallery/gallery3.htm
I try to explain those issues:
1)album view, look at albumbig.jpg and albumres.jpg: In a normal window the grey title box isn't there.
If I resize this window(800x600), the grey box appears
2)In Itemview(itembig,itemres) same problem, but the solution is:
resize the window
simply change the windows on focus, go back on itemview, and the grey box reappears.
3)For all the subpages, but album settings(looks perfectly), look at editbig and itembig.jpg, no description on page until you change the focus with any other window, and the text description appears(editres, itemres.jpg).
All right with Opera 7.11!
Posts: 47
Hi Rossr,
The future lay-out of Gallery 2 sure looks promising, I can't wait to be able to use it in real life...
However, I have some alliging errors and problems with marked text in the general settings screen. I am running Ms. Internet Explorer 5.0 on Windows 2000. I don't know whether it matters, but it is a Dutch version.
I have put the screenshots on the site below:
Alignment of photo's
http://people.zeelandnet.nl/gideonse/gallery2/ie5_pic1.jpg
Marking of text
http://people.zeelandnet.nl/gideonse/gallery2/ie5_pic2.jpg
Keep up the good work!
Posts: 314
I'm having the same problems as volleyclub, also with IE6 on Windows XP (both patched to most recent version). In some cases text only appears after resizing the browser window.
I think this is a rather serious issue, because of the large and increasing number of users using this browser on this platform.
Posts: 32
Ross, same issues after you've added the admin section.
Only admin view>general setting looks good, the other subpages don't show the text.
That's for IE6 on winxp.
With Opera 7.11 all right, but I've discovered a new important issue.
I think that it was always in, but I'didn't even noticed.
Look at
http://www.trabant.it/images/gallery/operabutton.jpg
Don't look the buttons a bit odd?
In Opera 7.11, everywhere, the buttons are rendered so!
New entry: Mozilla 1.2.1 for winxp.
The layout looks very good, except for the buttons!
They are overdimensioned, very weird!
Take a look at
http://www.trabant.it/images/gallery/gallery4.htm
The subpages gallery settings:album and delete album are good, all the rest is strangely bad formatted...
Do you think that Mozilla is worth our attention?
Posts: 314
I think Mozilla is definitely worth our intention. First of all because Netscape 7 may well have the same behaviour and second because it's, along with Opera, the alternative for Windows users that prefer not to use Microsoft products.
I will test the mockups in Mozilla 1.3 on WinXP tonight, to see if it's by any chance version number related.
Posts: 314
I will still try 1.3 later on, but I just installed Mozilla 1.4RC1 on this computer and the strange behaviour volleyclub noticed doesn't occur. I first thought it was because he is using XP's visual "improvements", but on my system it doesn't occur either when I turn them on.
Posts: 32
just tested with Mozilla 1.3.1(the last finished release)!
The strange behaviour is gone!
All the buttons have now the right dimension, don't worry testing it, borgking!
Remain the issues with IE...
Posts: 19
I think Internet Exploiter 6 is one big pile of crap on a stick, as far as it goes for generating designs using pure XHTML (That is with the strict DTD and no tables), and CSS2.
IE has sooooooo many bugs with it's rendering engine for XHTML with DIV tags and CSS2, it's just silly trying to make code that works on both IE and Mozilla/Netscape, it's just never going to work, and if you do get something to work, it's going to take agies trying to faff about getting the right settings.
I recently slapped up a purely XHTML with no tables design. I took a random site, http://slinky.co.uk, and waked up a design and the XHTML one day, just so I can get some experience with tableless design.
http://www.jason.hybd.net/slink/
is the result. I didn't do everything on the front page, seeing as I was only playing about. However, this design starts to show flaws in less than 1024x768 full screen, and getting Mozilla and IE to work with it was very annoying. The design however works in NetScape 7 and IE 6 as far as I know. However, once I put this design into a content management system, where content and data can be of any size, if a picture is too big/small or certain columns end up being too wide, the design breaks. This is something IE normally ends up doing.
As a result, I still will design with tables for all my own personal projects for now, until MicroSoft get their act together and design their software to WORK!
FOr gallery, I think one work around would be to get the tableless XHTML design that rossr has been doing just to work in Browsers that fully support ***THE*** 'STANDARD'. That is Mozilla, and to some extent, opera as far as my experiences go. We can then go back, and work on getting IE to work, as bharat suggested. I personally think that it might be worth using some browser sniffing, and making IE use a different set of templates that based TABLES, more than DIV tags. This may seem stupid but the advanages of this mean that we can ignore the flaws in IE and concentrate on design, and second of all, we don't spend lots of time trying to make work arounds for IE, by 'trial and error'.
Hopefully next week, I'll get some time to play with Smarty and I'll try and get some of rossr's templates processed into Gallery.
One site I would think is worth pointing out to designers, is the Zen Garden site.
http://www.csszengarden.com/
This site speaks for it's self, it's a clever way of showing how CSS can do almost *anything*. It would be nice to make gallery so that all of the formatting and design is held in the CSS and XHTML is only used as a 'structuring' device. I hope this works as some inspiration to others :D
Jason
Posts: 28
MiiJaySung, et al:
Thanks for the feedback/kind words/bug finds.
Thanks to the help of Gerrit Kaiser, I've been able to fix some of the font-problems and layout glitches.
I should have a build up soon.
I am shooting for a completed theme by next week, so theme designers can start designing new layouts, themes, etc.
csszengarden.com is an awesome site and great inspiration to how css and xhtml can work.
I will post a quick note hear when a new build is up.
Ross
Posts: 32
Hey ross, the new corrections work,but I've met a new issue with IE6 for winXP: the grey table with the name of the subpages doesn't appear, noly on the following subpages:
album-add comment
-gen settings
-album set
-delete album
item-add comment
-edit image
-edit sizes
-delete item
good for the others!
-
Posts: 28
Will look into it! Thanks Volley...
By the way, there is a new build up with album settings tweaked a bit...
Posts: 19
Blame Mr. Gates for that, because I have the same problem with I make designs that are totally CSS 2/XHTML based. As I've said, it's reffered to as the Peek-A-Boo bug, and there is nothing you can do about it; unless you reprogram a lot of the under laying code for the design. Even still, you can't say that will get rid of the problems.
As I've said, I would ignore the IE bugs, and focus on getting things to work on Mozilla. We can tidy things up for IE later, even if it means making the damned thing using tables, which goes against the design plan of the project.
Today, now my stupid exams are over, I had a play with doing some desing work on PhotoShop. I kinda like the design Ross did, and therefore it's not much different, except it has some colour added to it. It would be pretty easy to change the colours about as well, for other colours like a neutral green colour, or a pale yellow/gold.
Here's the URL
http://qb45.tonez-online.com/jason/galleyDesign.png
Later on I'll start playing with Smarty. I have no experience with the system, but I've used other templating systems. I'll see if I can get some of Ross's stuff put into the project, as that is already in HTML and for now I'm too lazy to covert the image mock up I did into HTML, mainly because I find making no-tabular design very frustrating due to Microsoft's lack of thought in designing IE. If I get round to doing some of this, then I'll have a play with the style sheets.
As Ross implied, it would be good to have a very standard HTML design and then try and stick to making most of the aesthetic changes via the Style Sheet. this also has the advantage of giving less HTML for smarty to process.
Anyway, for now, that's my 2 cents. I'll try and find some odd bits and pieces I can be getting on with for next week if I get the time. I don't exactly know what things I get done, I'll just see how much time I have and what things I feel would contribute for now
-- Jason
Posts: 19
Could you make it so on your site you can download all of the work you've put up there in a ZIP file. it will save me going through each damning view and saving the file in IE. That way i can take stuff home and work it from there. I generally don't surf the at home as it costs a bomb, because my old ISP moaned I was abusing the service because I was using it too much. Another words my ISP was overloaded, and so they just chucked off everyone using the service a lot instead of getting new hardware.
I'm off to uni in 4 months time, so I'm not asking mom to get sign up to another ISP. As it is mom had to sign up to BT, the most annoying ISP, and if I ask again, I'll probably end up using something like AOL (Yuk).
--Jason
Posts: 19
http://qb45.tonez-online.com/jason/G2-Design-2.png
Got some time last night to much about a bit more. I like the logo that someone made up on the forums, so I decided to make an adjustment of my design that used that logo and the colours. I dunno if I prefer this or the blue. Anyway I think this has some nice cheerful, calming, but exciting use of colour. It would be fast loading as well. I find the YES/NO buttons interesting. I think they look kind cool there as they break the formal layout up a little, along with the overlapped logo. I put them there as I had no room next to the question.
It would be nice to make it so when the mouse hovers over buttons background colour change tone a little maybe. This mock up is really concentrating on colour and looks more than interface, as things like the Slide Show option can be taken away on things like the delete photo page, as they are only cluttering the place. I just wanted to get something visual made up, so I slapped it in.
Posts: 32
I like the last one very much, maybe the blue could be deeper, like the tone of new logo?
IMHO the yes/no buttons should remain on the same style of the others on the page, otherwise could be inconsistent and confusing for users.
Posts: 28
Nice job, Jason! The design is colorful and looks great!
You will defintely be able to implement a design similar to that using style sheets. (If all goes well...) In the next few weeks, I will be working closely with core G2 developers to put together a working version of my mock up. The whole while, I will be compiling information that will eventually make up the core of "documentation" on making gallery themes.
For the geeky:
> http://home.reyman.us/projects/gallery2/deconstruct/
(links will spawn a new window...)
This document is a work in progress, so please ignore typos, inconsistencies, etc. Check it out if you want a peek at the style sheet and how things are organized in the mock-up. Editing these main elements will be give theme designers the flexibility they need to create new layouts...
Again, this is all pending a smooth transition from concept to implementation.
Oh, by the way do you still need the HTML in ZIP format? Let me know and I'll post it and/or email it to you.
Posts: 19
that you have (both the geeky stuff and the other pages), I'll see if I can integrate some of the pages if I get time, or at least get to play with the templating engine with some useful data if nothing else.
if you want to email it, Jason @ hybd.Net is my email address (without the spaces)