Talk:New-website-optimization

From BioDIP
(Difference between revisions)
Jump to: navigation, search
(LM Datenbank)
(LM Datenbank)
Line 4: Line 4:
 
*für alle Parameter sollte immer schon ein "none" als default Parameter existieren (sobald man sonst eine Eigenschaft einpflegt, z.Bsp: Photomanipulation "microdissections" wird diese automatisch bei allen stands ausgewählt. Wenn wir nun im Nachhinein "None" als Parameter für die einzelnen Categorien einfügen, erscheint dieses none am unteren Ende der jeweiligen Liste
 
*für alle Parameter sollte immer schon ein "none" als default Parameter existieren (sobald man sonst eine Eigenschaft einpflegt, z.Bsp: Photomanipulation "microdissections" wird diese automatisch bei allen stands ausgewählt. Wenn wir nun im Nachhinein "None" als Parameter für die einzelnen Categorien einfügen, erscheint dieses none am unteren Ende der jeweiligen Liste
 
*der jeweilige Parameter Name (z.Bsp.: Incubator Name) soll nur für uns zur Auswahl im backend erscheinen. Im front end sind dann nur die Eigenschaften interessant
 
*der jeweilige Parameter Name (z.Bsp.: Incubator Name) soll nur für uns zur Auswahl im backend erscheinen. Im front end sind dann nur die Eigenschaften interessant
 
  
 
*Microscope stand
 
*Microscope stand
 
**fluorescence light
 
**fluorescence light
 
***Light Source type bitte in die global Kategorie schieben, da dies sowohl vom Transmitted als auch von Fluorescence light source genutzt wird
 
***Light Source type bitte in die global Kategorie schieben, da dies sowohl vom Transmitted als auch von Fluorescence light source genutzt wird
 +
 +
**Structured illumination - <span style="color:red">so ok?</span>
  
 
**Incubation
 
**Incubation

Revision as of 11:38, 18 April 2016

Contents

LM Datenbank

general:

  • für alle Parameter sollte immer schon ein "none" als default Parameter existieren (sobald man sonst eine Eigenschaft einpflegt, z.Bsp: Photomanipulation "microdissections" wird diese automatisch bei allen stands ausgewählt. Wenn wir nun im Nachhinein "None" als Parameter für die einzelnen Categorien einfügen, erscheint dieses none am unteren Ende der jeweiligen Liste
  • der jeweilige Parameter Name (z.Bsp.: Incubator Name) soll nur für uns zur Auswahl im backend erscheinen. Im front end sind dann nur die Eigenschaften interessant
  • Microscope stand
    • fluorescence light
      • Light Source type bitte in die global Kategorie schieben, da dies sowohl vom Transmitted als auch von Fluorescence light source genutzt wird
    • Structured illumination - so ok?
    • Incubation
      • statt "Type" bitte "Incubator Name" einführen
      • Incubator Type sollte ein drop down menu mit den Auswahlmöglichkeiten "cage incubator" und "stage top incubator" sein
      • Incubation Property sollte eine Mehrfachauswahl erlauben
    • PhotoManipulation
      • Manipulation Light source should be a drop down menu ???
      • sorted by type or name?
    • globals
      • transmitted light source
        • bitte aus global entfernen und als eigenen Punkt unter Microscope stand etablieren (wie Fluorescence Light source)
        • zusätzlich zu "Power" noch einen Punkt "colour temperature" mit einfügen





resolved problems

Browser combatibility
  • Firefox works but it should say "BioDIP", not "Startseite" works now
  • Safari: not the complete page is displayed, the triangles in the top and in the bottom are lost works now
  • Chrome works


iPad (both landscape and portrait format)
  • 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


  • Remove the grey bar on the page top works now


Main navigation
  • BioDIP instead of Biodip works now
  • Remove the item "Archive" works now
  • Increase the font size slightely works now
  • Use latest version of the BioDIP logo (see owncloud) works now


  • Put a question mark behind "NEED HELP" works now


Main page boxes
  • Stay with English for this version: change "weiterlesen" into "more info"
  • Change headline ABOUT to BioDIP works now
  • 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
  • Link the "more info" buttons to the correct subpages (eg. the "more info" of ABOUT should link to BioDIP, not to Education)
  • 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
works well for the publication and FAQs icons, but NOT for the Equipment icon


Scrolling behaviour
  • Main navigation always visible.
  • 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


  • display tooltip containing author and title of the image when hovering over it


  • Please write contact form in English


Sub-menu
  • triangle should be in the horizontal position is the case now, but please make sure that the bottom of the triangle is in line with the bottom of the writing (currently the triangel ends further down)
  • it is ok that the sub-sub menues open automatically when hovering over a higher up item
  • when the page is scrolled down, half the sub-menues that open from the top are hidden


Slide show
  • 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

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
Mindmap categories
New draft 30.09.2015


  • 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



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.


Timeline
  • Date in bold
  • Show only headline-sentences to start with, rest upon click
  • 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
  • When zooming in a line is set on top of the last entry... please remove. the last entry should be the top of the timeline

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?



Discussion amongst website relaunch BioDIP team

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


Grey bar on page top'

  • BSD and VC: this bar looks like an error message, like the screen shot, maybe we can try with another color.
No favicon in IE 11.0.9600.18015
  • Make it a bit more slim
  • Is the greenish line on the very bottom of the bar intended to be there?


Search field appearance

  • 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?
VC: agree, rounded corners look better

"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
VC: yes, good idea


  • 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.
VC: looks better slimmer but always with the headline

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?
VC: I think the customized slidesshows is a good idea, especially if there is a new system in campus is a good way to show it

Timeline

  • Date should be given like this: 08 September 2015 not 08. SEP 2015
SW: really? wouldn't the circle get much too big when the month is spelt out(or the font too small)? I think three letter - appriviations for the month is fine..
IR: Mmmh, that's a good point, "September" will never fit into the circle unless font size is reduced - then we better stick with the 3 letters, I'd prefer "Sep" to "SEP", though ...


ST: We start from NOW to PAST, right? Didn’t we decide for little green points after the newest entry, like … (should be before the first button )?
SW: hm, I thought we wanted the 3 dots (vertically) at the bottom if not the entire timeline is visible at once, so that people know to scroll further down for more (and then up again as well, of course)
VC: i also understood the same, the 3 dots will be at the bottom if the timeline is not visible at once and if you are at the bottom and you want to see the recent events and the page is "loading" the 3 vertical dots will be above.

Content March 9th, 2016

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!!!
  • 20151119 - Firefox on PC and Mac shows favicon

Device compatibility - to be checked again and updated

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)


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?

Slider

  • How to play movies in the slider?
    • Movies are not possible in the slider.
    • Movies are possible in a gallery, autostart is not possible since the movies will come from youtube and youtube does not offer "autoplay".
  • The time interval should be customizable by us
    • Speed of slider image change can be tuned by neonblue (within the Javascript but not within typo3)
    • Currently 5 sec - we just need to tell them another time period
  • The first image of a slide show should be selected randomly. Generally the sequence within a slide show is defined by us (done).
    • Mr. Kossack will ask if the first slider image can be chosen randomly.

Main page

  • German version not available yet: please inactivate icon and show us how to reactivate it once we get around to filling it. - Currently icons GERMAN / ENGLISH are gone - we need to tell neonblue when we want to have it back.
However, while we are creating the german page, can we control how it would look on the front end, even if its not activated??


Triangle background
  • Do not use the exact same pattern for the top (search field) and bottom banner (logo area)
Boxes
  • Headlines in a box may be links - we just need to put it in.
  • works now, but artifact artifact after clicking after clicking appears; this is also true for external links; in firefox both with Mac and PC, works fine on ipad; also artifact when clicking symbol on side line artifact after clicking on side line icon
  • Links in boxes:
    • Internal links will be formatted as the "more info" button.
    • External links will be possible within the text followed by the link symbol and getting half transparent when hovering over it.
  • The image of each box will become clickable (with link)
  • "more info" link will get less distance from the bottom of a box
Footer
  • User voice icon is not linked correctly - directly link to a user feedback form
  • The "need help" should link to the contact form
  • Where to change the text below "Need help?" - We need to tell neonblue what should be there.
  • How to align the icons in the footer?!; What size do they need to have?
    • Positioning of the logos will be optimized - neonblue will come back to us when it is ready.
  • template impressum? - We need to come up with a suggestion for an impressum.

Scrolling behaviour

According to the meeting minutes of June 15

  • Search field and main page area scrolls over the image
  • Image does not move - looks like it is in the background

20151119 phone call Hella - Mr. Kossack

  • scrolling behavior has been discussed agin, will be adapted by neonblue

Timeline

  • Highlight event when hovering over it (!!!) and keep highlight when event is clicked (box and time button)
  • whole box should be clickable, not just the headline
  • How do we get pics into the timeline events? As soon as we change the element to "Tex&Image" it stays folded open
    • Boxes should use the space available even when not opened.
    • Text should flow around images embedded into the boxes.

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?


Gallery

  • Currently we have chosen to have 3 images per row.
  • Image metadata:
    • Title - will be displayed as tooltip
    • Description - Has to contain all info that should be image description below the image.
    • To enable jumping to a special position in the gallery when an image has been clicked, we need to have each row in the gallery as extra element.
    • It is possible to jump to content elements but to to a specific position within a very long single content element.
    • Shall we sort the images in the gallery somehow (fluorescent images, BF images, EM images, ...) or e.g. by author?


When gallery images are clicked, they should open like images in a slide show: on top of the page. Currently, a new page with grey background is opened and one can't toggle through the images

Inhalts-Slider

  • Pictures here ignore the Image Metadata from the file list. Title should be tooltip, description should appear in the bottom green field when image is clicked/enlarged
  • How to insert Movies here?

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
  • Footer Logo box: 253 x 112px

Organigram

New draft 19.10.2015

Suggested changes of the organigram


  • DRESDEN-concept: change position of the words
  • the DRESDEN-concept circle should be more pronounced/highlighted because this is the BioDIP roof organisation

























Special requests

  • Please, design a male and female spaceholder for the coordinator boxes! :-)
  • Please have the back-end fully in English!

Questions

  • How do we set up News?
  • How do we set up Events?
  • How do we set up the Contact Formular?
  • When and how will the SEARCH function work?
  • How can we include pictures in timeline events (without destroying the folding function, see above)?
  • Should we have a separate field in the meta data for picture authors?


Count down to website launch

Essentials:

  • contact and help forms need to be implemented and properly linked
  • feedback form (user voice) needs to be implemented and properly linked
  • search function must work
  • organigram needs to be finished and included into BioDIP page
  • link design, implementation, functionality has to be finalized; links should always open in a new tab (except from home page)
  • partner logos have to be implemented in a professional way (proper link and spacing ...)
  • equipment has to be either implemented or properly linked to respective Wiki page


Nice to have:

  • everything in the wiki (see above!)


Current expected launch date: December 15th 2015

Personal tools