Why Responsive Web Design?
Been lately? At one site in the PC, then displays it beautifully easy to use, but when I went to open the website. Found that mobile usage is quite difficult. Because the literal as well as photos smaller buttons are small and hard to press. I also have ads What an eyesore or Galore everywhere.But first, we will solve this problem by creating a website up another version tomorrow. In this version Be designed to be easily used on devices with small screens. Including cutting materials Unnecessary Left, but the User wants to use it, but this method has drawbacks. Cost increases It also requires the development time increases as well.
Responsive Web Design is an alternative one. To develop a website that is gaining popularity as this. With the aim to "make the most user-friendly User" by Responsive Web Design has many advantages to using a single source code, saving time and cost. But you can adjust the display. To fit different devices Is incredible
Responsive Web Design question is, why did it not? Responsive Web Design is a simple answer that the technique, which shared many of these techniques. If a single It could do no more. But it came together then. To create something new, called Responsive Web Design to it.
Okay, now everyone would know more Responsive Web Design And then we had to do it. I will summarize the process of making a Responsive Web Design is gradually try to understand and follow how it works.
One. Designed to be simple
If you do Responsive Web Design The first thing to take into consideration. Keep your site design simple best. What cuts Or unnecessary Do not enter into a Flash or Effects (such as Parallax, etc.) as well as writing clean html to the html elements that need to be written specifically with the style sheets is to use an inline or offline.In this step, we need to understand the Business or Management too many people know just how to make a website Responsive Web Design is good but in Devices and its limitations. Expects it will have to do that too. I like this We must deal with them before. I explained to him I told him that this part done. This part I do not What about where it says to me.
Have already agreed on Let us think of all content items We intend to enter into our website, at this point we will not worry about it. That this section I want to display on devices after all the content item. Let us write a paper on the topic of content onto the post - It's me.
Two. Began with small screen first.
Well, now we know that. We need a simple design as much as possible. We also have a list of all content. That needs to be put into our next step, we began to design for the smallest screen before (. Mobile-First ) This step is very important. That is the foundation of our website at all. The difficulty of this process is exactly that. People tend to stick a picture of the design for the PC on which I do not recommend starting design for the PC before it will allow us to write code more difficult. And is likely to result in duplication of code over it.Simple technique of this procedure is that we do not forget the PC to do it. The focus then turned to the small screen. Width of about 300px I imagine that the small screen size, we should design User Interface User how to make the most use. Anything that is not necessary, do not wear it for advertising, etc. The procedure is quite difficult and very challenging. We meticulously as possible.
I recommend you a design that is simple to draw a rectangular one up as well on paper to a width width. iPhone4 (5 × 7.5 cm) on the paper Let us try post - NF. We have prepared written content. Let's put it on the frame. Then try to imagine ourselves as users who do not access this website before. The positioning of this content. We understand it Easy to use it We adjust until satisfied. Details on this process I wrote explained in the article ". was learning to use the Wireframe is today. "on
When we sketch the appearance of a website on a small screen, and then we proceeded to write html on this stage we do not have to look to the images we hold it. But let us suppose that it contains what. We'll put it on the screen. Let us write the html here.
When we try to html, then the review, we will see that our content is written. We see that the sequence And featured It is reasonable to adjust it if before this step, remember to think about. Sectioning content and Document Outlines too
Let us write the html based content with what we have prepared. Also, regardless of the display.
3. Relative sizes
When html okay then later let us write style sheets to html that we wrote on this procedure, we see that we outlined here then write style sheets to preview it looks as outlined on stage. We must take into account the story. Is to determine the size of things. We have assigned a relative, that is, to set the size in relation to what is the side there.The first thing we need to set a relative layout that it is known that the Fluid Layouts which is to define the layout and the width in units of% is not a fixed pixel as before.
Many people would have had on the box model right? Let your website have 2 columns and set the width to 60% and 40%, respectively, if we set the margin or padding out the result is the width. 2 columns are combined, exceeded 100% solve this problem by putting the CSS Rule below it.
1
2
3
4
5
|
* {
-Webkit-box-sizing: border-box;
-Moz-box-sizing: border-box;
box-sizing: border-box;
}
|
Another thing that should determine the size to be a relative was the font that a small set of font that body to be 100%, which makes the size of the font in the element contained in the body is 100% if we want to determine the size. the font of an element is special to us using em on, which units of em, this means the number of times their size will inherit that which now we have set as 100%, we have that if we define the size is 2 em would font. 200% sure enough
Used to determine the relative size instead of fixed size in pixel.
4. The Breakpoints then write the Media Queries.
Now if we take a preview look. Width of about 300px image we want to see is the display of the User to use the most easily Let us try to extend the viewport of 300px steadily on with that, we set the size of things such as a relative, even us. be extended to a larger viewport elements. Will continue to perform well on one level. But if we add up to me. Found that the width of this size. We can adjust the various elements To make it easier to use. Or appropriate to We call that point the Breakpoint us to use Media Queries to the style sheets for Breakpoint, then in order to adjust the display to fit exactly as we want it then we increase the size of the viewport and then find Breakpoint next. do this indefinitely Satisfied until we reach it. Details on this process I wrote explained in the article ". know Breakpoints in Responsive Web Design. "on
The design of the screen, the smallest first, then find breakpoints by gradually increasing the size of the viewport gradually.
Item 5. Viewport Meta Tag
This process is very simple, but first, let me explain why we need to configure the default settings of the viewport with viewport meta tag before about it is that the pixels it has 3 types together is Physical Pixels, CSS. and Device Pixels PixelsPhysical Pixels is the number of pixels that the spec of the Device that I like the iPhone4 iPhone3 equal to 320 × 480 to 640 × 960 and so on.
The CSS Pixels pixels will be used in CSS declarations, let us define it.
width:320px or font-size:16px pixels
This section refers to the CSS Pixels on CSS Pixels which normally
would have cost if we do not Physical Pixels Zoom Zoom on the screen,
but if we do, we will observe that. The picture is enlarged
This is because web browsers are CSS Pixels to extend to large enough
on the other hand, if we CSS Pixels Zoom out, it will be smaller. Resulting image is smaller here.
This is the same principle as changing the Resolution of the screen, PC
screen, it Assume we have a Physical Pixels Resolution is 1280 × 1024
1024 × 768 If we change what change is CSS Pixels itself. 
At the Zoom 100% CSS Pixels to equal Physical Pixels.
If we CSS Pixels Zoom is smaller, Physical Pixels.
If we CSS Pixels Zoom out to be larger than Physical Pixels.
Finally Device Pixels on Device Pixels Pixels is a model that will allow application to set the size of the various components. Have met the appropriate in view of the user. This value is not added by Physical Pixels but to increase the size of the screen (Screen size) here. Assuming the device has a screen size of just 5 inches, but the Physical Pixels height to 1280px, which, as well as desktop ever, as I said before, that CSS Pixels is equal to the Physical Pixels at the Zoom 100% that means. If we do that by providing responsive web-based viewport CSS Pixels and what it looks like when it is displayed on the desktop despite its small screen just five inches.
This problem can be solved simply by Device Pixels that we use to change the viewport meta tag viewport based on device-width instead turned to writing code like this.
1
|
<Meta name = "viewport". content = "width = device-width, initial-scale = 1.0" />.
|
6th. Checks with really Devices
I came to the last step. That is bringing the sites we have done. Try to open the Devices that some people might wonder why I recommend doing this step is the last step. Why not to pour to you? Doing so will not need to taste to it. If we are planning to work very well. If your friends Understand the steps I have described it. Then follow it thoroughly then. Our website will look beautiful in every Devices automate it. Why is that? At the heart of its success is in step 3 and 4 am in step 3, we have determined the size of everything is relative to the size of the various components. Automatically adjusts to the size of the viewport in step 4, we have set breakpoints by looking through our main content. We start from the smallest first, then gradually increase the size of the viewport, bit by bit I found the width at the point where we want to be. We define that point as breakpoint and then write media queries to adjust the style sheets in this process, although we did not pour the devices really do, but it can be displayed sensibly in all devices automatically because something different. individual devices is the size of the viewport itself.When told that it will work on devices automatically, then why still need to check again? Because things are different in each devices do not have a viewport on the differences in the os, browser, including restrictions on individual devices may be different in this respect we still have to check with. devices really exist, but may choose to only target devices that are primarily offline.
This really is both equally a very good information when i rather definitely preferred verifying. This may not be at all times i always get likely to see a challenge. graphic design
ReplyDelete