Ai Dreams Forum

AI Dreams => Welcome to AI Dreams forum. => Announcements => Topic started by: Freddy on March 13, 2015, 10:50:18 pm

Title: New look makes space for mobiles
Post by: Freddy on March 13, 2015, 10:50:18 pm
Hopefully you will be seeing the new look now.

If things look odd try a hard reload of the forum or refresh.

For a while I wanted to alter things so that the site would work better on mobile devices. When I saw my friend Bloc had made a nice theme for SMF I saw this as my chance to improve things.

I took his theme and customised it to our requirements, with panels, the home page and the articles as we are used to. Also adding things in from the old theme like the round avatars on the boards.

Most of it I think is done now. You may see odd things that don't look right. If you do please post about them in this thread.

Main things about the theme are that it is responsive, ie; it changes to screen sizes. I've allowed it to go down to as small a screen as 600 pixels wide - which is the kind of thing older mobile phones might have. But it also adapts to 800 and 1024.

On smaller screens and assumed less powerful devices things like the rotating planet gets removed so as not to  tax someone's phone.

You'll notice I moved some of the things to the footer. I prefer them down there now. That planet interrupts scrolling so it was necessary to move that. All that stuff is not what you want to see all the time in the fore front, but is interesting sometimes.

I think that's it for now. I hope everyone likes the newer look :)
Title: Re: New look makes space for mobiles
Post by: Freddy on March 13, 2015, 10:56:50 pm
P.S. I know about the video sizes on the pages, I'll work on that tomorrow.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 13, 2015, 10:59:34 pm
Oh and one more thing - in the recent posts table on the right - a new post is highlighted by a blue bar to the right.
Title: Re: New look makes space for mobiles
Post by: Ultron on March 13, 2015, 11:05:25 pm
Only one, but very serious remark - I want the 'show new replies' link back! It was a truly unique property of this forum and I got used to it - it was very useful.

Okay, one more thing, but it is more of a personal taste - the font, it's kind of, too typewriter-ish.

Well, since I started, 2 more... Okay let's cut to 1 more... The logo - I previously did not mind it, but now it seems as it needs a new look to fit in with the theme...


Edit: Sorry... Just noticed the 'replies' button :D
Also, forgot to mention the good part - a much more modern look and I like that I can see my avatar on the top right now :)


Oh, and forget the font... It just appears as such on 'quick reply'. Forget everything, actually. Cheers to the new handsome look!
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 13, 2015, 11:05:38 pm
There is something, I don't enjoy with the new theme.

The blue (turquoise) bars at the bottom, with white fonts

are very similar and easy to confuse with title bars,

sort of like upside down windows.


This feedback is meant as constructive criticism, only
.
Title: Re: New look makes space for mobiles
Post by: claude2 on March 13, 2015, 11:07:58 pm
New! superb! ;)
Title: Re: New look makes space for mobiles
Post by: ivan.moony on March 13, 2015, 11:17:26 pm
i like it too :)
Title: Re: New look makes space for mobiles
Post by: Freddy on March 14, 2015, 04:08:23 pm
Thanks for the comments.

8Pla.net I quite liked the turquoise bars like that, did anyone else not like this ?

I've increased the font sizes around the place as they were a bit small. And changed the reply font to Arial.

YouTube videos now scale themselves although I had to make a compromise on height, so they go a bit square on some resolutions. But hey at least they change size and you can play them :)

Title: Re: New look makes space for mobiles
Post by: ranch vermin on March 14, 2015, 07:27:34 pm
Im not bothered by the change, looks good!
Title: Re: New look makes space for mobiles
Post by: Ultron on March 14, 2015, 08:54:53 pm
I am not sure what are these 'turquoise bars' everyone is referring to but I liked all the colors and combinations so far.. A lot.


Except this most recent change and I am going to take the liberty of taking the 'critic' role in this topic (well, as usual) - the latest background. Reminds me too... much... of Win XP! Also does not match a forum that is by default aimed at technology and science. I mean, green is a good color for the eyes to see and nature is always an amazing site however right here it just does not seem topic-suitable.


Sorry for being annoying... I would like to point out that I would never want anything changed if I'm the only one with objections.
Title: Re: New look makes space for mobiles
Post by: squarebear on March 14, 2015, 09:06:36 pm
I couldn't see any turquoise bars either. I was going to comment about highlighting the new posts but I see you have that covered. Looks good Freddy.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 14, 2015, 10:04:14 pm
Those bars are on the 'home' page.

I'm in a quandary, I like the background, I think it's nice and fresh. I tried some binary backgrounds but they did not really lift the site the way this one does.

Hmmm.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 14, 2015, 10:11:15 pm
Im not bothered by the change, looks good!

Thanks mate  :)
Title: Re: New look makes space for mobiles
Post by: Ultron on March 15, 2015, 03:32:54 pm
Those bars are on the 'home' page.

I'm in a quandary, I like the background, I think it's nice and fresh. I tried some binary backgrounds but they did not really lift the site the way this one does.

