Ideas for front-end 4.0

[zdzichu3000]

I have some ideas that I think could change the front-end development of a more useful and friendly in the upcoming version of phpBB.

1.
It seems that in the future everything will be based on flat design. Even Apple that held the skeuomorphism, chose a different path of development. Flat design usually associated with the Windows 8 and Metro style, but there are a lot of sites that use a flat design. This is the future for webdeveloping.

2.
A lot of people are using mobile devices and a great help for them is that the site is suitable for their devices.

A default mobile web style is the only thing phpBB needs. More to the point, a responsive design. Something that will adapt the the many changing screen sizes that are emerging.

The Internet has changed a lot over the years and so has how people connect to it. I use both my desktop computer with a 32" flat screen (HD), but I also reach my site using a small Amazon Kindle with only 7" for viewing. My sister uses her cell phone and you figure that is 5" at most?!

A responsive design is something phpBB needs.

So it is necessary to build the responsive sites for smartphones, tablets etc.

3.
To keep it simple to write plugins js, in my opinion phpBB developers should include a jQuery, and if possible adapt some useful things (based on this script) in the default skin. Native support.

Avatar Resizing
• If an uploaded avatar is too big, it should automatically be resized

➔ jQuery.

My suggestions

• Everything has to be scalable. Zooming in and out (Ctrl+ +, Ctrl + -) can not reduce the quality of the graphics. We have confidence that all devices will be high-quality graphics. So instead of the buttons like that:
or

use something like that. Based on CSS and vector fonts buttons is simple to introduce. Scalable and pretty. Sample:

Code: Select all

CSS

@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); }

...

a.home_button:before { font-family: "entypo"; content: "⌂"; height: inherit; }



HTML

<a href="#" class="home_button">Index</a>

Look at this

!NO MORE:

Code: Select all

# Images
img_icon_contact_pm = icon_contact_pm.gif*20*28

img_icon_post_edit = icon_post_edit.gif*20*42
img_icon_post_quote = icon_post_quote.gif*20*54

blah blah

There are a lot of vector font.

• Vector backgrounds is a good thing.

• As stated above, in the default style you have to use the flat design. Sample.

• The most important thing: in the default skin of phpBB, please use some front-end framework. Foundation would be nice becouse after the publish a new script of phpBB, people would change a skin / look and a framework will make this easier. I mean the positioning of interface elements. Put the code responsible for positioning (especially GRID), and build phpBB from it. Reverse engineering is much more difficult than learning Grid Sizes from Foundation.

For example a new version of Joomla uses Bootstrap.
"Mobile R3ADY / US3R Friendly"
He'll be good for them.


phpBB developers:
You are doing a great job!
Phpbb rules!


Pozdro
Zdzichu from Poland.

[hanakin]

Where to begin...

using a framework is not a good idea at least not for a final version of a theme. One can be used in development but the goal is to serf customized experience with the fastest page load on a per page basis which is not possible with them. I have started a lot of these things in a theme that will be released pre 4.0 as the timeline for this is probably at the 5-10 yrs off mark. https://area51.phpbb.com/phpBB/viewtopi ... 81&t=44231

[stevenmw]

First off, flat design isn't anything new. Especially in blogs. I've only recently heard it called flat design. I generally just called it design. I was building websites like these back in 2006. Giving it a label is a bad idea because when they hear those word, "flat design" they will think of one type of design where flat design can be all kinds of things and has all types of possibility. It isn't simply one design category.

As far as the phpbb 4.0 default template, I feel there should be more focus towards organization. Prosilver was a great step forward when it came out. It still is a nice template, but some of it's pages are cluttered, and it is hard to separate pieces of content. Obviously Prosilver's html and css are outdated now with html5 and css3 coming out. The doctype prosilver uses needs to be updated as well. These are the things that need to be addressed first.

As far as implementing Jqeury, I don't know if that is a positive or a negative idea. PhpBB is capable of a lot more than people realize. It can run entire sites with the right modifications. But the biggest hill to climb for me is modifying the template to adapt it so it can work with the entire site. Templates are set up to allow only certain things. I feel the template system should be made easier to implement things into, and modify things.

The thing with javascript is that web site become to dependent on them. Something like PhpBB has to have fallbacks. In order to do this there should be minimal javascript and only in places where if it is disabled or something doesn't support it the site can function without it. Two good examples would be the register page and submitting threads via quickly reply or the full editor. If javascript is there then fine, it can post the data so the page doesn't have to reload, but if it isn't there the form can still be sent and processed without javacsript and there is no hassle.

Javascript shouldn't be implemented on pieces of the template where it can cause a problem. For instance it shouldn't be used to load content boxes or access content areas required to perform actions. It should be used rarely, and only in cases where the pros out weigh the cons.

