Responsive Webdesign for Digital Agencies
Upcoming SlideShare
Loading in...5
×
 

Responsive Webdesign for Digital Agencies

on

  • 201 views

Презентация про тренды дизайна, которые плавно перетекают из мобильного веба в десктопный, а также про ...

Презентация про тренды дизайна, которые плавно перетекают из мобильного веба в десктопный, а также про процессы создания адаптивных веб-сайтов на этапах подготовки бюджета, прототипирования, дизайна и верстки.

Statistics

Views

Total Views
201
Views on SlideShare
201
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Webdesign for Digital Agencies Responsive Webdesign for Digital Agencies Presentation Transcript

  •  Responsive Prototyping, Web Design, Programming
  • 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.
  • Responsive Processes Main stages 0. Budgeting. 1. Prototyping. 2. Web-design. 3. Layouts.
  • 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.
  • 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
  • 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
  • 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/
  • Thank you! Kirill Mazur www.linkedin.com/in/kimazur www.facebook.com/kirill.mazur mazur@tennisterin.com