Hmmm.


Oh now I see them... Look good, actually!


Regarding the background, I suppose you are right - it does bring some life and vibe into the whole site... Can't get that effect with something technology-based. I will not bug anymore about this :P


P.S. An idea... Why not enable personalization of the overall forum looks (or at least background)? That way I won't be a pain in the ass sometimes. Just kidding.  ;)
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 16, 2015, 01:08:50 am

8Pla.net I quite liked the turquoise bars like that, did anyone else not like this ?


Once, it was fun to make Linux look like XP using a background image like that.  So, I understand the appeal. Well, let me discuss some possible alternatives which share that appeal, and may even suggest a nice, and valuable improvement. 

If you like that outdoors theme, but would prefer the theme to be more A.I. related, you can have the best of both worlds, and promote your awesome accomplishments... I would suggest you take a screen capture with your chatbot standing in the artificial terrain and use that as a background image.

The chatbot can be standing either on the far left or, far right, so you can see her behind the forum panel.  Or you might consider making the forum panel transparent, or reduce the opacity, so it is semi-transparent.  Another option would be to reduce the width of the forum panel, for wider backgrounds visible on the sides.

The turquoise bars used to match the previous theme. For them to be more aesthetically pleasing, you may need to use a color picker app, to match their color to the current theme.  For example, using a color picker, the grass is green color: #99C21C, the sky is blue color: #578BBA and the clouds are off white color #EEEDED.

Oh, and I do like the current theme, Freddy, because I know how much work is involved with a forum theme.  I've made plenty forum themes myself.  It is hard to believe how many images and cascading style sheets and HTML templates, there are in one theme.  It is a big job, I know.  Thanks for doing it so well, and you have my appreciation, on whatever you decide.   All my comments are constructive, meaning they are intended to serve a useful purpose.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 16, 2015, 01:35:32 pm
Yes, a few people have said now that it reminds them of XP.

Your idea about my work in Unity is a good one. I took a screen shot from a hill. I left Jess out of it though as it looked odd with her there.

Everyone try a page refresh to see the new background.

I'll be working on my Unity project again soon, so I will update this image if I find a better vista :)

I don't like transparent areas that way, because often they make things hard to read. Thanks for the idea though.

I'll have a play with the turquoise things, I still like them personally.

Thanks 8pla.net  O0
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 16, 2015, 11:22:48 pm
I made a mockup theme layout called Dream Theme.
It is a skeleton with no functionality.  However, it has just
enough structure to test how new theme ideas may look.   

Reference: http://elizabot.com/theme (http://elizabot.com/theme)

Hit refresh for a unique demo each time.







Title: Re: New look makes space for mobiles
Post by: Art on March 17, 2015, 12:19:35 am
The only unique thing I see are the "postings".
 But still the idea does have some merit! Nice!
Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 12:02:46 pm
I only see one variation with a graphic background on the little footers. Using Chrome.
Title: Re: New look makes space for mobiles
Post by: squarebear on March 17, 2015, 02:47:01 pm
I don't see what AI Dreams has to do with World of Warcraft. The theme seems unrelated.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 04:24:40 pm
Yeah I think that could be potentially confusing.  ;D

It's not the same one that was there earlier SquareBear.
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 06:04:46 pm
The fist demonstration is finished.  It has been archived.
Next, just demonstrating another mockup theme layout.   

Freddy, this next demo loosely correlates to our discussion
about an avatar in the background on the side borders.

It is modded from a freely available phpBB theme.
Try using your imagination. There is a poll to cast a vote.

Same Reference: http://elizabot.com/theme (http://elizabot.com/theme/)
Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 06:42:51 pm
Quote
Try using your imagination.

Sounds a bit condescending...or I am just reading it wrong.

I've made game sites before for things like LOTRO and Guild Wars 2, I know the style. I agree with Steve, this does not seem suitable for here though even though I am a great fan of gaming site designs.

As I mentioned earlier somewhere - I did try it with my Jess character but it does not look right and people may wonder who she is. Maybe when I have finished making her world it will make more sense, so I may come back to this :)

Thanks for the input though. I'm going to have a look at making a background changer, so I'll see what develops from that.
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 07:05:50 pm
Quote
Try using your imagination.

Sounds a bit condescending...or I am just reading it wrong.

You're just reading it wrong.  I meant some imagination may be needed in this case.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 07:08:33 pm
OK good, thanks for clearing that up.

Maybe we should have a competition or something where people make backgrounds ?

Or just drop in some that can be freely used and we can sift through them perhaps.
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 07:51:59 pm
I wanted to suggest, and this is just a suggestion... Matching the AiDreams width, to the width Chatterbot Collection.  It would double the side borders for the background image.

Also... Another suggestion... The current background image file size is 250K.   I wonder if the same exact visual effect can be accomplished, after optimizing the 90% of the background image which is not visible?  It would reduce the file size to 25K for mobile devices, but look exactly the same as it does now.

Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 07:56:39 pm
I'll have a play with the width, but I think it's pretty optimal atm - what resolution are you on ?

