Responsive Web Design Intro

Responsive Web Design

Responsive web design is where the design and development of a website, the screen size, platform, and orientation, responds to the viewer and the environment. This approach has become more important because the amount of mobile uses is increasing as the number of desktops are decreasing. In responsive design, it includes the use of media queries. Media queries is a CSS technique where it uses the @media rule to include a block of CSS properties, only if a certain condition is true. 

The breakpoints are is when the design that is used on a desktop changes to fit on a mobile screen. 

Examples:

1. Ditto.

Here is the what the website would look like in full screen on a desktop. There are two rows in the layout, the menu and the other tabs are on the top, and the main subject is below. Right we are in the Invest tab and there are 4 pages in this tab. To view them you scroll down or up your mouse, and each header, paragraph, and photos change, leading to a video as the background. The image size either small or medium taking up the right side of the screen. The type sizes fit nicely in the left side of the image.

Now the size of the width became narrower. The content still the of the full screen one above. The layout, navigation, and the content is the same, but the little changes are the size of image and type. The image is more smaller and the type is more bigger.

Finally, a more narrow version of the website. This is more different than the other two sizes. However the content is the same. What's different is that the image is smaller and now below the text, and the text is bigger and above the image. Also the navigation is now on the bottom rather than the top, and to view the other tabs you need to press the menu button on the bottom right corner.