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 Design

No description
by

Daniel Quattrociocchi

on 1 October 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Design

Developing
With Flexibility
in Mind

Responsive Design:
Before the widespread use of HTML5 and CSS3,
we only had to keep in mind the most commonly used screen resolutions when developing a website.
As mobile devices increased in popularity, many websites could not accommodate their small screen sizes.
Usually, 1024 x 768 pixels
Developers would create two different websites. One for desktop, the other for mobile.
www.tsn.ca
m.tsn.ca
Having two different websites to maintain often resulted in additional maintenance, which was often countered with a mobile website that had less content.
Screen sizes and resolution kept increasing, but for the most part, the design world stuck around 1024 x 768, as many users still had low resolution screen.
Many websites, even to this day, look very empty on large screen / high resolutions.
With a target canvas size in mind, developers would create their design in an art program (ie: Photoshop) and replicate it with HTML and CSS
Since developers wanted their design to be perfectly replicated, everything was based on pixels, since every screen is measured in them.
This would eventually caused two design problems in the future...
In order to combat the inflexible pixel, developers began using flexible units of measurement.
a relative unit of measurement that is based on the multiplication of the default font size.
em
%
a relative unit of measurement that is based on the size of its parent element.
Using relative units of measurement means we can base our designs on the size of a browser window (called a viewport) instead of having a design with a fixed width.
Full transcript