Team:Wageningen UR/About
About
The wiki is one of the most important deliverables for any team, providing a platform for everything a team has achieved. Over the last half-year, we put a lot of time and hard work into this wiki and along the way we went from complete novices to passionate web designers. We have learned a lot about web design and user experience and this page attempts to capture some of that knowledge and make it available for the following generations of iGEM teams.
Responsive Webdesign
In this day and age, more web traffic goes by phone than all the other platforms combined. Therefore, it is important to design your wiki for both mobile and desktop. Now it is true that extensive reading sessions are not commonly performed on a phone, but we believe a strong mobile experience is important for users who want to explore questions that pop up into their heads easily.
A good mobile experience is not an after-thought when designing a page, it is important to think about both the desktop and mobile layout at once. For this wiki, we have made extensive use of a grid system, commonly found in most css frameworks. This allows for easy rescaling and repositioning when switching devices. All modern browsers have a developer option that can display your page in a mobile format, allowing you to easily develop for all screen sizes.
Design philosophy
A website allows us to do far more than a regular word processor, they allow us to make more complex layouts that can help to streamline the user experience. Visual hierarchy is important in communicating the structure of your wiki to the user. But this is a hard thing to get right, especially when still learning (web)design. We therefore found it helpful to adopt a strong design philosophy. For this wiki, we have decided early on to follow the material design philosophy. Material design tries to get rid of most of the fuzz by limiting the use of bright colors, depth, and animations and uses them only to communicate function. It’s minimalistic approach and low visual complexity allow novices to quickly pick up the style and we can recommend it for these very reasons.
Resources for other teams
This wiki was designed as a platform that can be adapted by later teams for their own use. To this end, we have written a guide that teaches you the basics of working with our wiki. It is written for people who have no knowledge of HTML and want to learn the basics. We have also written general guidelines for writing content for this wiki, as to ensure a consistent style throughout the wiki. We recommend other teams to draw inspiration from this document and formulate their project-specific guidelines. Below you will find more on the technical details of this wiki.
Notes to the more seasoned reader
Each page has two fixed elements: the top, containing all the style sheets and the navigation menu and the bottom, which contains the footer, navigation menu and the scripts. This wiki is built on top of the materialize css framework. This framework comes with basic web components designed according to material design principles. Our main style sheet is compiled from sass, which allows for easier writing of css code. The main css file is minified making it hard to read for a human, but the annotated sass source code is available here. This sass file contains variables that allow you to easily modify the main colors of the webpage, making it easy to implement your own style. All the pages on this wiki provide a useful resource for coding examples.