All You Need to Know about the Hattrick Design Update

Today, we released a new version of the Hattrick site, where the main change is that we make the site wider. But in the process, we also worked through the entire site, making sure the site would look good with the new extra space, and also taking advantage of the extra space to add new functionalities or more relevant information, where possible.

Wider Site

We changes the width of the size so that it requires a screen resolution of at least 1280×960, replacing our previous requirement of 1024×768. Since our last large design revision, in 2008, desktop screen sizes have grown a lot and there is in most cases no reason at all to restrict Hattrick to a very small site width. Hattrick is, after all, a game where it often makes sense to bring much information together in one place and having wider pages makes that easier. For most desktop users, you will just notice that your browser window needs to be a bit bigger to fit all the information, but it will still not take up your entire screen.

You will notice that team names will be truncated less often. But the real benefit will come as we continue developing the site. We have already started taking advantage of this with the first updated pages we release, but expect more of this to follow.

But what about smaller screens, lots more people use smartphones today and maybe they prefer a more narrow Hattrick? Sure, this happens but also here the trends move in favour of a change. The preferred way, by far, for mobile users to access Hattrick is through our apps, and these are much more capable today than just a few years ago. But even if you prefer to use the web from your phone, and not an app, this is still perfectly possible with the wider site design.

Typography

We also took the opportunity to change the font and font size on the site. While the font of the main menu (Tahoma) stays the same as before, on the rest of the site we had been using different fonts on old design pages (Verdana) and new design pages (Fira Sans). We also used lower case headers on the old pages and upper case headers on the new. This was very inconsistent. We have new chosen a new font called Roboto to replace both Verdana and Fira Sans. It is very similar to Fira Sans, but works better as an allround font.

Roboto will be used as the font for submenus and body, with the font size for the body slightly increased, while we keep the lower case submenu and sidebar box headers from the older design and implement them also on the newer pages. We are also standardizing the colour of the box headers from two shades of green to just one, and bringing the small left side icon at the start of all headers from the new design pages to the rest of the site as well.

Another small change is that we now have a universal styling for checkboxes and radio buttons, rather than following browser defaults, which we think will help make the site look more consistent.

The Matches page

The new Matches page will be one of the first changes you notice. Instead of just showing previous and upcoming matches as a list, we are now highlighting the most recently played match and the next upcoming match with a card, summarizing the key aspects of each.

We are also changing the flow of the rest of the page so it matches how the match list is displayed in the app. Instead of strict chronological order, the Past matches list will show most recently played matches first, while the Upcoming matches list will show nearest upcoming matches first. We think this sorting is better, but an option to keep the strict chronological sorting is available on your Preferences page, as well.

Your team name will now be highlighted in the Matches list. A new feature here is also that we show slots where it is possible to book a friendly directly in the Match list, with a link to the Challenges page to set one up quickly.

The Players page

The sidebar box on the Players list, where the whole team is listed as an overview, now includes information such as specialities, homegrown, cards and injuries.

We have also added the possibility to sort players based on injury, card and transfer status.

The Series page

Lots of thing happening here. We have added new sidebar boxes, so you can easily check what is the status of the teams in one series when it comes to cards, injuries and their current cup run. We are also adding more information to the Divisional Battle sidebar box, when that is running.

Given that we now have more space, we re-added the played matches column in the league tables. We now show gem icons of different colours to differentiate the various Challenger cups from each other. And when you hover any team on the Series page, you will now see what region they are from. Like on thge Matches page, your own team will be highlighted here as well.

The series history, historical standings and old series tables pages have been merged into one single page where you can navigate the different historical data using tabs instead. Another change here is that old historic tables now show the full series table.

The Transfer search page

We think the new, updated Transfer Search is a lot more user-friendly! We have added sliders for skills, so you can set up your search quicker in this if you prefer (while the drop-downs are still around if you prefer them).

With the new search icons for specialities it becomes easier to find exactly the player you want. Just use the icons to select the combination of specialities that you want to search for, including “no” speciality or “any” speciality, and search away.

The transfer pages know how much cash your club has available to buy players for. You don’t need to let this restrict your transfer searches, but we make it easy to copy the available cash of your team to the max value filter for a new search. If you do, players above that cash limit will be hidden in the search results.

Another nice new feature is that your previous transfer searches are automatically saved and then pre-loaded when you return to the page, even between sessions. For non-Supporters this includes the last transfer search, for Supporters you can pick between the last five searches.

We added a new page called “Current bids by teams similar to mine”, which is linked to the right of the transfer search page. Here you can check what teams with a similar Power Rating to your own are currently up to.

Finally, we moved the options for price and specialities in transfer search from Advanced search to the default search view.

The Transfer Search Results page

Some new stuff here as well. We now show a text when you have found a player you can’t afford, and disabled the Bid button for you in these cases. We show the number of bids and views on all players, and we show the online icon directly on this page for any bidders, so you don’t need to click through to the user details to figure out whether any sneaky competitors may be planning to increase their max bids when you are not looking.

Supporters gets a goodie here, too: We have integrated Transfer Compare into the search results, so you can immediately check how much similar players have been sold for in the past.

Transfer History page

On this page, we will now also show any ongoing transfers. We have also added a filter so that you can choose to view only bought or only sold players in the list.

Fans page

In the fan update overview box, to the right of the page, we now show the week number for each update and, more importantly, the total value of fans after each weekly update.

We changed the look of the upcoming and match lists so they were formatted in the same way, with match expectations in the same place, making comparisons easier. The “mood after” for played matches is now available as a mouse over instead.

We also changed the look of the fans chart so it looks more consistent with the design of the finance charts.

Match Details page

Here it is now specified for friendly matches if they are played with normal or cup rules.

Club Overview

We now show both home and away kits at all times.

Forum

A new “Mark as unread” option was added to the post footer.

Top Players page

Here we added “Minutes played” as well, and just updated the look and feel of the page a bit.

Ladders & Tournaments

We added more information in the Ladder details box to the right. Instead of just showing your current position, you now also see a trend arrow, as well as your total wins and losses.

For Supporters, we have added the ability to bookmark Tournament matches.

Your Supporters page

On the Your Supporters page, which is linked from your Team details page, we now show the box listing the teams that has the Most Supporters in Hattrick as a sidebar to the right, rather than in the main window. The life goal to appear in that box remains the same!

That’s all for now. Enjoy the last days of your season, and good luck in the seasons ahead!

HT-Johan

.