Converting a fixed layout for seamless

If all users to access our site with browsers whose windows were all the same size would be an almost perfect world and the developer could have a perfect control of your layout.

But we know that our reality is quite different, Long ago I gave up to the developer to “cheat” and create websites with a standard size such as 640, 800, 1024 pixels. But doing so has always been an illusion, and I say this even before we think of mobile devices.

Responsive layout – Improved Progressive

The big secret is to make fluid layouts, setting aside – not entirely – the pixel unit. In its place we work with proportional units (percentages).

An important note a layout to be considered responsive besides having a fluid layout you must use images and flexible media and also the media queries .

Converting into practice

Take a look at the example of the layout below. We use it as a reference for converting to fluid.

layout-fixo-para-fluido

Formula fluid layout

como-converter-layout-para-responsivo

To convert a layout that is based on pixel and is proportional fluid use the following formula:
Goal / Context = Result

Applying the formula

Let’s take a look at how we can apply the formula in our sample layout.

We will base our proportions in a size, in this case 960 pixels wide. Our reference layout has this size. It would be the maximum size of our layout. Everything within it is proportional.

If we look at our layout realized that the header and footer occupy the entire width of the layout, i.e., they extend the full width of the layout. It soon becomes very easy to see the result of the application of our formula. See:

960/960 = 100% (1)

The columns of the left and right are 240 pixels wide within 960 Total pixels. For us to get a proportionate measure we use the same formula, just changing the values. See:

240/960 = 25%

The calculation is quite logical. We realize that the columns extend a quarter of the width of our page, just the proportional value is 25%.

Now we will convert the center column of the page. In the example we take into consideration that it is positioned without being floated. Its positioning is done with banks, then your CSS would be:

#main {margin: 10px 0 250px 250px}

The 250px values ​​on the left and right are used to match the center speaker in the middle of the two columns. Now we have to convert these values ​​to share. The formula with its result is:

250/960 = 26.0416667%

The CSS rule looks like this:

#main {margin: 10px 0% 26.0416667 26.0416667%}

In the above examples it seems that we will always divide the total amount of the page. But often the context changes. For example look at our layout columns of 220 pixels.

In this context the division would not be 220/960. The result would be 22.9166667% of its parent element (element with 460px) By doing this we are telling the browser to render about 23% 460.

Note that now we want to let the elements in proportion to the central element that has 460 pixels, so the correct formula would be:

220/460 = 47.826087%

In the latter fixed conversion fluid sample to note that we use the layout of the context element in our formula, the context here is the element 460 pixel where the other two elements 220 pixels were within.

See the layout with the measures as a percentage.

layout-fixo-para-fluido-resultado

Conclusion

In this quick tutorial I wanted to show an example of how to convert a fixed layout fluid. The secret is the formula target / context. This is what I need to have a responsive layout? no. This is only the first pillar to have a responsive layout quality.

