New-website-optimization

Revision as of 15:39, 16 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 no favicon visible? (SW: in my firefox (on Mac) the favicon is visible)

ST:in my firefox favicon is visible, but behind the favicon Startseite should be in english), with Internet Explorer favicon is visible

• 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
  • the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed); I think the rounded corners look nicer...shall we stick with them for all versions? What do you think?
  • artifacts in search field, left of magnifying glass
• only portrait format
  • pictures next to EVENTS, NEWS and CONCEPT boxes only stretch over half the box height

iPhone

• both landscape and portrait format
  • zooming in is not possible
  • the left corners of the search field are rounded (the right corners as well as the corners in other device versions are pointed); I think the rounded corners look nicer...shall we stick with them for all versions? What do you think?
  • artifacts in search field, left of magnifying glass

Android 4.3 phone

ST: favicon is visible; everything behind the Search is white, no triangles, no image; our partners are missing completely; No triangles in the navigation

• Triangles at top (around search field) and bottom (around partner logos) are lost
• on subpages weird php warning above contact form

ST: zooming in is not possible; subpage: I miss the navigation on the left side

• 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?

ST: Right, I misss them, too

Main page (from top to bottom)

• Grey bar on page top
  • Make it more slim
  • Is the greenish line on the very bottom of the bar intended to be there?

Main navigation

• BioDIP instead of Biodip
• Remove the item Archive
• Increase the font size slidely
• Use latest version of the BioDIP logo (see owncloud)
• German version not available yet

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?

ST: In my firefox and internet explorer its fine

Sub-menu

• triangle should rotate into horizontal position when a sub-menu item has been clicked

Slide show

• please use the real images
• let us know in case the required format is somehow special

ST: 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 (in my mind)

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 - Isabel, please provide the names of the files and the location

IR: all infos sent to Hr. Kossack by email yesterday (15.09.2015); images can be found under ownCloud\Shared\BioDIP website relaunch team\images and movies\Photo selection front page\About-News-Event

• • About:
  • Mission:
  • Events:
  • News:
• 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"

ST: do we want to skip the ABOUT because its already in the image?

IR: I wouldn't leave it blank - perhaps we find sth. else like "Who we are?"

ST: The headlines About, Mission, Events, …. should link also to the same page like the more info button

"Belt" & three round icons in between the boxes

• Shall we highlight buttons when hovering over it? - What do you think?

SW: yes, that would be helpful

IR: yes, could be nice

ST: yes, nice idea

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
  • Shall we make it more slim by removing the headline "Biopolis Dresden Imaging Platform"? On the otehr hand it is good if you always see on what page you are... - What do you think?

SW: Yes, good idea

IR: I'd leave the headline but make it slimmer in general.

• Main page area scrolls as block with footer

Sub pages

• add top-slideshow images to all subpages?!
  • Do we want to have one and the same slide show on each subpage?
  • Suggestion: customize the slide show to the page topic, e.g. images of microscopes for the light microscope subpage? - What do you think?

SW: I think that, yes, it would be nice to have the slideshows customized. However, I wonder if that isn't too much effort...do we have enough (different) pics for all subpages?

IR: Yes,I'm for customizing the images/slide show. If there aren't enough pics we just display one static pic that fits the current page content.

ST: Yes, lets do it customized for the five main subnavigation pages. I’d not create separate slidshows for every single subpage. And maybe with a longer time interval for every picture?

• please write contact form in english

Timeline

• show only headline-sentences to start with, rest upon click, as well as highlight date-circle only when respective item is clicked
• box with image: are there other text alignments around the image possible?

ST: We start from NOW to PAST, right? Didn’t we decided for little green points after the newest entry, like … (should be before the first button )?

General Questions

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