Site for German diagnostic radiology center

[ceberlin]

http://www.radiologische-allianz.de

Step1. Homepage uses a classic design. Purpose was to make complex information look easy for patients.

If you use the homepage with a mobile, you get a special view with only the things you need when you are on the road.

(The most time-consuming action was organizing all this data and find an easy to maintain ways to link this all together.)

We have 11 centers. This homepage is a portal page for all of them and includes individual homepages of each center at the same time:

If you access things for only one center through their homepage, you get a filtered view with only items offered there.

There is also an individually built center-finder which uses Google maps to find the right center for your therapy, using Processwire technology.

 

Processwire was chosen mainly

• because of the enormous flexibility to build links between all different sorts of information (without it being rocket science), especially
• because we were able to handle even non-hierachical data (e.g. a child is allowed to have 2 parents - doctors think that's normal  ), and 
• because we could offer the client a very clean and easy to use backend, hiding all the complexity of the homepage away from him: They started using it with only 2 hours of training.

Not sure you could do this with Wordpress...

(This is the first homepage we did with UIkit, which was a recommendation from this forum.)

(Step2 will add some speed optimizations...)

[LostKobrakai]

It's looking really nice and clean. Even if it's stuffed with navigational elements all the time. 

I have some small things which I noticed. The calendar icon in the header is not clickable, while being the most poping thing of the navigation. Also I don't know if the phrase "zu den Privatpraxen" will be noticed as standalone link easily, es every other link in the header is a button. It could also be an additional label vor the "Ärzte" button.

The other thing is more to please my typographical background. You're using the wrong dashes for the timetables. The normal dash " - " is a "Divis", only to be used for hyphenation or appending units to numbers and such things. The little larger one " – " is the "–" html-entity or also "Gedankenstrich" in german. It's one usage is kinda like a comma to divide different thoughts in a subordinal cause, but a little bit more visible. The other big usage is in things like timetables. Every time you're calling stuff "von … bis …" the "bis" should be replaced with the ndash. This fits not only for times, but also for example for routes: Berlin to Paris. 

There's also the really long one " — " (—), which is called "Geviertstrich" but it has no distinct usage in modern typography.

Shortcuts for Mac:

Alt + - => –

Shift + Alt + - => —

Shortcuts for Win:

Hold Alt and hit 0150 on the number block => –

Hold Alt and hit 0151 on the number block => —

[diogo]

Shortcuts for Mac:

Alt + - => –

Shift + Alt + - => —

Shortcuts for Win:

Hold Alt and hit 0150 on the number block => –

Hold Alt and hit 0151 on the number block => —

And if you can't remember the shortcuts, just google "ndash" or "mdash" and copy the dash from the results. Always worked for me

[ceberlin]

Hi, great points you made about typography. 

In this case this is content and up to the clients. Maybe one day we could replace the textarea fields with the new PW pro table fields and render the output ourselves with any fancy typography we want. (If you want to take it further, the n-dash is also surrounded by tiny 1/4 spaces left and right, if I recap that correctly). Phone number formatting is another interesting scenario. Maybe modules like the SuperSmartyPants Typographer become smart enough one day to assist in cases like this. - I wished we had more clients caring for typography that much that they would hire an editorial office ("Lektorat") to have content, spelling and typography checked.

Also the point with the navigational overkill is valid. - If you have a client with 11 competing centers and 50 decision makers, who even discuss the shape of a button sometimes, you get there quickly, believe me. Client is king. On the other hand, those special requests were one of the reasons, why the project was very interesting and exciting for us.

To get back to the essence: This presentation here was not about design and not about content but what Processwire can help solving.

I wanted to showcase what you can do with Processwire, if you have tons of navigational elements as a fact, that behave context-related completely differently, depending from where they were called. And this only with the power of Processwire selectors. We could not do that with Drupal or Wordpress easily.

EDIT: Actually I liked your comment and fixed that n-dashes quickly myself. I admit, that looks better now.

Edited October 5, 2014 by ceberlin

[ceberlin]

Good idea to change the menu calendar-button behavior (for appointments). Thank you for the feedback.

[totoff]

I vote this site of the week +1!

Only one remark, that has got nothing to do with your work of course: Did your client check the website legally? I wonder if the voting system featured for example here http://www.radiologische-allianz.de/praxen/radiologie-am-rathausmarkt-privatpraxis/ is an offend against German law, namely the Heilmittelwerbegesetz. I would recommend having it checked twice to make sure it complies with the law.

[ceberlin]

Thank you for your comment totoff...

Well, I believe this client has checked that part of the website with the laws thoroughly. The recommendation system is embedded in cooperation with a specialized service for German clinics and doctors. (We only restyled that content so it fit better to the rest of the website.)

I found this story on the web (about the revised version of that law from 2012):

http://projectworkers.de/marketingblog/116-mehr-vorteile-fuer-aerzte-und-heilberufe-durch-das-neue-heilmittelwerbegesetz

They say: Publication of recommendations by patients is ok - as long as the text does not contain drug-/treatment-misuse or repulsive or misleading content. (Hope I got the translation right  )

In case the law is applicable at all (because they offer only diagnosis and treatments prescribed by doctors), there is no problem as long as the

content of a recommendation is within certain limits (which means, of course, every single entry needs to be checked individually).

General speaking: None of the content of the website should seduce a patient to a wrong medical self-diagnosis and self-treatment.

Edited October 8, 2014 by ceberlin

[ceberlin]

Version 2 is online now, after client agreed to the extra features.

• Now is fully responsive
• Some fancy effects built in
• Adobe Edge player interacting withPW
• a separate, reduced English version (because the English clients have different demands)
• a iphone alternate mobile version (German only) which only present the essential information
• using the fancy new pro forms and the new pro cache.