New-website-optimization

From BioDIP
(Difference between revisions)
Jump to: navigation, search
(Picture dimensions)
Line 1: Line 1:
 
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).
 
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: [http://biodip.neonblue.de/ new BioDIP website]. The following changes are necessary:
+
20160309: The following tasks are to be done in the near future. Let us assign a responsible person and an schedule!
  
 +
* We decided to keep up to date both website versions (live & development system) in parallel.
 +
** Hella will make sure that this is enabled.
  
== Browser compatibility ==
+
* We decided to keep the main page as it is for the time beeing.
  
* Internet Explorer works but no favicon (see image)
+
== Tasks ==
[[File:20150917-IE-no-favicon.jpg|thumb|400px|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!!!
+
=== LM data base ===
 +
* Hella will work on it with neonblue
  
*20151119 - Firefox on PC and Mac shows favicon
+
=== EM data base ===
 +
* Isabel will work on it with neonblue
  
== Device compatibility - to be checked again and updated==
+
=== Test website on mobile devices ===
 +
* responsible person: please volunteer!
 +
** test different browsers in various OS
 +
** test mobiles and tablets
  
 +
=== Get / create images of missing BioDIP staff mambers ===
 +
* Britta
  
::'''iPad (both landscape and portrait format)'''
+
=== Check / add missing documents on facility pages ===
::*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?
+
 
+
== 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 [[file:Mainpahe_headlinelink_artefact.png|thump|400px|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 [[file:Click_artifact_sideline.png|thump|400px|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 ===
+
[[File:20151112-Organigram-HH.png|thumb|400px|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
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
<br>
+
 
+
== 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
+

Revision as of 16:45, 9 March 2016

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

20160309: The following tasks are to be done in the near future. Let us assign a responsible person and an schedule!

  • We decided to keep up to date both website versions (live & development system) in parallel.
    • Hella will make sure that this is enabled.
  • We decided to keep the main page as it is for the time beeing.

Contents

Tasks

LM data base

  • Hella will work on it with neonblue

EM data base

  • Isabel will work on it with neonblue

Test website on mobile devices

  • responsible person: please volunteer!
    • test different browsers in various OS
    • test mobiles and tablets

Get / create images of missing BioDIP staff mambers

  • Britta

Check / add missing documents on facility pages