Mediencampus	
  	
  

Website	
  Anforderungen	
  und	
  Konzeptentwurf	
  

Darmstadt,	
  02.05.2013	
  
Agenda	
  
1.	
  Einführung	
  
	
  
• 
• 
• 
• 
• 

Zielsetzung	
  
Vorgehensmodel	
  
Status	
  Quo	
  
Abgaben	
  
Das	...
Einführung	
  

Darmstadt,	
  02.05.2013	
  
Zielsetzung	
  

•  Eine	
  Campuswebseite	
  schaffen	
  die	
  den	
  
Nutzeranforderungen	
  der	
  kommenden	
  Jahre	
...
Vorgehensmodell	
  

Darmstadt,	
  02.05.2013	
  
Vorgehensmodel	
  
IMD	
  Studiengangswebsite	
  

Mediencampus	
  Website	
  

Anforderungsanalyse	
  

Anforderungsanaly...
Status	
  Quo	
  
IMD	
  Studiengangswebsite	
  

Mediencampus	
  Website	
  

Anforderungsanalyse	
  

Anforderungsanalys...
Abgaben	
  KonzepBon	
  &	
  KreaBon	
  

Anforderungsanalyse	
  

KonzepBon	
  

Realisierung	
  

Launch	
  

Ein	
  Stu...
Das	
  Team	
  

KonzepBon	
  &	
  KreaBon	
  

Entwicklung	
  

Alexander Vonnemann"
Interactive Media Design"
"

Matthia...
Website	
  Anforderungen	
  

Darmstadt,	
  02.05.2013	
  
FunkBonale	
  Anforderungen	
  

•  Alle	
  Inhalte	
  müssen	
  auf	
  mobilen	
  Endgeräten	
  aufruKar	
  sein.	
  
•  ...
AdministraBve	
  Anforderungen	
  

•  Alle	
  Inhalte	
  müssen	
  über	
  ein	
  Content	
  Management	
  System	
  
pfle...
Technische	
  Anforderungen	
  

•  Flexibles	
  Content-­‐Modeling,	
  Airibute	
  und	
  Aiributsets.	
  
•  OpBmierte	
...
Technische	
  Anforderungen	
  

Unterschiedliche	
  Inhalte	
  sollen	
  auf	
  die	
  Mediencampus	
  Seite	
  
einspeis...
Technische	
  Anforderungen	
  –	
  Content	
  Modeling	
  

Content	
  Modeling	
  
Zerlegen	
  wir	
  den	
  Inhalt	
  u...
Anforderungen	
  –	
  Warum	
  Content	
  Modeling?	
  

•  Weil	
  unterschiedliche	
  Inhaltstypen	
  unterschiedliche	
...
Inhalte	
  sehen	
  auf	
  jedem	
  Medium	
  anders	
  aus	
  –	
  AdapBve	
  Content	
  

Desktop	
  
Social	
  
Media	
...
AuKau	
  von	
  Inhaltstypen	
  &	
  Aiributen	
  

Inhaltstypen	
  

Airibute	
  

LimitaBonen	
  

Semester-­‐Projekt	
 ...
Moderne	
  Webstandards	
  
HTML5	
  der	
  neue	
  Webstandard	
  

•  W3C	
  hat	
  den	
  „Last	
  Call“	
  für	
  HTML5	
  bereits	
  2009	
  ausg...
HTML5	
  Browser	
  Support	
  

Der	
  neue	
  Webstandard	
  wird	
  bereits	
  von	
  allen	
  aktuellen	
  
marktühren...
HTML5	
  Fallback	
  für	
  alte	
  Browser:	
  Modernizr	
  	
  

Was	
  ist	
  mit	
  alten	
  Browsern	
  wie	
  dem	
 ...
HTML5	
  und	
  SEO	
  

„Die	
  semanBsche	
  Struktur	
  von	
  Webseiten	
  und	
  
Inhalten	
  kann	
  durch	
  neue	
...
Flash	
  vs	
  HTML5	
  

•  Die	
  Flash	
  Entwicklung	
  für	
  mobile	
  Endgeräte	
  wurde	
  vom	
  
Entwickler	
  A...
Ein	
  Gutes	
  Team:	
  HTML5,	
  CSS3	
  und	
  jQuery	
  

HTML5	
  

CSS3	
  

Neuer	
  Webstandard,	
  der	
  
Grundl...
Fazit	
  moderne	
  Webstandards	
  

Durch	
  den	
  Einsatz	
  moderner	
  Web	
  Standards	
  
machen	
  wir	
  unsere	...
Responsive	
  Webdesign	
  
Eine	
  gleichbleibendes	
  Nutzungserlebnis	
  schaffen,	
  kanalübergreifend	
  

Mit	
  Responsive	
  Webdesign	
  schaff...
