New-website-optimization

This page is used by the BioDIP website relaunch team. Here we will collect all changes needed to optimize the new BioDIP website (including display and usage on mobile devices).

On September 14th 2015 the very first draft of the new website has been released: new BioDIP website. The following changes are necessary:

Browser compatibility

• Internet Explorer works but no favicon (see image)

No favicon in IE 11.0.9600.18015

• Safari: when scrolling down, the triangle area containing the search field moves out to the left side, the the "new" slimmer version moves back in ...weird!!!

Device compatibility

iPad (both landscape and portrait format)

• zooming in is not possible - please make this possible --> possible now, but does not work properly, the search field is too big and i can't read the content easily
• the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed)

but: new problems! (see screenshots!)

• artifacts at triangle of text box
• more info buttons on homepage lead either to Wiki or again to the homepage
• more info button missing for MISSION
• subpage: in menu left side, triangle of second submenu level goes over writing
• subpage: when Equipment - Light Microscope is clicked, the menu does not dissapear (like it does for the other subpages)</span>

iPhone

currently not testable ... side doesn't load properly at all (see screenshots)

• both landscape and portrait format
  • zooming in is not possible - please make this possible

the search field is becoming too big and i can't read the content easily

• • the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed);
  • artifacts in search field, left of magnifying glass

Android 4.3 phone

currently not testable ... side doesn't load properly at all (see screenshots)

• No triangles in the navigation
• Triangles at top (around search field) and bottom (around partner logos) are lost ... makes top and bottom appear completely white/empty
• on subpages weird php warning above contact form
• zooming in is not possible - please make this possible

• General question: on the subpages of the mobile device pages, where are the right side buttons that lead to Equipment, Publications, FAQ? There is no other way to get to the Publications page, is there?

Main page

(from top to bottom)

• German version not available yet, when clicking onto the "English" icon, redirect error

No, please, when clicking on the german languages icon redirect to a page saying that the german version is not yet available

Slide show

• Can movies be played in a slide show?

• Do they start automatically?
• What formats are possible to be used?

• when the image is clicked, link to a page containing all images with Author, Title and Description
  • this image page is linked from the BioDIP - gallery

Triangle background

• Do not use the exact same pattern for the top (search field) and bottom banner (logo area)

Main page boxes

• two upper boxes have artifacts when the page zoom is changed (I will upload a screenshot for illustration)

Artefacts when zooming into upper boxes at the main page

Footer

• Add real partner logos (use high resolution logos in the owncloud)
• User voice icon is not linked correctly
• Is the position of the user voice icon correct?

Scrolling behaviour

According to the meeting minutes of June 15

• Search field and main page area scrolls over the image
• Submenu on the left side and round buttons on the right side of subpages scroll us with the page content

• Once they reached the top position it remains, do not follow the user by the current "jumping" behaviour works now in principle, but please make sure that you can see the the intire side navigations stay visible... currently after scrolling down you can only see half of it, with the other half disappearing behind the search-triangle field

Sub pages

• The side navigations don't move with the page anymore, but disappear when scrolling down - please change that back to the original version!

slide shows

• If no image is specified, the first image of the main page slide show is used to avoid empty space.
• for the submenues 2 and 3 use the same slide shows as for the respective parent-subpage (ie. BioDIP, Facilities, Equipment, Education, Contact)
• The time interval should be customizable by us.

Timeline

• Highlight event when hovering over it (!!!) and keep highlight when event is clicked
• Date should be given like this: 08 SEP 2015 (without dot after day and month please in english)
• Small font for the day, larger for the month, even larger for the year
• Please equalize the distances between the date circles as long as no "event" is clicked ... when an event is clicked and the content needs more space, expand distance between circles

Formatting

• Inhaltsboxen: please add formatting option "Bildgröße"
• Slider: please add formatting option "Bildgröße" and "Position"
• Why does a link formated in bold appaer black? - should be light blue a link and bold
• How to do an image which is a link as well?

Picture dimensions

• Inhaltsbox (1 column): 1012px x 186px
• Zweispalten-Template (2 column): 481px x 186px
• Dreispalten-Template (3 column): 320px x 186px
• Partner footer: at least 148px width
• Slider: 1920px x 461px (front page)
• Slider: 1920px x 242px (sub page)
• Koordinatoren: at least sqare 320px

Organigram

• Favourite design is version 1 (circular design) with the following corrections:

• TU Dresden must be on the same level as Helmholtz Society and Max Planck Society BUT within the Dresden-concept circle

(TU Dresden initiated the research alliance DRESDEN-concept and is therefore integrate part of it, while MPG and Helmholtz are not)

• change "MPG" to "Max Planck Society" and "Helmholtz" to "Helmholtz Association"
• correct typo in "MEZ" to "MTZ"
• Write only one type of facility (LMF, EM, IP, TDS) per line within the circles

New draft 30.09.2015

Suggested changes of the organigram

• Prefer variant 2
• CRTD should be on the top
• Facilities should be 1 per line (use LM, EM, IP, TDS)
• North-east facility circle should only touch the MTZ
• TU Dresden layout as Helmholtz and MPG
• MTZ, not MEZ
• DRESDEN-concept, not DRESDEN-CONCEPT
• the DRESDEN-concept circle should be more pronounced/highlighted because this is the BioDIP roof organisation