Send the link below via email or IMCopy
Present to your audienceStart 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
Responsive Design In a Nutshell
Transcript of Responsive Design In a Nutshell
Hosted By: Derrick Morton
The Break Down
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.
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