New-website-optimization

Revision as of 13:43, 28 September 2015

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

• Firefox works but it should say "BioDIP", not "Startseite"
• Internet Explorer works but no favicon (see image)

No favicon in IE 11.0.9600.18015

• Chrome works
• Safari: not the complete page is displayed, the triangles in the top and in the bottom are lost

Device compatibility

iPad (both landscape and portrait format)

• zooming in is not possible - please make this possible --> works now not properly, the search field is too big and i can't read the contet easily
• the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed)
  • Please always use the rounded edges for the search field on all platforms and pages. works now (round corners)
  • artifacts in search field, left of magnifying glass works now

iPad (portrait format only)

• pictures next to EVENTS, NEWS and CONCEPT boxes only stretch over half the box height works now

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
• there are two "more info" buttons for EVENTS and NEWS
• 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)

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 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)

• Remove the grey bar on the page top

Main navigation

• BioDIP instead of Biodip
• Remove the item "Archive"
• Increase the font size slightely
• Use latest version of the BioDIP logo (see owncloud)
• German version not available yet, when clicking onto the "English" icon, redirect error

Search

• at the top of the search field, when the page is charged the letters in the sentence "Biopolis Dresden Imaging Platform" are separated "Bio polis D resden I maging P latform"

SW: it does not do that for me in any browser (tried Firefox, Safari, Chrome on Mac OS 10.7.5) ... Valeria, which browser/OS where you using?

VC: i'm using Chrome and iOS 10.7.5, maybe is a problem in my computer, i will check in others.

ST: In my firefox and internet explorer its fine

Sub-menu

• triangle should be in the horizontal position
• it is ok that the sub-sub menues open automatically when hovering over a higher up item

Slide show

• Can movies be played in a slide show?

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

• please use the real images
• let us know in case the required format is somehow special
• the little white/grey points indicating the number of images and the actual image with white point are not needed in the slideshow at the frontpage or on subpages, only suitable for slide shows/gallerys within pages
• display tooltip containing author and title of the image when hovering over it
• 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

• Use the real images
  • Latest versions sent to Hr. Kossack by email on 15.09.2015
  • Images can be found hier: ownCloud\Shared\BioDIP website relaunch team\images and movies\Photo selection front page\About-News-Event

• 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

• Link the "more info" buttons to the correct subpages (eg. the "more info" of ABOUT should link to BioDIP, not to Education)
• Stay with English for this version: change "weiterlesen" into "more info"
• Change headline ABOUT to BioDIP
• The headlines BioDIP (former: ABOUT), MISSION, EVENTS …. should link to the same page as the more info button

"Belt" & three round icons in between the boxes

• Please highlight (invert the colours) buttons when hovering over it to look like the highlighted buttons in the timeline
• Please highlight the round buttons on the right side displayed on the subpages as well when hovering over it

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?
• Put a question mark behind "NEED HELP"

Scrolling behaviour

According to the meeting minutes of June 15

• Main navigation always visible.
• Search field and main page area scrolls over the image
• When search field reached main navigation area, it remains and is getting a bit more slim (keep headline "Biopolis Dresden Imaging Platform".
• Main page area scrolls as block with footer
• 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

Sub pages

• There will be a separate slide show for each subpage and the main page.
• If there is only one image in the slide show, this will be the static image.
• If no image is specified, the first image of the main page slide show is used to avoid empty space.
• The time interval should be customizable by us.
• Please write contact form in English

Timeline

• Is this the highlighted version for all events at the moment?

• Highlight event when hovering over it and keep highlight when event is clicked

• Date should be given like this: 08 SEP 2015

• Date in bold
• Small font for the day, larger for the month, even larger for the year

• Show only headline-sentences to start with, rest upon click
• Highlight date-circle only when respective item is clicked
• Box with image: are there other text alignments possible around the image?
• Timeline top will end: with dots
• Timeline will end with 3 dots when user may scroll in this direction
• Bottom will end with a circle / the very first event
• Thinking item will only be displayed while update time when scrolling – should be very fast
• Oldest entry will be on the page bottom

General Questions

• How are movies implemented? Would it be possible for them to start playing automatically when the respective page/accordion is opened? Or could it start playing when the mouse is hovered over it?

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