Embed Size (px)
Citation preview
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
![1 $SU VW (G +LWDFKL +HDOWKFDUH %XVLQHVV 8QLW 1 X ñ 1 … · 2020. 5. 26. · 1 1 1 1 1 x 1 1 , x _ y ] 1 1 1 1 1 1 ¢ 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1](https://img.pdfslide.us/doc/110x75/5fbfc0fcc822f24c4706936b/1-su-vw-g-lwdfkl-hdowkfduh-xvlqhvv-8qlw-1-x-1-2020-5-26-1-1-1-1-1-x.jpg)
![$1RYHO2SWLRQ &KDSWHU $ORN6KDUPD +HPDQJL6DQH … · 1 1 1 1 1 1 1 ¢1 1 1 1 1 ¢ 1 1 1 1 1 1 1w1¼1wv]1 1 1 1 1 1 1 1 1 1 1 1 1 ï1 ð1 1 1 1 1 3](https://img.pdfslide.us/doc/110x75/5f3ff1245bf7aa711f5af641/1ryho2swlrq-kdswhu-orn6kdupd-hpdqjl6dqh-1-1-1-1-1-1-1-1-1-1-1-1-1-1.jpg)
![Head first mobile web : [a brain-friendly guide] · 2012-11-23 · tableofcontents getting started 011lie mobile \Vet> ResponsiveWebDesign Heythere!Areyou readytojumpinto mobile?](https://img.pdfslide.us/doc/110x75/5f0fd6b37e708231d4462301/head-first-mobile-web-a-brain-friendly-guide-2012-11-23-tableofcontents-getting.jpg)
![[XLS] · Web view1 1 1 2 3 1 1 2 2 1 1 1 1 1 1 2 1 1 1 1 1 1 2 1 1 1 1 2 2 3 5 1 1 1 1 34 1 1 1 1 1 1 1 1 1 1 240 2 1 1 1 1 1 2 1 3 1 1 2 1 2 5 1 1 1 1 8 1 1 2 1 1 1 1 2 2 1 1 1 1](https://img.pdfslide.us/doc/110x75/5ad1d2817f8b9a05208bfb6d/xls-view1-1-1-2-3-1-1-2-2-1-1-1-1-1-1-2-1-1-1-1-1-1-2-1-1-1-1-2-2-3-5-1-1-1-1.jpg)
![1 1 1 1 1 1 1 ¢ 1 , ¢ 1 1 1 , 1 1 1 1 ¡ 1 1 1 1 · 1 1 1 1 1 ] ð 1 1 w ï 1 x v w ^ 1 1 x w [ ^ \ w _ [ 1. 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ð 1 ] û w ü](https://img.pdfslide.us/doc/110x75/5f40ff1754b8c6159c151d05/1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-w-1-x-v.jpg)