Eine	
  gleichbleibendes	
  Nutzungserlebnis	
  schaffen,	
  kanalübergreifend	
  

„Given	
  the	
  rapid	
  adopBon	
  of...
Responsive	
  Webdesign,	
  so	
  geht’s!	
  
Kurz	
  gesagt:	
  Responsive	
  Webdesign	
  nutzt	
  CSS3	
  
„Media	
  Qu...
Die	
  Vorteile	
  von	
  Responsive	
  Webdesign	
  

•  Eine	
  Lösung	
  für	
  alle	
  Endgeräte.	
  
•  Zukun•ssicher...
Hürden	
  von	
  Responsive	
  Webdesign	
  

•  Erhöht	
  den	
  Frontend-­‐Entwicklungs-­‐	
  und	
  Designaufwand	
  be...
Fazit	
  Responsive	
  Webdesign	
  

Responsive	
  Webdesign	
  ist	
  die	
  zukun•ssichere	
  Technologie	
  zur	
  
Da...
Zielgruppenanforderungen	
  (aus	
  der	
  Anforderungsanalyse	
  3Spin)	
  	
  

Studieninteressierte	
  
	
  

InformaBo...
Zielgruppenanforderungen	
  (aus	
  der	
  Anforderungsanalyse	
  3Spin)	
  	
  

Studenten	
  
	
  
- 
- 
- 
- 

An	
  Me...
Zielgruppenanforderungen	
  (aus	
  der	
  Anforderungsanalyse	
  3Spin)	
  	
  

Personen	
  aus	
  dem	
  Bereich	
  Wis...
Inhaltsstruktur	
  Mediencampus	
  

Darmstadt,	
  02.05.2013	
  
Ziele	
  der	
  Mediencampus	
  Webseite	
  

Die	
  Mediencampus	
  Webseite	
  soll	
  als	
  lebendige	
  
InformaEonsp...
Ziele	
  der	
  Mediencampus	
  Webseite	
  

PräsentaBon	
  
der	
  „Marke“	
  
Mediencamp
us	
  
Gemeinsame	
  
Webseite...
HauptnavigaBonsauKau	
  Mediencampus	
  
Übersicht	
  über	
  die	
  vielfälBgen	
  
Möglichkeiten	
  am	
  Mediencampus	
...
HauptnavigaBonsauKau	
  Mediencampus	
  
Campuskarte	
  mit	
  Angaben	
  der	
  einzelnen	
  
StaBonen	
  auf	
  dMagazin...
HauptnavigaBonsauKau	
  Mediencampus	
  
Magazin	
  

Startseite	
  

Studium	
  

Campus	
  

Zeitraum	
  TV	
  

Media	
...
HauptnavigaBonsauKau	
  Mediencampus	
  
Magazin	
  

Kontakt	
  

Anfahrt	
  

Impressum	
  

Startseite	
  

Studium	
  ...
Mock-­‐ups	
  Mediencampus	
  

Darmstadt,	
  02.05.2013	
  
Mock-­‐up	
  Mediencampus	
  –	
  Startseite	
  Desktop	
  

Prominente	
  Bühne	
  

	
  
Aktuelle	
  Veranstaltung	
  au...
Mock-­‐up	
  Mediencampus	
  –	
  Startseite	
  Smartphone	
  

Prominente	
  NavigaEon	
  

	
  
Was	
  für	
  InformaBon...
Mock-­‐up	
  Mediencampus	
  –	
  Startseite	
  Smartphone	
  

NavigaBon	
  immer	
  
prominent	
  

Quellen:	
  
	
  
hi...
GaranBe	
  der	
  Lebendigkeit	
  &	
  Aktualität	
  

Startseite	
  
	
  
•  Aktuellste	
  ArBkel	
  und	
  Veranstaltung...
Nächste SlideShare
Wird geladen in …5
×

Mediencampus Website Grobkonzept

1.065 Aufrufe

Veröffentlicht am

Der Mediencampus der Hochschule Darmstadt soll über eine Website als eigenständige Marke präsentiert und das Leistungsspektrum des Mediencampus soll für die unterschiedlichen Zielgruppen optimal dargestellt werden.

