Responsive Webdesign for Digital Agencies

Download Responsive Webdesign for Digital Agencies

Post on 27-Jan-2015

105 views

Category:

Technology

2 download

DESCRIPTION

, , - , , .

TRANSCRIPT

  • 1. Responsive Prototyping, Web Design, Programming

2. Design Trends Mobile Era at Web-design 1. Responsive web-design. 2. Mobile navigation (big buttons!). 3. Flat design (windows 8 / windows phone). 4. Sites with phone-like sidebars. 5. Fixed navigation (less time quick access!). 6. Site-slides. 7. One page sites. + Parallax Storytelling. + Endless scrolling. 3. Responsive Processes Main stages 0. Budgeting. 1. Prototyping. 2. Web-design. 3. Layouts. 4. Budgeting How much time and what is the cost? Ex. 3 pages Website: main, articles catalog, article page. 1. Prototyping: + 3-6 hours. 2. Design: + 6-8 hours. 3. Layout: + 10-12 hours. 4. Approving all stages: + 6-8 hours. ____________________ + 20-30% additional time and costs. 5. Prototyping Clear Responsive Mind 0. Mobile first vision. 1. Creating tablet prototype. 2. Creating desktop prototype. 3. Creating phone prototype. Book: Mobile first, Luke Wroblewski Presentation: http://www.slideshare.net/Darwinium/mobile-first-responsive-design 6. Layout Main responsive technologies 1. Work with media-queries (CSS). 2. Rubber images. 3. Elements adaptation (ex. header to dropdown). 4. Content hiding. 5. Identifying devices opportunities (Modernizr, etc) time for browsers adaptation. Presentation: http://www.slideshare.net/profyclub_ru/ss-12266758 7. Testing and Presentation How to check responsive site? Web services 1. Am I Responsive(http://ami.responsivedesign.is/) 2. http://responsive.is/ 3. http://quirktools.com/screenfly/ 8. Thank you! Kirill Mazur www.linkedin.com/in/kimazur www.facebook.com/kirill.mazur mazur@tennisterin.com