Is there a particular responsive layout that is best?
This seems to be the last area which makes me hesitant to build a responsive page/site…
What does this question mean? Each page will require a unique approach.
There is not a one size fits all, in terms of how pages will be responsive.
Is this another one of your “read between the lines” questions?
I thought there were like 4-5 different approaches you could take to how your adapt your web page content as the viewport gets smaller?
(I’m still learning this part.)
As I recall, one simply collapses content onto itself - sort of like taking 3 building blocks wide and then stacking them vertically.
I’m not familiar with the other approaches yet. I think one is called “flexbox”?
Is the sarcasm extra, Ryan, or do I get it free for today?
Well, there are tons of ways depending on how you want to present your page on mobile. The normal way is to just stack the columns, perhaps turn the menu into a hamburger menu.
That’s overly simplistic though. If I saw a design, I could tell you my vision for it being mobile. It really will vary depending on what you want to do for mobile, and how the page is set up.
The very simplest form of layout would be a single column or block of content that would squeeze to any width.
Though you have already stated a preference for multi column layouts. Yes, you can squeeze the columns so far, until they get uncomfortable, then you will have to stack them. There is the option to hide secondary content in rollouts. We have already been through all this in another thread.
There are a number of methods for handling grid/column layouts:
There are Floats, an old method, not strictly a grid/column layout, but puts things on one side. Then when things get tight, media query, float: none; you can then make it width: 100%; or margin: 0 auto; to centre it.
display: table; can give you a grid or column layout, emulating a html table, but maintaining good semantics in your html by not using <table> tags where it is inappropriate. You can alter this layout for smaller screens by switching to other display modes, the possibilities are too many to mention.
There is Flex box, which is fairly new and very powerful, again the possibilities of what you can do are more than I have patience to write. But it allows you to switch between row and columns and re-order the flow.
I also read about something called Grid, which is a bit like fexbox and quite new. It is not at present well supported, so I would hold back on that for now.
Another one for columns is css columns. Different in that the columns are not separate elements, but a continuous block that flows from one column to the next, rather like newspaper columns. For responsiveness, you can explicitly sate, for example, 3 cols, the have a media query stating 2 cols, then for the smallest screens another stating 1 col. Or you can set a column width, and it works it out for you.
There may be other methods, but I can’t think of any right now.
Your content dictates and defines your layouts, in all screen sizes. NOT the devices.
What’s best for one page may not necessarily be for another. Each page, each element needs to be addressed to make it ‘respond’ appropriately to a specific screen real estate or user input or flow condition.
As @RyanReese said, “There is not a one size fits all”.
Stop being hesitant and get to building something responsive. My recommendation is: stop wasting time trying to find a holy grail for RWD when there is none.
The term is “Flexbox” not “Flex box” BTW.
Flexbox is awesome and support is amazing (http://caniuse.com/#search=flexbox). However, IE10 can give you a hard time if you decide to use Flexbox for layout. However, don’t let that stop you from trying. Ever.
1 Like
My concern is, I said something similar over a month ago.
Why be hesitant? Nobody ever died doing it (AFAIK).
Set your self a project to create a site, for example, your own site (which, as discussed, you will need). It does not matter if it does not work perfectly straight away if it’s your own off-line project for now, no one gets hurt. The only way you you will learn is to DO IT.
Going back the original question. Are you asking which layout, or which method to create the layout?
Q. Which layout? A. The layout you want.
Q. Which method? A. more loaded question. It will depend on the layout you want, how you want it to respond to smaller screens and the level of “old browser” backward compatibility you require.
Step 1, Consider your content.
2. Plan how to best layout and navigate that content.
3. Plan how that layout will adapt to a smaller screen.
At this stage you can choose the most suitable layout method: float, display-table, flexbox, ect…
4. Get Coding and make it.
Paralysis by Analysys is alive an well.
3 Likes
Just had a (newly hired) coworker fired due to him not doing anything for 3 weeks (unless you count including a logo in the code), and instead spent the time studying the CMS / the minor details of the workflow. 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.