Ziel ist es eine Campuswebseite zu schaffen, die den Nutzeranforderungen der kommenden Jahre gerecht wird und ressourcensparend in der redaktionellen Pflege und technischen Weiterentwicklung ist.

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.065
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
27
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mediencampus Website Grobkonzept

  1. 1. Mediencampus     Website  Anforderungen  und  Konzeptentwurf   Darmstadt,  02.05.2013  
  2. 2. Agenda   1.  Einführung     •  •  •  •  •  Zielsetzung   Vorgehensmodel   Status  Quo   Abgaben   Das  Team       3.  Inhaltsstruktur         •  Ziele   •  HauptnavigaBonsauKau   2.  Website  Anforderungen     •  FunkBonale  Anforderungen   •  AdministraBve  Anforderungen   •  Technische  Anforderungen   •  Moderne  Webstandards   •  Responsive  Design   •  Zielgruppenanforderungen   •  Status  Quo       4.  Mock-­‐ups       •  Startseiten  für  Mobil,  Tablet  &     Desktop    
  3. 3. Einführung   Darmstadt,  02.05.2013  
  4. 4. Zielsetzung   •  Eine  Campuswebseite  schaffen  die  den   Nutzeranforderungen  der  kommenden  Jahre  gerecht  wird   und  ressourcensparend  in  der  redakBonellen  Pflege  und   technischen  Weiterentwicklung  ist.     •  Den  Mediencampus  als  eigenständige  Marke  präsenBeren   und  das  Leistungsspektrum  des  Mediencampus  für  die   unterschiedlichen  Zielgruppen  opBmal  darstellen.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  4  
  5. 5. Vorgehensmodell   Darmstadt,  02.05.2013  
  6. 6. Vorgehensmodel   IMD  Studiengangswebsite   Mediencampus  Website   Anforderungsanalyse   Anforderungsanalyse   KonzepBon   KonzepBon   Realisierung   Realisierung   Launch   Launch   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  6  
  7. 7. Status  Quo   IMD  Studiengangswebsite   Mediencampus  Website   Anforderungsanalyse   Anforderungsanalyse   (Basierend  auf  3Spin  Analyse)   KonzepBon   KonzepBon   Realisierung   Realisierung   Launch   Launch   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  7  
  8. 8. Abgaben  KonzepBon  &  KreaBon   Anforderungsanalyse   KonzepBon   Realisierung   Launch   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   1.  Anforderungsanalyse   1.  Personas   2.  Maßnahmenempfehlung   3.  Benchmark     2.  KonzepEon   1.  Grobkonzept   2.  Feinkonzept   1.  Wireframes     3.  Realisierung   1.  Finales  Design   2.  Styleguide   3.  Übergabe  an  die  Entwicklung   Darmstadt,  02.05.2013                  8  
  9. 9. Das  Team   KonzepBon  &  KreaBon   Entwicklung   Alexander Vonnemann" Interactive Media Design" " Matthias Kadenbach" Interactive Media Design" " alexander.vonnemann@stud.h-da.de" matthias.kadenbach@stud.h-da.de" Marisa Wollner" Interactive Media Design" " Dominik Bleilevens" Interactive Media Design" " marisa.wollner@stud.h-da.de" dominik.bleilevens@stud.h-da.de" Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  9  
  10. 10. Website  Anforderungen   Darmstadt,  02.05.2013  
  11. 11. FunkBonale  Anforderungen   •  Alle  Inhalte  müssen  auf  mobilen  Endgeräten  aufruKar  sein.   •  Alle  Inhalte  müssen  in  deutsch  und  englisch  vorhanden   sein.   •  Die  Website  muss  barrierefrei  gestaltet  werden.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  11  
  12. 12. AdministraBve  Anforderungen   •  Alle  Inhalte  müssen  über  ein  Content  Management  System   pflegbar  sein.   •  Das  CMS  muss  ein  Befgreifendes  Rollen-­‐  und   Rechtemanagement  zur  Verfügung  stellen.   •  Inhalte  müssen  in  unterschiedlichen  Sprachen  pflegbar   sein.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  12  
  13. 13. Technische  Anforderungen   •  Flexibles  Content-­‐Modeling,  Airibute  und  Aiributsets.   •  OpBmierte  Auslieferung  der  Inhalte  an  unterschiedliche   Endgeräte.   •  Strikte  Trennung  von  Inhalt  und  Design.     •  Content-­‐Einspeisung  in  andere  Websites  muss  möglich   sein.   •  IntegraBon  von  Social  Media  Komponenten.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  13  
  14. 14. Technische  Anforderungen   Unterschiedliche  Inhalte  sollen  auf  die  Mediencampus  Seite   einspeisbar  sein.   IMD     Website   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Ausgewählte  Inhalte   Mediencampus   Website   Darmstadt,  02.05.2013                  14  
  15. 15. Technische  Anforderungen  –  Content  Modeling   Content  Modeling   Zerlegen  wir  den  Inhalt  unsere  Projektes  in  dessen   Bestandteile  (Inhaltstypen,  Airibute,  LimitaBonen).     So  schaffen  wir  langanhaltend  ein  opBmales   Nutzungserlebnis,  egal  auf  welchem  Gerät.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  15  
  16. 16. Anforderungen  –  Warum  Content  Modeling?   •  Weil  unterschiedliche  Inhaltstypen  unterschiedliche   Airibute  haben.   •  Weil  unterschiedliche  Inhaltstypen  unterschiedlich   ediBert  und  validiert  werden.   •  Weil  unterschiedliche  Inhaltstypen  unterschiedlich   dargestellt  werden.   •  Weil  unterschiedliche  Inhaltstypen  unterschiedlich   durchsucht  werden.   •  Weil  ein  Inhaltstypen  auf  unterschiedlichen   Endgeräten  unterschiedlich  dargestellt  wird  –   AdapEve  Content.     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  16  
  17. 17. Inhalte  sehen  auf  jedem  Medium  anders  aus  –  AdapBve  Content   Desktop   Social   Media   Mobile   Inhalt   Apps   Tablet   E-­‐Mail   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Print   Darmstadt,  02.05.2013                  17  
  18. 18. AuKau  von  Inhaltstypen  &  Aiributen   Inhaltstypen   Airibute   LimitaBonen   Semester-­‐Projekt   Projekt  Name   Freitext   Video  URL   Muss  VIMEO  URL  SEIN   Beschreibungstext   Projekt  Mitglied   Semester   Semester  Auswahl   ...   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  18  
  19. 19. Moderne  Webstandards  
  20. 20. HTML5  der  neue  Webstandard   •  W3C  hat  den  „Last  Call“  für  HTML5  bereits  2009  ausgerufen.1  W3C  hat   im  Dezember  2012  HTML5  als  ferBg  erklärt2.   •  HTML5  ist  in  vielen  Browser  bereits  fest  implemenBert.       •  HTML5  wird  die  Basis  des  Webs  über  einen  sehr  langen  Zeitraum   bilden3.   •  FormaBerung  &  Design  wird  in  HTML5  vollkommen  von  CSS   übernommen,  so  kann  Inhalt  und  Gestaltung  besser  getrennt  werden4.   Quellen:     1)  hip://de.wikipedia.org/wiki/HTML5   2)  hip://www.heise.de/developer/meldung/W3C-­‐erklaert-­‐HTML5-­‐fuer-­‐ferBg-­‐1770814.html   3)  hip://winfuture.de/news,73617.html   4)  hip://www.slideshare.net/fullscreen/faberNovel/html5-­‐how-­‐to-­‐rethink-­‐your-­‐web-­‐strategy/1     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  20  
  21. 21. HTML5  Browser  Support   Der  neue  Webstandard  wird  bereits  von  allen  aktuellen   marktührenden  Desktop  Browsern  sehr  gut  unterstützt.   Marktanteile  DE   (06.2012-­‐01.2013)   Firefox   IE   Chrome   Safari   Opera   Bewertung  (von  500Pkt.)  von  HTML5   fähigen  Browsern   500,0   457,0   448,0   419,0   392,0   378,0   400,0   320,0   300,0   200,0   100,0   0,0   Maxthon   Chrome   Opera   3.4.5   23   12.10   Firefox   Safari  6.0   Internet   17   Explorer   10   Quellen:     1)  hip://html5test.com/   2)   hip://gs.statcounter.com/#browser-­‐DE-­‐monthly-­‐201206-­‐201301-­‐bar     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  21  
  22. 22. HTML5  Fallback  für  alte  Browser:  Modernizr     Was  ist  mit  alten  Browsern  wie  dem  IE8? FunkBoniert  HTML5  auch  dort?     Der  Internetexplorer  7  und  8  unterstützen  das  HTML5  Markup   nicht,  mit  einer  einfach  JavaScript-­‐Bibliothek  kann  der  neue   Markup  den  Browsern  beigebracht  werden:     „Modernizr  ist  eine  JavaScript-­‐Bibliothek,  mit  deren  Hilfe  man   HTML5/CSS3  einsetzen  kann,  ohne  in  Kauf  nehmen  zu   müssen,  dass  die  Website  in  älteren  Browsern  nicht  richBg   funkBoniert.“  –  Netzialisten.de,  April  2012       Quellen:     1)  hip://die-­‐netzialisten.de/webdesign/html-­‐css/was-­‐ist-­‐eigentlich-­‐modernizr/     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  22  
  23. 23. HTML5  und  SEO   „Die  semanBsche  Struktur  von  Webseiten  und   Inhalten  kann  durch  neue  Elemente  wie  header,   section  oder  article  noch  besser   suchmaschinenrelevant  markiert  werden.“     -­‐  AKM3,  Juli  2012   Quellen:     1)  hip://www.akm3.de/blog/html5-­‐aus-­‐seo-­‐perspekBve   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  23  
  24. 24. Flash  vs  HTML5   •  Die  Flash  Entwicklung  für  mobile  Endgeräte  wurde  vom   Entwickler  Adobe  eingestellt.1       •  HTML5  unterstützt  Video  und  Audio  Formate.  3   •  Mit  HTML5,  CSS3  und  JavaScript  lassen  sich  komplexe   AnimaBonen  erstellen.  3   Bei  dem  heuBgen  Entwicklungsstand  von  HTML5,  CSS3  und   JavaScript  gibt  es  für  uns  keinen  Grund  mehr  Flash  einsetzen   zu  müssen.   Quellen:     Bildquellen:   1)  hip://www.spiegel.de/netzwelt/gadgets/adobe-­‐stellt-­‐flash-­‐entwicklung-­‐fuer-­‐smartphones-­‐ein-­‐a-­‐850332.html     2)  hip://de.slideshare.net/whafro/up-­‐to-­‐speed-­‐on-­‐html-­‐5-­‐and-­‐css-­‐3   1)  hip://de.slideshare.net/gadgetopia/just-­‐put-­‐that-­‐in-­‐the-­‐zip-­‐code-­‐field?type=powerpoint   3)  hip://createordie.de/cod/news/3-­‐Beispiele-­‐fuer-­‐coole-­‐HTML5-­‐AnimaBonen-­‐063821.html   2)  hip://www.slideshare.net/KMcGrane/adapBng-­‐ourselves-­‐to-­‐adapBve-­‐content-­‐12133365   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  24  
  25. 25. Ein  Gutes  Team:  HTML5,  CSS3  und  jQuery   HTML5   CSS3   Neuer  Webstandard,  der   Grundlage  zur  Gestaltung   die  Basis  des  Webs  über   moderner  Webseiten,  die   einen  sehr  langen  Zeitraum   auf  unterschiedlichen   bildet,  schax  eine  klarere   Endgeräten  eine  einheitlich   und  schlankere  DOM-­‐ gutes  Nutzungserlebnis   Struktur.   schax.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   jQuery   Bekannteste  JavaScript-­‐ Bibliothek,  welche   komfortable  FunkBonen   zur  schnellen  Enterprise   Web-­‐Entwicklung   bereitstellt.     Quelle:   hip://www.w3schools.com/js/js_libraries.asp   [07.12.2013]   Darmstadt,  02.05.2013                  25  
  26. 26. Fazit  moderne  Webstandards   Durch  den  Einsatz  moderner  Web  Standards   machen  wir  unsere  Website  langfrisBg  auf   allen  Endgeräten  mit  Webbrowser   benutzbar.     HTML5,  CSS3  und  jQuery  werden  uns  dabei   eine  solide  Grundlage  für  die  Frontend-­‐ Entwicklung  geben.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  26  
  27. 27. Responsive  Webdesign  
  28. 28. Eine  gleichbleibendes  Nutzungserlebnis  schaffen,  kanalübergreifend   Mit  Responsive  Webdesign  schaffen  wir   es  unseren  Inhalt  dynamisch  auf   unterschiedlichsten  modernen   Endgeräten  opBmal  für  den  Nutzer   darzustellen!   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  28  
  29. 29. Eine  gleichbleibendes  Nutzungserlebnis  schaffen,  kanalübergreifend   „Given  the  rapid  adopBon  of  tablets  and  smartphones  -­‐-­‐  and   the  fact  that  users  currently  seem  to  prefer  reading  their   news  on  the  mobile  web  rather  than  in  apps  -­‐-­‐  I  think  it's   inevitable  that  2013  will  be  the  year  that  responsive  design   takes  off.       For  publishers,  it  offers  the  simplest  way  to  reach  readers   across  mulBple  devices.  For  users,  it  ensures  a  great   experience  on  every  screen.“     -­‐  Pete  Cashmore,  CEO  Mashable,  2012   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  29  
  30. 30. Responsive  Webdesign,  so  geht’s!   Kurz  gesagt:  Responsive  Webdesign  nutzt  CSS3   „Media  Queries“  um  zu  idenBfizieren,  wie  die   Website  auf  welchem  Endgerät  dargestellt   werden  soll.  Grundlage  dafür  ist  eine  flexible   KonzepBon  der  Website:     Flexible  Design-­‐Elemente:  Größe,  Breite  und  Höhe   aller  Elemente  (Bilder,  Videos,  Textcontainer,  etc.)   werden  an  die  Größe  des  Ausgabe-­‐Screens  angepasst.       Flexible  Strukturierung:  Je  nach  Endgerät  ändert  sich   die  Platzierung  von  NavigaBons-­‐  und   Inhaltselementen.     Flexible  Darstellung:  Bei  der  Anzeige  auf  kleineren   Smartphone-­‐Bildschirmen  können  weniger  wichBge   Inhalte  entallen,  bzw.  nur  noch  verlinkt  werden.   Quellen:     1)  hip://webdesignerwall.com/tutorials/css3-­‐media-­‐queries     2)  hip://mashable.com/2012/12/11/responsive-­‐web-­‐design/   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  30  
  31. 31. Die  Vorteile  von  Responsive  Webdesign   •  Eine  Lösung  für  alle  Endgeräte.   •  Zukun•ssicher  für  eine  immer  größer  werdende  Anzahl  von   internetähigen  Geräten.     •  Ressourcensparend  in  der  redakBonellen  Pflege:  Redakteure  müssen   nur  eine  Version  der  Website  pflegen.   •  Ressourcensparend  in  der  technischen  Pflege  und  Weiterentwicklung:   Niedriger  Entwicklungsaufwand  als  eine  getrennte  Mobile  und  Desktop   Version.   Quellen:     1)  hip://html5test.com/compare/browser/ios60/android40/wp80.html     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  31  
  32. 32. Hürden  von  Responsive  Webdesign   •  Erhöht  den  Frontend-­‐Entwicklungs-­‐  und  Designaufwand  bei  der   Realisierung  einer  Website,  da  mehrere  Dimensionen  berücksichBgt   werden  müssen.     •  Unterstützt  nicht  die  volle  Performance-­‐Power  und  FunkBonen,  wie   beispielsweise  naBve  ApplikaBonen.   •  Ladezeiten  können  bei  mobilen  Endgeräten  negaBv  beeinflusst  werden,   wenn  Grafiken,  zwar  kleiner  dargestellt  werden,  aber  vom  Endgerät   komplei  geladen  werden.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  32  
  33. 33. Fazit  Responsive  Webdesign   Responsive  Webdesign  ist  die  zukun•ssichere  Technologie  zur   Darstellung  von  InterneBnhalten  für  eine  immer  größer   werdende  Anzahl  von  internetähigen  Geräten.       Durch  Responsive  Webdesign  schaffen  wir  eine  Lösung  für  alle   Endgeräte  und  generieren  dabei  eine  gleichbleibend  gutes   Nutzererlebnis.     LangfrisBg  sparen  wir  Ressourcen  in  der  redakBonellen  Pflege   und  in  der  Weiterentwicklung  über  alle  Geräte  hinweg.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  33  
  34. 34. Zielgruppenanforderungen  (aus  der  Anforderungsanalyse  3Spin)     Studieninteressierte     InformaBonen  zum  Studienprogramm,  Studium  und  zum  Campus  finden   Bewerbungsfragen  klären   Über  berufliche  Möglichkeiten  informieren   Anschauen,  was  man  am  Fachbereich  bzw.  im  Studiengang  macht  und  was   die  Studenten  können   -  Über  internaBonale  Austauschmöglichkeiten  informieren   -  Ansprechpartner  finden   -  Prüfen,  ob  der  Studiengang  und  die  Hochschule  den  Ansprüchen   entsprechen   -  -  -  -  Anm.:  Durchgestrichene  Inhalte  werden  von  den  Studiengangswebseiten   abgebildet  und  nicht  von  der  Mediencampuswebseite.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  34  
  35. 35. Zielgruppenanforderungen  (aus  der  Anforderungsanalyse  3Spin)     Studenten     -  -  -  -  An  Media  teilhaben   Mit  der  Website  für  sich,  eigene  Projekte  und  die  Hochschule  werben   Betrachten,  was  andere  am  Fachbereich  bzw.  im  Studiengang  machen   Ansprechpartner  finden   Alumni     -  -  -  -  Im  Kontakt  mit  dem  Fachbereich  bleiben   Sich  über  aktuelle  Entwicklungen  informieren   Projekte  betrachten   Sich  mit  anderen  Alumni  austauschen     Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  35  
  36. 36. Zielgruppenanforderungen  (aus  der  Anforderungsanalyse  3Spin)     Personen  aus  dem  Bereich  Wissenscha•  und  Forschung     -  -  -  -  Wissenscha•liche  Berichte  und  PublikaBonen  lesen   Neuigkeiten  aus  dem  Forschungsumfeld  des  Fachbereichs  erfahren   Austausch  mit  Dozenten  des  Fachbereichs   Sich  über  Lehrstellen  informieren   Presse     -  -  -  -      Sich  über  aktuelle  Projekte  und  KooperaBonen  informieren   Neuigkeiten  aus  dem  Forschungsumfeld  des  Fachbereichs  erfahren   Schwerpunkte  des  Fachbereichs  erfahren   Veranstaltungstermine  erfahren   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  36  
  37. 37. Inhaltsstruktur  Mediencampus   Darmstadt,  02.05.2013  
  38. 38. Ziele  der  Mediencampus  Webseite   Die  Mediencampus  Webseite  soll  als  lebendige   InformaEonsplaYorm  DER  Anlaufpunkt  für  die   Zielgruppenvertreter  bei  studiengangübergreifenden  Fragen   sein.     WichBg  hierbei  ist,  dass  die  Webseite  die  Inhalte  größtenteils  von   anderen  Seiten  einspeist  und  bündelt,  um  somit  den   redakBonellen  Aufwand  so  gering  wie  möglich  zu  halten.   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  38  
  39. 39. Ziele  der  Mediencampus  Webseite   PräsentaBon   der  „Marke“   Mediencamp us   Gemeinsame   Webseite  des   Fachbereich   „Media“   Veranstaltun gen  des   Mediencamp us   Kontaktmögli chkeiten   Campus-­‐   Leben   Inhalte   Projektarchiv   PräsentaEon   Modernes   Erscheinungs bild  als   DemonstraB on   Stets  aktuelle   Themen   Profilseiten   für   Angehörige     Ansprache   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   InternaBonal er  Austausch   Job-­‐  und   PrakBkumspl a€orm   Online   Studienberat ung   Einfache   Sprache   Barrierefreih eit   Studien-­‐ angebot   Sprachversio nen   Darmstadt,  02.05.2013                  39  
  40. 40. HauptnavigaBonsauKau  Mediencampus   Übersicht  über  die  vielfälBgen   Möglichkeiten  am  Mediencampus  zu   studieren   Startseite   Studiengänge   Studiengänge  anpreisen.  Was   kann  hier  studiert  werden?  Wie   unterscheiden  sich  die   einzelnen  Studiengänge?  Was   sind  die   Bewerbungsvoraussetzungen?     Entspricht  der  Studiengang  meinen   Erwartungen?   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Magazin   Studium   Kontakt   Campus   Projektarchiv   Einblick  in  die  Projektvielfalt  der   Medienstudiengänge.     Einreichung  von  Projekten.   Was  wird  gelehrt?  Welcher   Studiengang  passt  zu  mir?       Was  machen  die  anderen   Semester  und  Studiengänge?   Anfahrt   Impressum   Veranstaltungen   Online-­‐Studienberatung   Durch  Fragen  wie   Interessengebiete  +   Arbeitsverhalten  wird  dem   Bewerber  der  passende   Studiengang  vorgeschlagen.   Welcher  Studiengang  passt  zu   mir?   DE   EN   Forschung  &   Entwicklung   Studieren  im  Ausland   Partnerhochschulen  und   KooperaBon  mit  Irland  werden   angepriesen.     Erfahrungsberichte  zeigen   potenBelle  ausländische   Studienmöglichkeiten  auf.     Wie  internaBonal  ist  der   Mediencampus  aufgestellt?     Darmstadt,  02.05.2013                  40  
  41. 41. HauptnavigaBonsauKau  Mediencampus   Campuskarte  mit  Angaben  der  einzelnen   StaBonen  auf  dMagazin   und  der   em  Campus   Kontakt   Räume  (evtl.  Google  Maps  Indoor).   Anfahrt   Impressum   DE   EN   Startseite   Studium   Campus   Veranstaltungen   Forschung  &   Entwicklung   Arbeitsräume   (Workspace)   Entspannung  &  Sport   (Lifestyle)   Wohnen   Karriere   Professoren  &   Mitarbeiter   Medienstudios  geben   Einblick  in  die   VielfälBgkeit  der   Arbeitsmöglichkeiten  am   Campus.  Ein  virtueller   Campusrundgang  zeigt   alles  in  AkBon.   Die  eigene  Bibliothek.     Wie  wird  am  Campus   gearbeitet  /  studiert?   Sport,  Ess-­‐  und  Ruheräume   bieten  den  Studierenden   am  Campus  ein   breitgefächertes   Lifestyleangebot.     Wo  kann  ich  mich  in  den   Freistunden  entspannen?   Was  für   Sportmöglichkeiten  bietet   der  Campus?   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Wohnen  direkt  am   Campus  oder  im  nahe   gelegenen  Darmstadt   machen  den  Campus   airakBv.   Wo  kann  ich  am  Campus   wohnen?  Wie  finde  ich   Wohnungen  im  Raum   Darmstadt  /  Dieburg?   Weiterbildungen  (iKum),   Career  Center,  Inkubator   zeigen   Karrieremöglichkeiten   nach  dem  Studium   Wie  unterstützt  mich  die   Hochschule  nach  dem   Studienabschluss?   Professoren  &  Mitarbeiter   werden  vorgestellt,  mit   Aufgabenbereichen  und   Kontaktdaten.   Wer  unterrichtet  was?   Was  für  Referenzen  haben   sie?     Wer  ist  der  richBge   Ansprechpartner  für  mein   Anliegen?   Darmstadt,  02.05.2013                  41  
  42. 42. HauptnavigaBonsauKau  Mediencampus   Magazin   Startseite   Studium   Campus   Zeitraum  TV   Media  Monday   Science   Wednesday   Die  Online-­‐ Fernsehshow  des   Mediencampus  wird   vorgestellt  und   Inhalte  der  aktuellen   Seite  eingespeist.       z  Was  gibt  es  Neues  am   Nächste  Themen   und  Rückblicke  der   vergangenen   MediaMondays   werden  präsenBert.   Nächste  Themen   und  Rückblicke  der   vergangenen   Science  Wednesday   werden  präsenBert.   Campus?   Wo  kann  ich  mein   PrakBkum   absolvieren?     In  welche  Branche   möchte  ich  später   gehen?   Kann  ich  als   Unternehmen  dort   einen  Vortrag   halten?   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Veranstaltungskalender  über  alle   kün•igen   Kontakt   Veranstaltungen.   Anfahrt   Impressum   (Herunterladen  eines  Google  Kalender)   An  was  wird  gerade   geforscht?       Was  sind  die   neuesten   Erkenntnisse  aus   dem  Bereich  xy?   DE   Forschung  &   Entwicklung   Veranstaltungen   Mediale   Termin  der  nächsten   Mediale,  Rückblicke   der  letzten  Mediale   und   Voraussetzungen  zur   PräsentaBon  der   eigenen  Projekte.   Wann  kann  ich  mein   Projekt  ausstellen   und  was  muss  ich   dafür  machen?     Wann  kann  ich  die   Projekte  live  sehen?   EN   Alumni  meets   media   ...   Termine,  Vorstellung   der  Alunmi  und   Kontaktdaten.   Wo  gibt  es  potenBelle   Jobmöglichkeiten?     Mit  wem  kann  ich   mich  über  PrakBka,   Trainee-­‐  oder   Anstellungen   unterhalten?   Darmstadt,  02.05.2013                  42  
  43. 43. HauptnavigaBonsauKau  Mediencampus   Magazin   Kontakt   Anfahrt   Impressum   Startseite   Studium   Campus   Veranstaltungen   iKum   KooperaBonen   PhD   DE   EN   Forschung  &   Entwicklung   Driimiielprojekte   Aktuelle  Projekte  /   PublikaBonen  aus  dem   Bereich  Forschung   Vorstellung  des  InsBtuts   mit  Aufgaben  und   Forschern,  sowie  deren   laufende  Projekte  und   Forschungsarchiv.     KooperaBonen  die  die   Hochschule  hat  mit   Projekten  und   Beteiligten.   Weiterbildungsmöglichk eiten  im  iKum  aufzeigen.   Doktoranten  und   PublikaBonen.   Was  macht  das  InsBtut  am   Campus  und  wie  kann  ich   mitwirken?   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  43  
  44. 44. Mock-­‐ups  Mediencampus   Darmstadt,  02.05.2013  
  45. 45. Mock-­‐up  Mediencampus  –  Startseite  Desktop   Prominente  Bühne     Aktuelle  Veranstaltung  auf  dem  Campus   Sowie  aktuelle  redakBonelle  ArBkel     (Fallback  um  Aktualität  zu  garanBeren)   Neueste  Projekte     Was  wird  am  Campus  entwickelt?   Social  Media  Newsfeed     Aktuellste  Meldungen  aus  allen   relevanten  Social  Media  Kanälen   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  45  
  46. 46. Mock-­‐up  Mediencampus  –  Startseite  Smartphone   Prominente  NavigaEon     Was  für  InformaBonen  bietet  mir  die   Webseite?   Aktuelle  redakEonelle  ArEkel  /   Veranstaltungen     Was  passiert  gerade  am  Mediencampus?   Für  wen  ist  es  interessant?   Neueste  Projekte     Was  wird  am  Campus  entwickelt?   Social  Media  Newsfeed     Aktuellste  Meldungen  aus  allen   relevanten  Social  Media  Kanälen   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  46  
  47. 47. Mock-­‐up  Mediencampus  –  Startseite  Smartphone   NavigaBon  immer   prominent   Quellen:     hip://www.harvard.edu/  [07.12.2013]   Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  47  
  48. 48. GaranBe  der  Lebendigkeit  &  Aktualität   Startseite     •  Aktuellste  ArBkel  und  Veranstaltungen  immer  prominent  als   Quick  Links   •  News  aus  den  Social  Media  Kanälen  (Filterbar  nach  Interesse)   •  Neueste  Projekte  vom  Campus   Einspeisung  von  externen  Inhalten   •  Kaum  eigene  staBsche  Inhalte  (immer  aktuell  gezogen  von   anderen  Seiten)     Zentrales  InformaEonspool  für  alle  Zielgruppenvertreter   Geballte  Kompetenz  am  Mediencampus       Ein  Studienprojekt  von  Marisa  Wollner   und  Alexander  Vonnemann.   Darmstadt,  02.05.2013                  48  

×