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

Responsive Web Design

Explaining RWD approach as applied!
by

Tejaswita T

on 10 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Design

Responsive Web Design
Setting up the stage!
Help at hand
Solution
Responsive Web Design
Techniques for RWD
Today's Agenda
Setting up the stage
Responsive Web Design today's solution
RWD techniques
Demo
Hybrid approach
Considerations
Supporting Frameworks
Scenario
Think Different
Build multiple sites?
n number of devices available for the users
good network coverage
client requirement
Make it Fluid
Fluid grids
Flexible images
Adapt the content
Content Adaptation
Media Queries
Image Swapping
Responsive
Fluid Grids
Flexible Images
Media Queries
target ÷ context = result
Target:
the size we ultimately want to be displayed by default

Context:
depends on the attribute under calculation - usually the parent element
Flexible Containers
Flexible Margins
Flexible Padding
More than RWD
We need elastic version of the sites
fits on n number of devices
is USABLE
managing multiple code bases
multiple content management
learning curve of platform specific technique
handling multiple URLS for:
content reliability
SEO
Multiple versions
Single solution for multiple devices
Design your site so that it responds to users screen resolution
HTML5/CSS3
Media Queries
Browser support
Good network bandwidth (3G,4G)
What we have
Term introduced in May 2010 by Ethan Marcotte.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment screen size, platform and orientation).

Uses a set of techniques and ideas.
Context-sensitive interaction, for example: http://dressresponsively.com/
Mobile first approach
Performance
Network considerations
Page weight
Conditional and lazy loading(Gmail)
Considerations
It takes time until I actually see something on the site.
Though I am not processing the scripts its downloaded on my phone slowing it down further.
Device has high screen resolution but the native browser does not support css3!
Progressive Enhancement
Start with least capable device
- assuming for the slowest connection speed and building up from there to larger breakpoints for faster connections.
Mobile first approach
<script id="lazy">
// Make sure to strip out (or replace) comment
blocks in your JavaScript first.
/* JavaScript of lazy module */
</script>
<script>
function lazyLoad() {
var lazyElement = document.getElementById('lazy');
var lazyElementBody = lazyElement.innerHTML;
var jsCode = stripOutCommentBlock(lazyElementBody);
eval(jsCode); }
</script>
Conditional JS loading
Getting something on screen as soon as possible really improves the user experience.
Clean HTML semantic
CSS
JS

http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/
RESS : RWD + Server side detection
Control the markup and css at server side based on the device capability.

Relies on device library on the server to detect the device and returns its capabilities.

Helps serving the appropriate user journey.

Example: WURFL
Anatomy of a page layout
Aspects
http://localhost:8080/fixed-fluid/fixed-fluid.html
In the RWD context!
Aspects
In the RWD context!
http://localhost:8080/fixed-adaptive/fixed-adaptive.html
http://localhost:8080/fixed-responsive/fixed-responsive.html
http://www.equalexperts.com
Create a website version for each resolution and device?

Would it be possible, or practical?
Hybrid = PE + RESS
Thinking native?
Efforts - time and money
Browser support for webapps!
Device capabilities
Performance
Bootstrap
Skeleton
Foundation
References
http://alistapart.com/article/responsive-web-design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsible Web Design - Ethan Marcotte
Load it when the user requires the content on your device.
Falls within the progressive enhancement school of responsive web design thought.
Requires Server side detection
Lazy Loading
Respond.js
Modernizr.js
Full transcript