Date post: | 31-Oct-2014 |
Category: |
Technology |
Upload: | thomas-carney |
View: | 1,167 times |
Download: | 0 times |
Responsive and Mobile Design
By Tom CarneyWeb Programmer
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.
About Me
“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
Quote on Responsiveness in Web
How many of you use your phone or mobile device (iPad/tablet) on the internet?
Question To The Audience
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
Overview of Presentation
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 …..
Designing for Mobile
Responsive Design
Responsive Design Beginnings
http://www.alistapart.com/articles/responsive-web-design/
It is a design concept consisting of:◦ Fluid grid and layout◦ Fluid Media Assets (images, videos, etc)◦ @media-queries – CSS3 property
What is Responsive Design?
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 usehttp://
matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
Fluid not Fixed units
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.
What is @media-queries property?
Several jQuery plugins making Responsive Design for your site easier
Responsive Design and jQuery
Video: FitVids.js - http://fitvidsjs.com/
Web Type: Lettering.js - http://letteringjs.com/
Images: Adaptive Images - http://adaptive-images.com/
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
Making an existing site Responsive
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.
All are based in the 4 D’s of project workflow◦ Discover, Design, Develop, Deploy
Responsive Workflow
Great resource on Responsive Workflow◦ http://
www.slideshare.net/pkattera/design-process-for-responsive-web-design
Sample Responsive Workflow
From http://www.slideshare.net/pkattera/design-process-for-responsive-web-design - Slide 24
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?
Best Responsive Sites
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/26346629275/ten-things-to-remember-when-testing-rwd
Resources
Questions & Answers
This presentation can be found onhttp://www.slideshare.net/thomascarney