PG Dating Pro is an acclaimed dating script for starting or running an independent dating website. We offer a wide range of services Description Responsive design has been around for quite some time now. We started working on it thoroughly in early after we gained a number of requests from our customers and partners, and after it became clear that the search engines favourite websites that work on all devices. First of all, we decided to focus on the most important parts of a dating website that required our attention.
This is the list that we came up with: Search form and search results page. When you no longer need it, you can hide the menu panel. The left menu also shows whether a person has any active and running paid services on the site. It holds a customary position on the right-hand side of the site interface. All these menu items are repeated in the left menu so there is never any trouble accessing different site sections.
On smaller viewports, the right-hand menu disappears to be replaced with the search button. Settings, account and the logout option are accessible through the left-hand menu. When one visits a dating website on a mobile device, scrolling may be tiresome. We have introduced the contextual menu on top of the pages that collects headers from all the blocks on any given page and lets you scroll through to the selected block in a fast and easy way.
The menu is a slider that you can drag and tap on with a mouse or a finger. When you start scrolling down, the header hides to give room to the content. We tested the sketches in a focus group comprised of our clients. This is why we wanted to pay close attention to the design of the search results page.
We decided to go mobile first and begin with the phone screens. Before we could start positioning elements on the screen, we needed to compile a list of all the elements that will be used on the page. This is the list we came up with: For the gallery view: For the list view: Below is one of the first outlines.
On the very top comes the area with the search parameters, the filter: The shortcomings become visible immediately: What we can do here is move the parameters below the headline, but the first problem still persists. We can assume that a person would not be changing the search parameters too often.
Hence we can display them on demand. At the same time parameters should be easy to notice and access. We put all parameters into the popup block that appears upon click on the hamburger menu icon across from the headline: After a heated discussion, we came up with the idea that the purpose of this menu might not be immediately clear to the site users. Turning it into a button with an explanatory text might make sense. Yes, it would take more space but it would be a bulletproof alternative in terms of visibility.
List view is for people who like to see a lot of information at once and who do not care about the big photos. Then it was time to increase the screen size to fit tablet-size devices. To speed up the process we used placeholders. To the left, there was now space for the search form. To the right, it appeared best to display two photos in a row in the gallery view. Above the list we put some extra information about the search: The list view remains roughly the same as in the mobile version, it only gets wider: Next came the desktop screen.
Here we needed to examine in more detail the content of the panels. We also wanted to allocate space for standard-sized banners: In the list view, we put all information in one row. If a site member had not posted an intro message nor had any rating yet, it would still be ok, and we could save up on space a little: This is an alternative list view. It might look good on mobile devices thanks to individual backgrounds of every user block, but because every block height is so small, there are too many horizontal lines that create visual noise.
That is why we went with the previous layout. And this is what the result looked like. Then it was time for developers to start their part of the work.
The designer should always keep an eye on the process of implementing the design into HTML pages. We discuss any questions and issues with the team members. After that, you were supposed to use the horizontal scrollbar. Next came the rectangular-shaped era of what we internally like to call metro-style. All elements had a fixed position on the page regardless of its width.
When we switched to the new platform back in , we decided to keep that same look because it was clean and neat. The new mobile-friendly theme required the next round of changes. It was Bootstrap based and partly inspired by Twitter. This is the profile view that is still relevant for the Dating Pro software. As with the search page, we are not stopping here and will continue the work to make the profile page more informative and usable.
We received a lot of comments about the new design, mostly praise, and are always ready to listen to constructive criticism as well. Our customers appreciated it, and we even won the Best Product Design at iDate