An example of what I mean is Facebook. If you disable javascript and go to write a wall post on your timeline the post button can not even load without javascript. So you can write your post but you are writing into a textfield so hitting enter does not send the form, and without the button you cannot submit. Requiring Javascript to load the area with the button is presents a huge problem.

To sum this all up. The type of design itself is not important, as long as the code is up to date and everything is organized. When it comes to javascript the minimum is the best, and only in places where it can't hinder site performance if not present.

Thank you all for your great input, and thanks to the PhpBB team for this awesome software.

[renegade8164]

I personally don't like too much AJAX/Javascript. Often makes the site slow instead of make the site "user friendly". Then I think phpBB3 default theme ProSilver is bit of a mess imo, I always base my designs around more like SubSilver-style which also is easier for new users/visitors to get a clearer overview look of the forum.

My suggestion is a flat redesign of the Admin panel as of this topic as I personally did..:
https://area51.phpbb.com/phpBB/viewtopi ... 1&p=254291

[hanakin]

@renegade8164
ok did you only do the front page or did you handle all of the sub pages as well? Also did you take into account responsive when you planned it? Just looking at this screenshot does not provide us with any of that information. Just looking at though tells me that it is not responive all you did was romve the round corners, add icons to the tabs and alter some colours and spacing a bit.

Do you see why more explanation is required here.

The first post sort of speaks to these points and I am not saying that you did not do these things but let us know wht it includes.

@stevenmw & zdzichu3000
jQuery already is included

@stevenmw
Everything zdzichu3000 said is pretty much true

The labeling of the design approach is fine you are just being a little anal he was simply trying to explain a look and feel as easily as possible and when it comes to the web everything is categorized when it comes to design cause its open source everyone feeds offf of everyone...

Javascript being disabled is actually a moot point and old hat web dev/des ppl need to realize that and move on with their life. According to a recent studied that was performed the desktop is not even the most used interface to view the web anymore the tablet is. IE8 is on the way out and IE10 is closely approaching. We need to stop limiting our selves and start developing/designing for the future otherwise we are going to just end up back in the old days of divitise several assets for different browsers and the archaic pain of cross browser at the time.

In fact the only thing you did say that I agree with is that javascript should not hinder performance, however this should not limit the amount of js that is required

[stevenmw]

hanakin.. You said

@renegade8164
In fact the only thing you did say that I agree with is that javascript should not hinder performance, however this should not limit the amount of js that is required

But that is what my entire post was about. So if you agree with that then you agree with my other points. Otherwise you completely misread my meaning..

I was just building off of what you said, and agreeing... And you are correct, JQUERY is included.

Where to begin...

using a framework is not a good idea at least not for a final version of a theme. One can be used in development but the goal is to serf customized experience with the fastest page load on a per page basis which is not possible with them. I have started a lot of these things in a theme that will be released pre 4.0 as the timeline for this is probably at the 5-10 yrs off mark. https://area51.phpbb.com/phpBB/viewtopi ... 81&t=44231

I also agree with this

I personally don't like too much AJAX/Javascript. Often makes the site slow instead of make the site "user friendly". Then I think phpBB3 default theme ProSilver is bit of a mess

The labeling isn't hugely important. But developers today are too focused on these terms. All it does is create fads and steer developers away from what is important. I was just pointing out that people have skewed perceptions, they can read a five page paper and derive their own meaning based off of two words and entirely miss the point. You're going to have those people out there who hear the words "flat design" and think of one set thing and totally be against everything from the start because to them, those two words are a set identifier to one possibility.. (Like I said above, I do not feel like the type of design is as important as organizing the content. And I will always feel that is a good way to look at web design.)

Javascript not being present isn't a "moot point." You can't simply design just for one user base. And you definitely can't just design for mobile / tablet devices. I am not saying design for Internet explorer 6, 7 , or 8. That is just ridiculous. I just feel that javascript hinders the performance in a lot of sites. People put so much focus on AJAX / JQUERY and they don't write their code properly because of it. I am just stressing that their should always be a fall-back and using Javascript in general to load sections of content is a bad practice. By load sections I mean to load hidden objects. Like hidning a login form, and only making it visible by clicking on a button or link. Just like I said about Facebook above. I don't know if they fixed it, but they used to have it where JS loaded the post button when writing a wall post. The field that you wrote into was a textfield so it could hold the large amount of text. But this meant that you couldn't hit enter to submit the post either. So you had absolutely no means to submit your post. A lot of site's will put so much into their JQUERY that they don't put a lot into their PHP. A big thing that comes to mind is validation. People are really starting to overlook validating forms the in a strong way due to so much Javascript implementation. People are so worried about that real time validation that they over look actually checking each field on the back end. Yes, it is amazing that we can see if a username is taken, or a field was filled out wrong before submitting a form, but we are losing focus on the back side of things.

