ResponsiveWebdesign - Bauhaus University, Weimar · Eurocase (2) Evang (1) Evercoss (10) Evercross...

Responsive  Webdesign  

Crash  Course      

Gabriel  Rausch  

gabriel.rausch@uni-­‐weimar.de  

www.uni-­‐weimar.de/medien/wiki  (IFD  >  WS14  >  RWA)  

M5,  R105,  office  hours  Mo.  -­‐  Wed.  

TODAY’S  SCHEDULDE  

General  Topics  /  Find  dates    

Introduc?on  Mobile  Web  OpKmizaKon  

Classic  /  Modern  Approach      

Workaround  Mediaqueries    

Task  for  20th  December  

6  ECTS  /  3  SWS  Werk-­‐  &  Fachmodul  

Verkauf   Presence  &  Par?cipa?on  (20%)  

Project  (50%)  

Homework  &  Presenta?on  (30%)  

hTp://services.google.com/V/files/misc/omp-­‐2013-­‐us-­‐en.pdf  

Classical  Approach    

MulKple  Websites  

RWD  Approach    

One  Websites  

RWD  Approach    

Responsive  Webdesign    

*  fluid  grid  *  fluid  images  *  breakpoints  

RWD  Approach  

Fluid  Grid  

RWD  Approach    

Responsive  Webdesign    

*  fluid  grid  *  fluid  images  *  breakpoints  

hTp://jsbin.com/xetogawasa/edit      Warm-­‐up  tasks:  #1  fluid  image  #2  arrange  items  verKcally              for  smartphones  

Tasks  ?ll  20th  December      

Faceli_  &  Mobile  OpKmizaKon    

 -­‐  Based  on  the  subpage      /wiki/Help:Images  

   -­‐  FaceliT  the  Desktop-­‐Version  (Only  the  help-­‐page)        i.e.  interface  includes  Nav  /Subnav  /  Imgs  /  Texts  /          Sidebar  /  Header  

   -­‐  Mobile  last:  Create  a  mobile  version        Use  the  mediaqueries  from  the  introduc?on  session  

   -­‐  Upload  the  prototype  and  post  the  link  in  the  wiki