Dolphin PRO Responsive Design Prototype

Andrew Boon posted 11th of November 2014 in Dolphin.pro News. 26 comments.

Work on Dolphin PRO is resuming alongside with Dolphin U development. As we've announced earlier among other things Dolphin PRO will be getting a responsive design overhaul. There are many ways to make website interface "responsive", though. In Dolphin U, for example, we are experimenting with more unconventional, but compact main menu and adaptive popups, while pages content relies on either masonry grids or adaptive resizing. Dolphin PRO is a different beast, however. Menus are multi-level and there're so many various content types that no one trick can tackle it all. 

 

"Clear" Design Language

Clear - "easy to perceive, understand, or interpret" ; "free of any obstructions or unwanted objects".


We've been exploring different options, putting together different sketches and testing various solutions. We start off with what a "Clear" principle - what doesn't have to be there, mustn't be there. Thus, we should do away with unnecessary shadows borders, textures, gradients, etc. More importantly, we should remove any cognitive load where it's not helping the end-user. Links and menus should only show when necessary; options presented only if needed; meta information minimised, etc. 

 

For easiness of perception, we should look for removing any unnecessary action steps; abridge text explanations; simplify forms. UI design decisions should rely on recognisable conventions that make interaction with a site as intuitive as possible. 

 

And, naturally, we should seek for the design to be absolutely mobile-friendly. So, again, testing on mobiles and tablets first, and then adjusting for desktop.

 

First Prototype

Today we'd like to show you what we believe is going to be a very close approximation of Dolphin PRO visual design. Let's take the homepage with basic elements...

 

This is a "desktop" view. So you can see extra elements like search box and notifications icon in top menu. In mobile view they would hide into side menu and member-menu. 

 

Other elements, like buttons and blocks are as simple as possible. Splash screen is a classic "template" for just about any type of community site intro.

 

Now, let's take a look at the main menu...

 

 

Since Dolphin PRO has so many modules with multi-level menus we decided to opt for vertical side menu that also incorporates site search. This method has become reasonably conventional, so we may expect users to grasp the idea quickly. Most mobile versions of social networks, online newspapers and web stores use some form of slide-out side menu now. 

 

Side menus can work in many different ways as well. They may "push" the whole site or overlap (like in our example). They may also appear static when there's enough screen space. At this stage we believe that simple overlap is the most straightforward way, but live testing may bring more ideas. 

 

Walking The Walk

Despite ongoing development of Dolphin U we decided to ramp up active development of Dolphin PRO now (by popular demand). In part this is because Dolphin U development process often births ideas that just should be implemented in Dolphin PRO. And if not done right away, they may be easily forgotten or overlooked. 

 

Actual release or even Beta versions are still months away (think Spring 2015), but SVN is always there for enquiring minds. We will also keep you updated, even during planning/prototyping stages like we do now. Times and times again we see how community input (especially on early stages) navigates us towards the right direction. So, do let us know what you think, please!

 
Recommended by
 
 
Comments
·Oldest
·Top
Please login to post a comment.
prolaznik
Nice, not sure about the vertical side menu i used that back in the days. Maybe an option to use horizontal menu ??.... Maybe the vertical menu is a good idea time will tell after some demo's are out.
Andrew Boon
Yes, time will tell. Generally I would prefer horizontal, and that what we do in Dolphin U, but with multiple levels like in Dolphin PRO there's no good horizontal solution that would display well on small screens. Vertical has been adopted by, say, Google Plus, Facebook and most other social sites as well. I believe that's because of how many items they need to display, making it hard to use horizontal. Google search, however, only shows a few items and horizontal menu.
houstonlively
veggieipsum.com? Have you tried http://baconipsum.com/ ??

Example:

Bacon ipsum dolor amet turkey ribeye beef, pork belly bresaola sausage tenderloin venison chicken pig brisket picanha meatball shoulder tail. Brisket corned beef bresaola pastrami frankfurter tri-tip ham t-bone. Andouille biltong porchetta turkey. Meatloaf cow strip steak brisket salami tri-tip.

Tenderloin tail pork belly, short loin bacon pork tri-tip swine. Shank sirloin brisket salami, rump pig strip steak cow pork see more chop shankle flank pancetta jerky bresaola corned beef. Turkey ground round beef, pig pork fatback drumstick salami bresaola tenderloin pancetta. Beef ribs swine cupim strip steak boudin kielbasa. Drumstick pig pork belly, ground round brisket turducken swine sausage rump hamburger pork prosciutto jowl shankle leberkas.

Doner shoulder pastrami cow, salami t-bone beef chicken. Salami flank pork belly doner strip steak, sausage turkey. Pork loin short ribs ball tip drumstick. Ham hock alcatra shank bacon. Filet mignon prosciutto pork chop andouille hamburger.

