gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update of Product Design, UX Design and User Flow articles (#18709)

Browse Source 
* User Flow: Information, Articles, Youtube update

Explanation on what is User Flow with youtube videos and articles for reference and/or resource.

* Update of UX Design article

Update the article with more information and more links to articles and books.

* Product Design: Info, Articles, Youtube update

Explanation on what is Product Design with youtube videos and articles for reference and/or resource.

* Update description of Retina Display

As reported in issue #18129, there is a lack of explanation on what a retina display is and some users find it difficult to understand what they are doing exactly, so I added a short explanation on what a High-Resolution Display is and what a Retina Display is.
This commit is contained in:
Martin
2018-10-14 06:01:40 +09:00
committed by Quincy Larson
parent 3ec1dfd5b6
commit e6718ae851
4 changed files with 84 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
View File

@ -7,7 +7,9 @@ videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
## Description
<section id='description'>
The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.
With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images who have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display.
The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.
Here is an example of an image that is only using half of the original height and width:
<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>
</section>