Definning the information architecture (commonly known as IA) and structure of the page.
Adding design elements to make it responsive and look good across all devices.
Add a viewport The viewport indicates to the browaer that the page needs to be scaled to fit the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style guide , a style guide is a useful way to get a high-level understanding of the visual representation of the page and it helps you ensure that you are consistent throughout the design.
Images , content iamges and stylistic images.
These were images that were important to the narrative of our product.
Stylistic images are images that are not needed as part of the core content but add visual flare or help guide the user's attention to a specific piece of content.
Set your firt breakpoint , the length of the line is going above 10 words(the optimal reading length) and that is where we want to change it.
Constrain the maxmum width of the design#Alter the padding of elements and reduce the text size#Move the form to float in-line with the heading content#make the video float around the content#Reduce the size of the images and have them appear in a nicer grid
Adapt elements to wide viewport - Our narrow viewport was a stacked linear display. Each major section and the content inside them was displayed in order from top to bottom. A wide viewport give us extra space to use to display the content in an optimal(最佳的/最理想的) way for that screen . For our product page, this means that according to our IA we can:
Move the form around the header information
Position the video to the right of the key points
Tile the images
Expand the table
Make images responsive to DPI
When using images, take the size of the viewport and the density of the display into consideration.
The web was built for 96dpi screens. Width the introduction of mobile devices, we have seen a huge increase in the pixel density of screens not to mention Retina class displays on laptops. As such, images that are encoded to 96dpi often look terrible on a hi-dpi device.
We have a solution that is not widely adoted yet. For browsers that support it, you can display a high density image on a high density display.
<img src="photo.png" srcset="photo@2xpng 2x" />
If you follow these guidelines, you will be off to a good start:
01 Create a basic IA(Information Architecture) and understand your content before you code.
02 Always set a viewport
03 Create your base experience around mobile-first approach
04 Once you have your mobile experience, increase the width of the display until it doesn't look right and set your breakpoint there.
05 keep iterating