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
Transcript of 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.
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.
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.