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

Responsive Design In a Nutshell

This will be a descriptive indepth overview of Responsive Web Design or RWD
by

Derrick Morton

on 26 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Design In a Nutshell

Responsive Web Design
(RWD)

Hosted By: Derrick Morton
Resources
Some Statistics
The Break Down
The Process
Examples
What is responsive web design?
Responsive web design is an approach that suggests that website design should respond to the user’s behavior and environment based on screen size, platform and orientation.
Fluid Grids - Fluid grids refer to fluid designs where the grid units resize according to screen size. It is about defining your own parameters for various objects in code like columns, spacing and containers.
Its a combination of
Flexible Images – Flexible images move and scale with the flexible grid. This means scaling down according to the HTML attributes of height and width for more text content on smaller devices. The other way to scale images is cropping them with the help of CSS overflow property.
Screen Resolutions – Common resolutions include the 320px portrait width and 480px landscape width of smartphones, 768px portrait width and 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions.
The penetration of laptop and desktop ownership is the same today as it was in 2007.
Mobile browsing is expected to pass desktop and laptop browsing in the next couple of years.
By 2014 there will be over a Billion mobile devices on the market, which means people will be browsing from these devices.
A survey from iPass shows that 40% of workers are carrying two phones, 80% of mobile workers will be carrying a tablet within 6 months, according to iPass data.
Discover
Design
Develop
Deploy
Thank You.....
CSS Media Queries – Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent's features, such as the browser window's size, orientation, screen resolution, color. They act as conditional comments that are able to indicate the used device and serve up different code for different device attributes, in other words target different screen resolutions with different styles.
Of Responsive Web Design
Full transcript