You say "old hat web dev/devs", but in reality we have to stick to the old philosophy, functionality and security first. That is all I was stressing. I realize that Javascript is almost always going to be present these days in any device, but covering your bases in case something goes wrong is still a good practice.

No where did I say zdzichu3000 was wrong. There is a huge growing need for tablet and mobile device support, but saying that flat design being the future is wrong. Flat design isn't anything new or revolutionary.

He goes onto to say that

Everything has to be scalable. Zooming in and out (Ctrl+ +, Ctrl + -) can not reduce the quality of the graphics. We have confidence that all devices will be high-quality graphics. So instead of the buttons like that:

This is entirely true, but it doesn't have a thing to do with flat design. It has to do with minimizing the amount of images that a design uses, using em for fonts, and percentages for widths in order to establish a 'clean' and 'responsive' design. These concepts didn't derive from flat design. These are principals that have been acknowledged for years.

What is amazing about CSS3 is that you can do all of these things that in the past you had to use an image to accomplish. Things like box shadows, gradients, rounded corners, etc. It is the innovation of new coding standards, practices, and ideas that are moving web development into the future, not some design category / type.

A major advancement are vector icons. The ability to rotate, change the color, and other properties of an image simply using CSS is an amazing concept. Another big thing is the ability to build two separate designs, one for mobile / tablets and one for desktops. I understand tablets are a big focus, but desktops still do need to be supported. Whether it is looked at as an "old hat" way to develop web sites or not.

One thing you said that I really agree with is when you said

Where to begin...
using a framework is not a good idea at least not for a final version of a theme.

I really believe in that view. Everyone is building some kind of framework today to try to make web development an easier job. Not only is this causing people to not learn how to code for themselves, but it is presenting the idea of using these huge frameworks with these large amounts of files when you may only need a piece or pieces of the framework. yes you can pick and choose what you need, but you still may need a large file just to use a certain piece.

Just like Symfony, I am indifferent towards it and it's implementation into phpBB. I understand it is a huge thing right now and everyone wants it, but i feel we should focus more on making phpBB easy to integrate websites in general not just certain frameworks.

The whole separating designers by their practices is silly. The fact that everyone has a different way to do or look at something means more innovative ideas, and more input for these open source projects.

Designing a forum for a mobile / tablet device will be a hard thing to do. We'll definitely have to do away with certain pieces of information normally found on the forum body / index in order to fit everything. And we'll have to decide which pieces of information must be on the index and which pieces are easily found on the other pages. Items like the number of posts and topics come to mind. Those are two items that can be taken from the forum-list body and give us more width on the screen for the forum title / description area, and last forum posted to area. We don't really need to know how many topics or posts there are in the index. These are things we can display once you are in a specific forum. These are things I feel should be addressed before any specific design type is set in place.

On another topic. There wasn't any need to be rude to renegade..

@renegade8164
ok did you only do the front page or did you handle all of the sub pages as well? Also did you take into account responsive when you planned it? Just looking at this screenshot does not provide us with any of that information. Just looking at though tells me that it is not responive all you did was romve the round corners, add icons to the tabs and alter some colours and spacing a bit.

Do you see why more explanation is required here.

You claim I was being anal, but what does this sound like? ...

First off, you simply said, "responsive". What does that even mean? New developers need to clarify what responsive design is. Everyone wants to throw this word around but now explain it. You say that by lookingat it tells you that it isnt responsive, but that is impossible to tell. You have no idea if it

A. uses em for fonts
B. has one class or id that wraps the entire design with a min-wdith assigned so that the content doesn't shrink to much when the browser is shrunk (prosilver is responsive but has a min-width of 650px)

C uses percentages for its containers

How can you tell by looking at a picture that his design does not include these things? Don't say, "that was my point" either. I am refering to when you said, "Just looking at though tells me that it is not responive." You say it like it is a fact that he hasn't included these thing.. When there is no way of honestly knowing..

We are getting way off base now. I feel like the first priority of a new design it the quality of code and using updated code, then organization, then the look. As far as the admin panel is concerned this thread isn't even about that. So no reason to argue or be rude over it.

[Pony99CA]

Where to begin...
using a framework is not a good idea at least not for a final version of a theme.

I really believe in that view. Everyone is building some kind of framework today to try to make web development an easier job. Not only is this causing people to not learn how to code for themselves, but it is presenting the idea of using these huge frameworks with these large amounts of files when you may only need a piece or pieces of the framework. yes you can pick and choose what you need, but you still may need a large file just to use a certain piece.

