Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Tech Tips for Responsive Design

For Freelance Friday, Amsterdam 10.May 2013, part of "One Size Fits All"
by

Matthew Eichler

on 13 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Tech Tips for Responsive Design

Some of you will be bored.
Tech Tips for Responsive Design
width: 760px
Fluid Layout
width: 33.33%
Elastic Layout
right-margin: 0.62em
Hybrid Layout
Combination, including min/max width and table layouts
Media Queries
Setting break points for different screen sizes
Responsive design?
HTML5?
CSS3?
JavaScript
Java?
Python?
Ruby?
PHP?
MS .NET?

Fixed Width Layout
Fixed width ads, videos, images
a {
text-decoration: none;
}
@media screen and (min-width: 1300px) {
a {
text-decoration: underline;
}
}
Designing ...
Desktop down
Mobile up
About me
over 25 years in IT
5.5 years in Silicon Valley
3 years at Dot Com start-up in Munich
8 years freelancing in the Netherlands
Mostly larger projects with 3+ month commitment
Recently, a Lean Start-up
http://www.linkedin.com/in/aventinesolutions
Open Source
Perl, Shell, PHP, Java, Ruby, Javascript, SQL/PL*SQL, HTML, CSS
Computer Languages/Markup
Frameworks
Spring, Rails, Zend, jQuery, Bootstrap
Currently Focussing on ...
Enterprise, Web Frontend & Backend, Ruby on Rails
Agile
Scrum
TDD, BDD
Object Oriented
Continuous Integration and Deployment
Incremental Change
Onsite Customer
Pragmatism
Forget the Big Bang
Responsive Design
is
Agile Design
Avoid big bang (Photoshop) designs
Start with the smallest screen first and go up
Make incremental changes
Test in as many browsers and devices as possible
Change the view port and font sizes as a user would
Consider automated testing (BDD, for larger projects)
Know Your Customer
What browsers are they really using?
What devices are they using?
Android or iOS?
Screen sizes?
Never bother with environments they are really not using.
Layouts
Fixed-width
Fluid
Elastic
Hybrid
760px
33%
1.5em
Combination
Who here has done ...
Want to learn
Clojure, Erlang/Elixir, Scala
Viewport Tag
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="width=device-width">
http://www.parool.nl/
http://pageaffairs.com/examples/fluid-elastic-fantastic/6.html
Using ems for sizing fonts:
http://aventinesolutions.nl/Responsive%20Design/ch2.1.html
http://aventinesolutions.nl/Responsive%20Design/ch2.4.html
http://www.vanseodesign.com/blog/demo/hybrid-css-layout/fluid-3-max-width.php
http://aventinesolutions.nl/Responsive%20Design/ch3/ch3.5.html
http://aventinesolutions.nl/Responsive%20Design/ch3/css/style-3.5.css
Menu Toggle
Collapse top menus on smartphones using JavaScript
http://starbucks.com
http://bradfrostweb.com/wp-content/uploads/2012/02/nav-starbucks.png
//toggle class utility function
var classToggle = function( element, tclass ) { ... }
Serving Responsive Images
Cannot rely on the browser, must be done from the server.
Example:
responsive-images gem for Rails
https://github.com/johnkoht/responsive-images
http://www.kohactive.com/blog/responsiveimages-a-ruby-gem-for-server-and-client-side-responsive-images
Try Bootstrap
CSS framework: a simple way to code a responsive site
http://getbootstrap.com/examples/grid/
http://getbootstrap.com/examples/navbar/
Read the Book
http://www.implementingresponsivedesign.com/
Tim Kadlec
http://www.agileconsultancy.be/
http://www.nicolasdory.com/
Start with "base" experience (no styles at all)
Full transcript