Just finished a few simple responsive design site projects down, assorted (i)

I've never been in touch with responsive design before, and all of a sudden, the customer's projects require responsive designs:

1, when the browser zoom, the page will be based on the size of the browser, and automatically adapt.

2, when the page is opened with a mobile phone or mobile device, the page automatically adapts to the size of the screen browser.

3, mobile devices have horizontal screen and vertical screen points, the page should be adapted accordingly

Home Design

UI designers only designed 2 kinds of mockup, one is the full site one is mobile site and then throw over, a look at that mockup know is the current more popular design style.

1, header head, left logo right menu: At full site menu is horizontal, in Mobile site when the menu is closed, there is a "three" and menu composed of menus button; Click the "Three" button on the dynamic drop-down to expand the vertical menu, the contents of the corresponding downward movement, Very dynamic, like app app.

2,slideshow Arrangement: At full site is a group of pictures cycle to play, each picture corresponding to a paragraph of text description; At mobile site, the picture is reduced, the text goes to the bottom of the picture

3,slideshow below 4 item (pictured above, text description under the form of an item): Full site, 4 item horizontal, mobile site when 4 item vertical down, the picture with a large image of the horizontal width of the wide fill.

4, footer footer menu: Proportional to full, size is adjusted accordingly

Inside page Design

UI designers have only 2 types of mockup

1, head Head, ibid.

2,banner,full site when the big Banner,mobile site small Banner

3, page content layout, full site is divided into two parts of the content, the middle with a dotted line, mobile site, the middle of the dotted line disappears, the right side of the flow down, the contents of the content from the left to the upper and lower rows.

4, footer ibid.

Special inside Page One, Project display page

This is a project display page, requires a map, there are some highlighted dots on the map, when the mouse mouse over is pop-up content tips (diagram plus simple project description plus project links can be linked to the project details page), the UI designer has only 2 kinds of mockup.

1, header head, ibid.

2, Large map Banner,full site when the map above some highlighted small dots on behalf of each featured item, mouse over popup project content Tips;mobile site to become a small map banner, do not need to pop up content.

3, there is a Slidebar,full site when Slidebar appeared in the first row display 4 item (featured item display: Under the text description and links can be linked to the project detailed description page), more than 4 can point left or right triangle button to display the second row of items item Mobile site, Slidebar disappear, all items vertical down, layout is left picture right text description plus link.

4, footer footer Ibid.

Special inside Page two, each project show detailed page

This page layout style a bit like fashion magazine

1, head Head, ibid.

2, Project overview, left simple stroke right picture, below the text paragraph, mobile when all vertical down

3, Customer challenge, left simple stroke right picture, mobile when all vertical down

4, solution, left simple stroke right picture, mobile when all vertical down

5, summary, left simple stroke right picture, mobile when all vertical down

6, footer footer Ibid.