This has been argued almost since the beginning of the digital computer. Assembler coders thought high-level languages were too inefficient. Old school WIndows developers probably thought that MFC slowed things down too much and made installer packages too big. And, at the time, those arguments had some validatity.

But computers got faster and less expensive, so that human time cost more than computer time. Software started shipping on CDs (and DVDs) instead of floppy disks. Yes, the arguments are still true to some degree, but do ALL programmers need to know assembler or know how to write message processing loops? Those that do might be "better" programmers because they know the guts on the system better, but people can be very good drivers without knowing how to tune the engines in their cars.

And now you trot out this argument about frameworks. Like many of the technologies alluded to above, they're meant to improve productivity by allowing most people to work at higher levels of abstraction. That's generally a good thing. And, with networks getting faster every few years, downloading framework code won't be a huge deal, either.

Steve

[stevenmw]

Pony, you're right and you make an excellent point. Most frameworks do improve productivity, I am a fan of the Twitter Bootstrap and Font Awesome Icons. I was referring to frameworks that do almost everything for a developer. You're absolutely right about things getting easier / faster and moving forward. Not all users need to know how the guts work, you're right about that too. I just see a lot of developers today worrying about all of the wrong aspects some times, and I feel that if we start building these huge frameworks to do basic tasks we may take a step backwards at some point.

And to clarify I wasn't referring to downloading frameworks themselves. I was referring to slowing down websites by requiring large numbers of files to do a few simple things in a single file, or slow the site down by having unused files from the framework sitting on the server. Obviously like I said above, we can pick and choose just what we need and do away with the rest, but what about new developers who don't know exactly what isn't necessary. So these guys just load tons and tons of files up on their web server and bog their web site down.

But you did make an excellent point. I am simply stressing that we should be careful with any standards we set in place or allow to become the norm. I just don't want using large frameworks to accomplish simple tasks to become the norm. You're always going to have some user who thinks more is better, and implements 3 or 4 large frameworks to accomplish a few small tasks. Another big thing about certain frameworks is that they may lead to a lack of security, and using multiple when you do not need to you increases your attack surface.

I realize I may look at things in a more closed off way, and that I'm probably just being overprotective. This thread was meant to talk about ideas for the front end, and I've derailed that. What are some things you all would like to see implemented or done differently in phpBB4's front end?

I agree with the OP. The new design should be simple and clean. It should also be a bit more organized than some of Prosilver's pages. I'd like to see vector icons. Maybe even implement Font Awesome icons into the template. I'm sure it has all ready been suggested, but I'd like to see html5 container elements in the design.

[hanakin]

Pony, I agree I am not saying that a framework should not be used anywhere ever, but the approach of the framework should not be that of the more popular ones out their clogging the net such as bootstrap that just includes all this blot instead take the approach of something that simplifies the coding process on the dev side like compass. This is a framework that gives us a lot of power and leverage in writing our code without adding a lot of the extra unneeded code in the final css. In fact recently I have moved toward using a sass approach to the theme I am currently working on for this reason and a couple of others. One I am really intrigued about is the on call media queries rather than just using the current method of having a separate file of ginat queries for the different devices you define the changes directly in the class they belong to. Keeps everything cleaner and simplifies the responsive process so much.

[stevenmw]

One I am really intrigued about is the on call media queries rather than just using the current method of having a separate file of ginat queries for the different devices you define the changes directly in the class they belong to. Keeps everything cleaner and simplifies the responsive process so much.

I'm having trouble trying to explain myself so please bare with me.

Media queries are an excellent way to handle mobile / tablet layouts, but we have to keep in mind that they limit us. Media queries are often handled by screen size. If the screen size is lower than do this or larger than this do this, etc.

We need to keep in mind that we are altering an entire layout by simply changing the way a class or id is displayed. Because of this designing the page and choosing how things are laid out becomes a bigger task. We can't simply design a page for a desktop browser and then hope to change a class and expect it to work on a mobile device. We have to lay out the ids or classes so that when we alter the second version of a class we can accomplish the look we want. i am just saying that there is a lot more to consider when designing using media queries because you are changing the layouts based on a few pieces of css.

When using different layouts for different devices it is easy because you are designing layouts separately, and each for a specific purpose so you don't have to take anything else into consideration.

With media queries everything has to be set up so it can transform into what you want it to be.

I really like how media queries keep things small and simple. Hanakin is right at how easy it is to keep things responsive with them. One thing I like is how I can define an overall width of 85%, but if a user is using a smaller screen I can set it so that their width is 95% to increase viewing space.