Response Webpage Design Example

To fully test your own or others' responsive websites, you need to prepare different testing systems for each device and different screen sizes. Although this is the perfect solution, most tests can be completed by changing the browser window size. In addition, there are many third-party plug-ins and browser extensions to choose from, through which you can set the current browser window or view to a specified pixel. If necessary, you can also automatically switch the current browser window or view to the default size (such as 1024x768 pixels ). In this way, you can easily test the website effect in different screen-view sizes.

Infatuated with pixels? Forget it!

After entering the responsive Webpage Design church, we should not be infatuated with the pixel (PX) measurement unit, because in most cases we will not use pixels, the relative measurement unit (EM or percentage) is used ). Compared with the organization, it is easier for us to review other responsive design works and view the design changes.

For Internet Explorer users, download and install Microsoft Internet Explorer developer toolbar as follows:
Http://www.microsoft.com/download/en/details.aspx? Id = 18359

If you are using safari, although resizeme (http://web.me.com/aaronholla/Safari_Extensions/ resizeme.html) features are similar and free, but I love resize (http://resizeSafari.com) most ).

Firefox users download firesizer (https://addons.mozilla.org/en-US/firefox/addon/firesizer/), chrome Download Windows resizer (https://chrome.google.com/webstore/detail/ kkelicaakdanhinjdeammmilcgefonfh ).

Do you prefer browser extensions? Another method: I wrote a simple HTML page to display the current height and width of the browser window. The page uses the jquery framework to obtain and display the height and width of the current viewport. You can open this page in the new tab of the browser, adjust the window size, and switch back to the page you want to test to view the effect. What size is my viewport page ?" The page address is as follows:
Http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

View and screen size

The view and screen size are not the same concept.ViewIt refers to the content area in the browser window, excluding the toolbar and label bar. That is, the area actually displayed on the webpage.Screen SizeThe physical display area of the device. Note that some browser adjustment tools display other elements of the browser, such as the address bar, tag bar, and search bar, but some tools do not. In the following example, the actual view size is displayed in the upper right corner (1156x921 pixels), and The firesizer plug-in displays the window size in the lower right corner (1171X1023 pixels ).

Now, we start to appreciate the best responsive websites with all the tools we need. Start your favorite browser, open browser adjustment tools, access http://thinkvitamin.com /.

If your view width is greater than 1060 pixels, you will see the layout shown in:

If the width of your view is between 930 pixels and 1060 pixels, you will see the layout shown in:

Pay attention to how the main navigation menu next to the logo changes. The icons on the right side of the main content area are arranged one by one. Everything on the interface is reasonably available. Most importantly, nothing overflows from the screen. Now let's take a look at the effect that the width of the view is less than 880 pixels, as shown below:

The effect of the header is basically not changed, but note that the sidebar on the right is still narrowed. The icons are arranged in two rows and two columns, and the text block is adjusted as appropriate, and the text stream changes accordingly.

However, you can see a major change by reducing the width of the view to less than 600 pixels, as shown in:

How is it? The entire sidebar responds to our new video port, and the most important content area of the website occupies the width of the entire browser window. Note that the navigation links in the header are arranged horizontally instead of placed next to the logo. In addition, the logo size has been adjusted. All of the above changes help you create a better experience based on the size of the view.

Let's take a look at another example: http://2011.dconstruct.org /. The following figure shows the effect of a website with a wide view (more than 1350 pixels:

Pay special attention to the arrangement format of the nine images. When you reduce the width of the window (less than 960 pixels), pay attention to the changes in the interface. The three rows and three columns are arranged in three rows and two columns plus one row and three columns, as shown in:

Continue to reduce the width of the view. When it is less than 720 pixels, we will encounter another design "breakpoint ". The header navigation link is converted into a navigation area with images, which provides a better operation area for touch-screen navigation:

Continue to reduce the width of the view. When the value is less than 480 pixels, the picture is arranged in two pictures in the first row, three in the second row, and four in the third row. The size of these images changes when the width of the view is reduced to about 300 pixels. The following shows the effects on the iPhone:

Featured a responsive design creative collection site: http://mediaqueri.es. Although not all the websites collected here adopt a complete responsive methodology, that is, they first design small-view and then gradually enhance support for large-view. But for now, the rise of responsive design methods is not long. Considering the various possibilities of responsive web design, there are indeed many examples that can help us draw on ideas. Although the idea of responsive web page design can be illustrated by adjusting the size of the view to browse the website, this does not show the advantages of HTML5. HTML5 is actually behind the scenes. So let's focus on the background to learn about the advantages of HTML5.

From responsive web design: HTML5 and css3 practices

To fully test your own or others' responsive websites, you need to prepare different testing systems for each device and different screen sizes. Although this is the perfect solution, most tests can be completed by changing the browser window size. In addition, there are many third-party plug-ins and browser extensions to choose from, through which you can set the current browser window or view to a specified pixel. If necessary, you can also automatically switch the current browser window or view to the default size (such as 1024x768 pixels ). In this way, you can easily test the website effect in different screen-view sizes.

Infatuated with pixels? Forget it!

After entering the responsive Webpage Design church, we should not be infatuated with the pixel (PX) measurement unit, because in most cases we will not use pixels, the relative measurement unit (EM or percentage) is used ). Compared with the organization, it is easier for us to review other responsive design works and view the design changes.

For Internet Explorer users, download and install Microsoft Internet Explorer developer toolbar as follows:
Http://www.microsoft.com/download/en/details.aspx? Id = 18359

If you are using safari, although resizeme (http://web.me.com/aaronholla/Safari_Extensions/ resizeme.html) features are similar and free, but I love resize (http://resizeSafari.com) most ).

Firefox users download firesizer (https://addons.mozilla.org/en-US/firefox/addon/firesizer/), chrome Download Windows resizer (https://chrome.google.com/webstore/detail/ kkelicaakdanhinjdeammmilcgefonfh ).

Do you prefer browser extensions? Another method: I wrote a simple HTML page to display the current height and width of the browser window. The page uses the jquery framework to obtain and display the height and width of the current viewport. You can open this page in the new tab of the browser, adjust the window size, and switch back to the page you want to test to view the effect. What size is my viewport page ?" The page address is as follows:
Http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

View and screen size

The view and screen size are not the same concept.ViewIt refers to the content area in the browser window, excluding the toolbar and label bar. That is, the area actually displayed on the webpage.Screen SizeThe physical display area of the device. Note that some browser adjustment tools display other elements of the browser, such as the address bar, tag bar, and search bar, but some tools do not. In the following example, the actual view size is displayed in the upper right corner (1156x921 pixels), and The firesizer plug-in displays the window size in the lower right corner (1171X1023 pixels ).

Now, we start to appreciate the best responsive websites with all the tools we need. Start your favorite browser, open browser adjustment tools, access http://thinkvitamin.com /.

If your view width is greater than 1060 pixels, you will see the layout shown in:

If the width of your view is between 930 pixels and 1060 pixels, you will see the layout shown in:

Pay attention to how the main navigation menu next to the logo changes. The icons on the right side of the main content area are arranged one by one. Everything on the interface is reasonably available. Most importantly, nothing overflows from the screen. Now let's take a look at the effect that the width of the view is less than 880 pixels, as shown below:

The effect of the header is basically not changed, but note that the sidebar on the right is still narrowed. The icons are arranged in two rows and two columns, and the text block is adjusted as appropriate, and the text stream changes accordingly.

However, you can see a major change by reducing the width of the view to less than 600 pixels, as shown in:

How is it? The entire sidebar responds to our new video port, and the most important content area of the website occupies the width of the entire browser window. Note that the navigation links in the header are arranged horizontally instead of placed next to the logo. In addition, the logo size has been adjusted. All of the above changes help you create a better experience based on the size of the view.

Let's take a look at another example: http://2011.dconstruct.org /. The following figure shows the effect of a website with a wide view (more than 1350 pixels:

Pay special attention to the arrangement format of the nine images. When you reduce the width of the window (less than 960 pixels), pay attention to the changes in the interface. The three rows and three columns are arranged in three rows and two columns plus one row and three columns, as shown in:

Continue to reduce the width of the view. When it is less than 720 pixels, we will encounter another design "breakpoint ". The header navigation link is converted into a navigation area with images, which provides a better operation area for touch-screen navigation:

Continue to reduce the width of the view. When the value is less than 480 pixels, the picture is arranged in two pictures in the first row, three in the second row, and four in the third row. The size of these images changes when the width of the view is reduced to about 300 pixels. The following shows the effects on the iPhone:

Featured a responsive design creative collection site: http://mediaqueri.es. Although not all the websites collected here adopt a complete responsive methodology, that is, they first design small-view and then gradually enhance support for large-view. But for now, the rise of responsive design methods is not long. Considering the various possibilities of responsive web design, there are indeed many examples that can help us draw on ideas. Although the idea of responsive web page design can be illustrated by adjusting the size of the view to browse the website, this does not show the advantages of HTML5. HTML5 is actually behind the scenes. So let's focus on the background to learn about the advantages of HTML5.

From responsive web design: HTML5 and css3 practices