Responsivedesign 7-3-2012
Download as PPTX, PDF3 likes640 views
The document is a presentation by Tom Carney about responsive web design. It discusses Carney's background in web development for over 10 years and experience with mobile and responsive design for 18 months. The presentation covers the introduction of responsive design, responsive design techniques like grids, media queries and plugins, transitioning websites to responsive design, responsive design workflows, and examples of responsive design. It addresses setting separate mobile sites versus responsive design and takes questions from the audience.
Responsivedesign 7-3-2012
- 1. By Tom Carney Web Programmer
- 2. Designing/developing sites for over 10 years Been working with Mobile and Responsive Design for about 18 months Favorite web technologies include WordPress, HTML5/CSS3, jQuery and Ruby on Rails.
- 3. “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.” – John Allsopp, A Dao of Web Design – April, 2000
- 4. How many of you use your phone or mobile device (iPad/tablet) on the internet?
- 5. Introduction of Responsive and Mobile Design Responsive Design Pieces ◦ Grids and Fluid layout ◦ @media-query in CSS ◦ jQuery plugins making Responsive Design easy Transitioning websites to be Responsive Responsive Design Workflows Best Examples of Responsive Design Questions & Answers
- 6. Setting a separate mobile website (same content) with a mobilized sub domain or folder. ◦ Twice as much work – 2 sites that are completely different except content (most of the time) ◦ Search engines may penalize both sites because of duplicate content. ◦ Uses a browser recognition file called WURFL (Wireless Universal Resource FiLe) – very iffy results due to the amount of mobile browsers out there. The Alternative to this …..
- 9. It is a design concept consisting of: ◦ Fluid grid and layout ◦ Fluid Media Assets (images, videos, etc) ◦ @media-queries – CSS3 property
- 10. Grids need to be fluid (proportional & scalable). Want to use proportional units – em Avoid using fixed units – px, pts, etc. Formula to figure out em for your selector ◦ Target= context / content Grid layout I like to use http://matthewjamestaylor.com/blog/perfect-multi- column-liquid-layouts
- 11. A CSS3 property – so it will go into your CSS file Need to include the meta tag – viewport tag in your header Need to setup “Breakpoints” ◦ Breakpoints are the max-width properties of the screen that you want to design for.
- 12. Several jQuery plugins making Responsive Design for your site easier Video: FitVids.js - http://fitvidsjs.com/ Web Type: Lettering.js - http://letteringjs.com/ Images: Adaptive Images - http://adaptive-images.com/
- 13. For CMS sites (WordPress, Drupal, Joomla, etc): ◦ Recommend using a mobile plugin or module ◦ Discussion on the Bloom Ads WordPress site Elite team’s input on WP Touch Pro For Non-CMS sites: ◦ Recommend using the jQuery plugin called – response.js ◦ There will need to be some reformatting of your site to HTML5 to properly use the JavaScript and tag parameters.
- 14. All are based in the 4 D’s of project workflow ◦ Discover, Design, Develop, Deploy Great resource on Responsive Workflow ◦ http://www.slideshare.net/pkattera/design-process- for-responsive-web-design
- 15. From http://www.slideshare.net/pkattera/design-process-for-responsive-web-design - Slide 24
- 16. http://www.smashingmagazine.com http://www.css-tricks.com http://elliotjaystocks.com/ http://simplebits.com/ Does anyone have any examples that they seen that is responsive?
- 17. http://www.alistapart.com/articles/responsive-web- design/ http://www.alistapart.com/articles/dao/ http://www.slideshare.net/pkattera/design-process- for-responsive-web-design http://lanyrd.com/2012/mobilism/sqpxx/ http://webdesignerwall.com/tutorials/setting- breakpoints-in-responsive-design http://www.aoverkamp.com/Chronicle/tabid/62/post /updating-my-site-using-a-responsive-design- workflow/2012-06-06.aspx http://mobiletestingfordummies.tumblr.com/post/26 346629275/ten-things-to-remember-when-testing- rwd
- 18. Questions & Answers This presentation can be found on http://www.slideshare.net/thomascarney