109 Responses
  1. Converting a fixed layout for seamless – Karachi | Mobile
    App, WordPress, Magento, Ecommerce Developer
    Howdy! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly? My blog looks
    weird when viewing from my iphone. I’m trying to find a theme or plugin that might be able to fix this problem.
    If you have any suggestions, please share. Thank you!

  2. My husband and i ended up being very happy when Raymond managed to complete his analysis through the ideas he acquired from your very own web page. It’s not at all simplistic just to be giving for free thoughts which people may have been trying to sell. And we discover we have got the website owner to give thanks to for that. The specific explanations you made, the simple site navigation, the friendships you aid to create – it is most overwhelming, and it’s aiding our son and our family recognize that this topic is interesting, which is unbelievably pressing. Thank you for all the pieces!

  3. I as well as my guys were reviewing the great points located on your website and then suddenly came up with a horrible suspicion I never thanked the web blog owner for those strategies. My ladies are actually as a consequence stimulated to read them and already have very much been taking advantage of them. Many thanks for turning out to be quite helpful as well as for obtaining some terrific things millions of individuals are really wanting to discover. Our honest apologies for not expressing appreciation to sooner.

  4. Some things are inevitable. This proverb specifically refers to a couple that seems destined to marry, even if it takes a long time.
    There is no point in wasting emotion over something that has already happened and can’t be changed.

  5. This is another proverb that means exactly what it says. Don’t live with regret because you thought the opportunity would come again.
    A person who does not settle in one place cannot gather possessions, wealth, status, or commitments

  6. Eggs are extremely delicate, and not all of them go on to become chickens. Don’t act on the assumption that you have something before actually do.
    If you perceive criticism in something that was not directed at you, you shouldn’t take offense because you deserve it.

  7. Some things are inevitable. This proverb specifically refers to a couple that seems destined to marry, even if it takes a long time.
    There is no point in wasting emotion over something that has already happened and can’t be changed.

  8. It’s important to look back at your roots and show gratitude to those who came before you. It is because of them that you are where you are today.
    Health is one of the most valuable possessions. Treasure and protect it.

  9. I happen to be commenting to make you understand of the outstanding encounter my cousin’s princess found viewing your site. She mastered a good number of issues, not to mention how it is like to possess a marvelous giving mood to have men and women smoothly gain knowledge of several problematic issues. You truly surpassed her expected results. Thank you for giving the precious, trustworthy, explanatory and also cool thoughts on your topic to Tanya.

  10. I simply needed to appreciate you once more. I am not sure the things I might have worked on in the absence of the actual solutions discussed by you regarding this subject matter. It seemed to be a very fearsome circumstance in my opinion, however , taking a look at a new professional avenue you dealt with it took me to leap for contentment. I am grateful for the service and even pray you comprehend what a great job you are providing teaching the others through the use of your blog. More than likely you have never encountered all of us.

  11. A lot of thanks for each of your labor on this web page. Debby take interest in setting aside time for investigation and it’s obvious why. I know all relating to the lively tactic you create useful tips on your website and in addition increase participation from people on the situation plus our princess is really starting to learn a lot of things. Enjoy the rest of the year. You are carrying out a wonderful job.

  12. I am also commenting to make you be aware of of the useful experience my friend’s girl undergone using your webblog. She picked up plenty of issues, with the inclusion of how it is like to possess a very effective teaching nature to make other individuals really easily completely grasp a variety of tricky matters. You really did more than our expected results. I appreciate you for showing the necessary, safe, edifying and even fun guidance on the topic to Emily.

  13. Do you mind if I quote a few of your articles
    as long as I provide credit and sources back to your site?
    My blog site is in the exact same area of interest as yours and
    my visitors would really benefit from a lot of
    the information you provide here. Please let
    me know if this ok with you. Regards!

  14. Just desire to say your article is aѕ amazing. Tһe clearness іn ʏour post іs simply cool and i cоuld assume уοu’re an expert on tһiѕ subject.
    Fine wіtһ your permission allօԝ me to grab үour feed to қeep up to dɑte ᴡith forthcoming post.
    Тhanks a miⅼlion and pleɑse кeep ᥙp the enjoyable wߋrk.

  15. Converting a fixed layout for seamless – Karachi
    | Mobile App, WordPress, Magento, Ecommerce
    Developer
    A motivating discussion is definitely worth comment.
    I think that you ought to write more about this topic, it may not be a taboo matter
    but generally people do not speak about these issues.
    To the next! Kind regards!!

  16. Please let me know if you’re looking for a article
    author for your weblog. You have some really good posts
    and I think I would be a good asset. If you ever want to take
    some of the load off, I’d love to write some content for your blog in exchange for a link back to mine.
    Please send me an e-mail if interested. Regards!

  17. Fantastic blog! Do you have any tips and hints for aspiring writers?
    I’m hoping to start my own website soon but I’m a
    little lost on everything. Would you recommend starting with a free platform like WordPress or go
    for a paid option? There are so many choices out there that I’m totally confused ..
    Any suggestions? Many thanks!

  18. Pretty element of content. I just stumbled upon your site and in accession capital to assert that I get
    actually loved account your blog posts. Anyway I’ll be subscribing to your feeds or even I achievement you get entry to consistently rapidly.

  19. My partner and I absolutely love your blog and find many of your
    post’s to be what precisely I’m looking for. Do you
    offer guest writers to write content for you personally?
    I wouldn’t mind writing a post or elaborating on a few of the subjects you
    write in relation to here. Again, awesome blog!

  20. Have you ever considered about including a little
    bit more than just your articles? I mean, what you say is valuable and
    all. Nevertheless think of if you added some great
    visuals or videos to give yoiur posts more, “pop”! Your content is excellent but with images
    and video clips, this website could definitely bbe one of the best in its field.
    Fantastic blog!

  21. My programmer is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a number of websites for about a year and am worried about switching to another platform.
    I have heard very good things about blogengine.net.

    Is there a way I can transfer all my wordpress content into it?
    Any help would be really appreciated!

Leave a Reply

Optimized with PageSpeed Ninja