Tri-tip sausage fatback landjaeger boudin spare ribs. Ball tip turkey landjaeger shank pork chop leberkas pig. Shoulder tenderloin sirloin meatloaf, sausage tongue pig pork chop picanha landjaeger short loin turkey turducken. Tail kevin meatball short ribs chicken leberkas pastrami boudin bresaola shankle bacon. Ribeye bacon t-bone doner tail biltong jerky shank.
houstonlively
Vertical menus work fine on mobile phones or touch screens. For desktops without a touch screen, vertical menus suck. One of the reasons I still believe mobile phones should be presented an entirely different template. What we see on the screen should adapt to mobile phones....not be controlled by them.
moonsoon2u
I think it will be a good idea to show us the demo of D pro alpha aswell. So we can also test it along DU. And will be able to give you proper feedback.
Check this website http://tune.pk/ it have same vertical menu but when you click it also switch the whole webpage by making the menu bar static but the rest of the page dynamic.
prolaznik
Did you even read andrew's post ? There is no demo at this point its only a prototype. We'll see some beta versions around spring 2015
moonsoon2u
i gave idea..any how they have to release alpha before beta ;) sugesstion can only be implemented on alpha mode. In Beta its almost impossible to make major changes.
prince64717
looks better than DU design..this one have notification icon too..
and plz don't remove the vertical menu..put this as an option for other who want to use horizontal menu..
lynxmondz
2015?
therefore will have the next dolphin in 2016
over 2 years to get an update?
Andrew Boon
2015 is a few weeks away and once we are on to betas we should progress reasonably fast.
moonsoon2u
By spring 2015 will D Pro be able to auto update?
Profesize
How about a chat room that works with something that is actually supported by browsers? I would be happy if it is was responsive but will be happy it was wasn't.

You may have heard of those new fan-dangle things called mobile phones. Apparently they are all the rage. Now if only chat rooms could be used on those? Hell, what am I saying?

I would be happy if Boonex got responsive and actually responded just the once to this issue instead sticking their head in the sand.
Audanbal
Most excellent!
Will this "Clear" template be an addition in 7.2 or makeover?
Spring 2015 as in northern hemisphere March or southern hemisphere September?
Is 3-5 months an accurate estimate for when the updated mobile apps will be released?

I've just started working on ours and am about to spend some real $$$ on a number of functional customizations that appear to already be in your pipeline (or maybe even done already). To know that the updated apps should be ready around X and will include Y features would be very helpful.

Thanks for understanding and, in advance, for a real answer.
Expertzkris
wooww! thats good Mr. Boon..if earlier the better..
deaftv
Template Settings add menu vertical + horizontal ??

I like vertical Menu
deaftv
Dolphin 8
Chat, Video Record, Messenger, all without Flash ?

i like not Flash
Andrew Boon
With many video/streaming-related features it is still really challenging to avoid flash. Possible, but not straignforward. We're looking at different ways of doing it and will deliver as soon as as we can.
Profesize
Will the chat room feature ever be made to work again with current browsers and if so, will it work with mobile devices all while being responsive?
Andrew Boon
As I replied above, the no-Flash scenario in Dolphin PRO may take a little while to implement. We're working on it though.
A) I would love to see a re-naming of all the blocks in Page Builder - today same block "function" might have different name depending on the page you are editing in Page Builder, and same name sometimes have different functionallity. The naming is very inconsistent...

B) I would also love if you could make all the built-in/standard/core + any custom blocks available to all pages in Page Builder. This is what I miss the most - I would like to build at custom page and be able to include see more "core" blocks - without having to be a programmer... I've been having a look at DolphinU, and in "studio->pages->add blocks -> the pop-up" it looks like this will contain both system and custom blocks and make them available to all pages. You've mentioned that new DolphinPRO features have been inspired from DolphinU development - this might be the case for this as well?

C) I've been waiting for and looking forward to a DolphinU Beta - so that I could start to build a community site. After installing and exploring the current Alfa9 I'm not sure anymore - and than I read your blog post of 22nd October and think I'll have to stick to DolphinPRO .... and wait some more months. I'm going to spend some money on custom modules and I don't want to do this on Dolphin 7.1.x if the changes from 7.1.x to PRO (7.2) will be as significant as it seems. Should I start or should I wait? Any advice?

By the way - it looks like you are on the right track regarding developing DolphinPRO for the future...
EagleII
The vertical side menu is nice. But for the many familiar with windows ( and why 8.1 was a pain in the --- so 10 which will be out next month will have it back again ) would find the Dolphin menu button in the left bottom of the screen a more familiar way to use that type of menu system.
Before windows we used batch (*.bat) files. How many remember those as your main menu system?
-------------------------------------------------------------------------------------------------------------------------------------------
I see more like the "Classified Aspect" of Dolphin just the way it is and will configure a user level for advertisers to add and change their adverts. I can tie that into paypal quite easily.

The store has me baffled. I came here to read doc's on store. Cat's were easy, seeing how to combine it with purchase and the payment mod has me baffled. After 67 years on the planet thats not hard to do these days. I love doing stores . ( a couple I donated the work )
The PoW Network http://www.pownetwork.org/store/
Branson Veterans Task Force, Branson, MO. http://bransonveterans.com/store

Yes, I just had a shot of Geritol... (g). Try and stop me now!

Joe
http://www.myneighbors.net Dolphin 7.1+ ( under construction )
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
PET:0.13296008110046