The idea about the hidden part of the background is a good one - I've used that trick before - in the past I have just cut a chunk out entirely. I will sort that out.  O0
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 08:27:47 pm
I have nothing bad to say at all.  This site has been up for ten years.  There is no wrong way.  My discussion here merely opens a dialog about designing a consistency between the two sites.  So, when you switch between them it looks smoother.

I think The Chatterbot Collection is the more standard width, and I think AiDreams content will fit very nicely in that more standard width.  There seems to be plenty of extra space in this wider width.  It is easy to do too.

Just make a quick backup of your two theme files via FTP. You can start a simple html table in the header theme file just after the opening body tag, and close that table just before the closing body tag in the footer theme file. The whole forum module will be contained in a table that you can style! Easy to do, and easy to undo. 

There's a lot of cool tricks to do with this idea, but I'll save that for further discussion.  As for resolution, when AiDreams is on one tab, and The Chatterbot Collection is on another tab, and you switch tabs back and forth...  Do you see a difference in the two widths?  It might be eye candy if they matched. Just sayin'



Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 08:36:12 pm
Yep been doing this a while myself now, I know how it's done ;)

I'm not worried about the two sites matching to be honest.

Some people don't like what they may see as wasted space to the sides. I'll compromise and keep the width the way it is. I can't make everyone happy.

I did crop out the middle of the background image though. Took about 50K off the image.
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 08:47:59 pm
I don't see what AI Dreams has to do with World of Warcraft. The theme seems unrelated.

Least you could've done is voted in the pole, and said hello to the three record chatbot.  :tickedoff:




Just kidding!  That was a joke.
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 09:14:34 pm
That's all good, Freddy... I'm not unhappy at all... I'm just chatting.  Web design is still an interesting topic.  A trick to do with the table idea, is to make a fake background by having a 100% width on the table, and then a column span of three for the header, three columns, with the forum module in the middle, and a column span of three again for the footer.

Example:
Code
[header colspan=3]
[side][FORUM][side]  ( 3 columns)
[footer colspan=3]

Now you can cut up  the background image into smaller images of just the parts that are visible, and probably reduce the overall file size by 90%... That's a reduction of about 225K in this case, and it should look identical to the 250K background image.

That chatroom you coded in JavaScript is superb!  It is nice to chat with someone who understands the subject well.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 17, 2015, 09:31:53 pm
Trouble with using tables for layout is it's bad practice these days - I gave that up a long time ago.

I'm happy with the 200K image. Most people have broadband now, it should not cause too much trouble. Tricks like this I used to use back in the day, these days it's not such a problem.

I'm glad you like the chat room. It was an interesting project to work on. :)
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 17, 2015, 10:50:40 pm
Freddy,

You may have to redo the background from the source file with the white square down further.  Please find the attached image and look at the top center... See the top of the white square behind the forum panel? I wonder if the square can be bigger, after being positioned down further?

Awesome!  We are designing the theme from the UK and the US.

TIP: Instead of white #FFFFFF, use one of the nearest colors like the sky color #E3DACC.  It won't matter in terms of file size, but it may be less noticeable.

Title: Re: New look makes space for mobiles
Post by: Freddy on March 18, 2015, 11:43:04 am
Hmm, thanks. I thought I had that covered. OK back to the drawing board.
Title: Re: New look makes space for mobiles
Post by: Freddy on March 18, 2015, 12:33:50 pm
After a lot of playing around, I went back to the full image. I found that various screen sizes would do what you posted. The small area that I could cut out was not really worth it in the end.

Worth a go though :)
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 18, 2015, 10:27:20 pm
Hurry everyone before it's gone.  This demo site is online now, but really briefly.  When it's gone, it's gone.
For discussion purposes only, I created a temporary mockup theme at: http://elizabot.com/theme (http://elizabot.com/theme)
The forum width is modded,  forum colors are matched, and Freddy's chatbots are the backdrop.
The background image is just 88K.   This is meant to inspire an A.I. related theme by Freddy.
It is hard work to design a whole forum theme... I hope this helps.


Reference: http://elizabot.com/theme (http://elizabot.com/theme)
Title: Re: New look makes space for mobiles
Post by: Freddy on March 18, 2015, 10:32:09 pm
It does help. Your background is much better than the one I attempted with my character - I like that she is mirrored. I think I will use that as inspiration :)

I'll up the resolution a bit, I know you only had a small image to play with.

I have Unity 5 installed now so I will be able to make a few more backgrounds and then I will make something so people can choose whatever they like.

Thanks :)
Title: Re: New look makes space for mobiles
Post by: 8pla.net on March 19, 2015, 12:11:44 am
I just added a changing background image to the mockup theme.
It switches between the Unity backdrop and Jesse backdrop now.
I'll add a few other backdrops for variety when I get a chance.

So press F5 or click the refresh button to see the backdrops change.