Page 1 of 1
complex responsive design
Posted: Tue Jan 07, 2014 1:34 pm
by sumpson
Hello everybody,
I am trying to achieve the kind of design as you see in the the following image:
As you can see some of the elements go all the way trough to the sides which makes it quiet complex.
Would it to be possible to create this in a kind of fluid responsive design where all elements scale when window scales or will I have to check and fix on all different sizes with a design like this?
I don't have much experience with responsive webdesign, suggestions are very welcome!
For those interested in the actual design:
Re: complex responsive design
Posted: Tue Jan 07, 2014 3:50 pm
by JohnnyB
Would it to be possible to create this in a kind of fluid responsive design where all elements scale when window scales...?
Yes
...will I have to check and fix on all different sizes with a design like this?
Yes
The Responsive design/development process is not really much different than what we used to do. Responsive doesn't mean that the default layout will always look the same for all browsers on all devices (mobile/desk). It is a fluid/elastic approach using media queries and server-side negotiation to present content (
http://en.wikipedia.org/wiki/Responsive_web_design).
Re: complex responsive design
Posted: Tue Jan 07, 2014 5:57 pm
by sumpson
I have found allot of examples of responsive grids for example here:
http://bradfrost.github.io/this-is-resp ... terns.html but I don't know how to approach a fluid grid with some fields extending all the way to the sides and some blocks not. do you have an idea on how to approach this?
my concerns:
was thinking of the red block, would have to test if this works but id rather not have body overflow-x hidden
Re: complex responsive design
Posted: Tue Jan 07, 2014 6:14 pm
by JohnnyB
was thinking of the red block, would have to test if this works but id rather not have body overflow-x hidden
Instead of using float for it, try using display: inline-block.
An alternate technique is to use display:table on a containing div and then set the red block as a display:table-cell.
Be sure to set vertical-align: top, bottom or middle for the div regardless of which display technique being used.
I don't know how to approach a fluid grid with some fields extending all the way to the sides and some blocks not
I usually set smaller blocks inside of containers that have full, 100% width. Then you can float, or use display: inline-block to arrange them with their needed width % or em.
If the smaller box sizes will be unknown or vary as the browser size changes, you can try to implement a flex-box approach. It was kind of fun working this out for a client:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Re: complex responsive design
Posted: Tue Jan 07, 2014 6:38 pm
by sumpson
Thanks for your help! I think I found a way to fix it with the display:table; and display:table-cell; I found this example on the web about it:
http://jsfiddle.net/Autodealers/266PG/
I will definatly take a look at the flexbox approach tommorow! looks interesting.
I just checked the table-table-cell compatibility and it seems it is not supported by IE 7 or lower. I was thinking is there an easy way with javascript to detect the width and show it as an inline width?
found something like this, not really sure it would work and how to implement it but it might be very good?
Code: Select all
var layout = {
init: function() {
layout.sidebarAutoSizing();
$(window).resize(function() {
layout.sidebarAutoSizing();
});
},
sidebarAutoSizing: function() {
sidebar_fill_width = $(window).width() - 914;
if (sidebar_fill_width % 2 == 0) {
sidebar_fill_width = sidebar_fill_width / 2;
} else {
sidebar_fill_width = (sidebar_fill_width-1) / 2 + 1;
}
$('#sidebar').css('width',sidebar_fill_width);
}
}
Re: complex responsive design
Posted: Tue Jan 07, 2014 7:17 pm
by JohnnyB
You can try to patch things up in IE 7 and older with Javascript, but to save aggravation and client side resources, I would just throw IE7 something it can chew on.
Set up an IE7 only stylesheet that floats those blocks instead of using the css3 table-cell stuff. It won't harm your 'responsiveness' since only IE7 will be served the alternate css rules.
BTW, To fix any display:inline-block rules for IE7, you will need to send IE7 the following:
div {
display:inline;
zoom:1
}
(zoom is only for IE)
Re: complex responsive design
Posted: Wed Jan 08, 2014 10:48 am
by sumpson
thanks allot johny (y)
Re: complex responsive design
Posted: Thu Jan 09, 2014 12:26 am
by applejack
Re: I just checked the table-table-cell compatibility and it seems it is not supported by IE 7 or lower.
You have go to be kidding right. Why on earth are you trying to make responsive design work on IE7 and < when there are NO mobile or tablet devices which use these browsers. You can quite easily create a IE7 and < site which works on desktop for those but forget about them working responsively for them.
Unless you really really need to for a very good reason drop anything less then IE8 for all platforms as the user base is so low or maybe you are in China.