Background of Responsive Web Design
Since a mobile gadget supported full web browsing, considerations for web design have been increased.
For supporting other size web, a simple method is what makes 2 different version's website for PC and Mobile. In this case, Mobile version has to be connected to according to its address and PC version has to be linked to different address. It means that if you have website, you just make new site for Mobile without revising existing site.
But there are some problems.
First, different sites is hard to be managed when you need to update some pages.
Second, it is hard to give best condition to users because its condition is selected by users and they should consider whether to go Mobile site or PC site.
First, different sites is hard to be managed when you need to update some pages.
Second, it is hard to give best condition to users because its condition is selected by users and they should consider whether to go Mobile site or PC site.
So, an idea was appeared to adjust site's circumstances responsively, which was started to be called to the responsive web. The responsive web gets information of a connected gadget and responds to each user as best condition.The best simple method is to have 3 version 's different web-size according to gadgets such as Mobile / Tablet / PC. Through these information, the web is released to best size for users.
And there is additional advanced technique that it is to get using window size of a user as well as sorts of gadget. Through this idea, it is possible to give a better solution to users.
How can make this advanced solution?
Google already implemented the latest technique to their almost web sites to keep up with time.
How can make this advanced solution?
Google already implemented the latest technique to their almost web sites to keep up with time.
Analyze Example Responsive web site
This site named 'google web designer' which introduces a tool can web design interactively based on HTML5.
As first action, I connected to the site above mentioned by Mac. (13-inch MacBook Pro with Retina display has 2560x1600 resolution) In advanced responsive web, it is impontant to be opend window's width. In an afore image, the window's widh is almost 2500px because it is using almost full screen. In this picture, what can you see? There is a keyboard in the left side and a mobile phone and a tablet are in center. And a note is the right side. Also sentences such as 'Focus on design' and 'Amplify with code' is shown just below images.
As next action, I adjusted window width more narrower. The width is decreased to almost 1800px. What is different between before and after? First, the keybord and note in the edge are barely shown. And a gap between the mobile phone and the tablet is wider. Also the gap of sentences is narrower and some texts it was not shown is appeared because the image's height is decreased.
Let's reduce the width. This is almost 1300px. In now, the keyboard and note are not shown and a gap between the mobile phone and tablet is more narrow. There is a noteworthy phenomenon to the sentence according to 'Focus on design', which is disappered on the screen. It was possible since a layer's position was moved to below as narrower width.
I got a few more reduction of window's width as almost 800px. At now, you can see the decreased image size and can check texts easily. And then, two images such as the mobile phone and tablet are overlap.
I reduced the width again and it was almost 600px. At present, the tablet is just shown on the image which is smaller than before. And texts above an image is shown not. There is a unique penomenon and it was changed to slope of the tablet. It was slope of 15 degree but now, it looks straight.
Through 5 captured images above shown, you can see the change of the image and text as reducing the window's width.
It is possible to be considered to generate best design according to widow's width of users by a publisher.
Summary
Although I don't analyze a code of this web, I can guess how it is possible.
In the first capture, you can an image including the keyboard, mobile phone, tablet and note. The keyboard and note in the edge is background image. And mobile phone and tablet are each image. Through comparison the first capture and second capture, I can guess there is a border between 2500px and 1800px because of suddenly changing a gap between the mobile phone and tablet.
And there is a border between 1800px and 1300px. It can be checked from changing arrangement of sentences which was in two column. Two images such as the mobile phone and tablet are designed to go near with each other and the tablet gets order of priority. It can be confirmed at an image in almost 800px. There is an additional border between 800px and 600px. The only tablet is shown and it’s slope is changed. At this time, it looks same image comparing before and it change its degree at 600px.
In the first capture, you can an image including the keyboard, mobile phone, tablet and note. The keyboard and note in the edge is background image. And mobile phone and tablet are each image. Through comparison the first capture and second capture, I can guess there is a border between 2500px and 1800px because of suddenly changing a gap between the mobile phone and tablet.
And there is a border between 1800px and 1300px. It can be checked from changing arrangement of sentences which was in two column. Two images such as the mobile phone and tablet are designed to go near with each other and the tablet gets order of priority. It can be confirmed at an image in almost 800px. There is an additional border between 800px and 600px. The only tablet is shown and it’s slope is changed. At this time, it looks same image comparing before and it change its degree at 600px.
By this time, we have looked into a responsive web design with an example of the site ‘google web designer’. Although It can be felt hard, you can use this solution easily because so many enterprise give free responsive templets.
<Connect to orignal page(korean)>
[출처] 반응형 웹디자인? - 구글웹디자이너 페이지를 통해 알아보자.|작성자 gungs
