A Question for the Expert Web Designers Here

[radderfire]

Hi Guys

Please take a look at this page:

https://www.sitepoint.com/ux-designer-actually/

My question is how would you fundamentally structure the layout of this page to make sure that the intersection point between the green title rectangle, black rectangle with e-mail sign-up, white rectangle containing body text and grey rectangle containing ads, always lines up perfectly? I could think of ways to do this, e.g. two column div layout, but they risk that intersection point becoming misaligned.

Thanks

 

[kaku]

I may not be understanding the question correctly; are you asking how they actually did it, or are you saying there is some problem with their method where it breaks under certain circumstances?

If you want to see their actual method, the Chrome Dev Tools are really good. The general gist is - there are two rows laid out using flexbox: the "header" row (title/newsletter) and the "body" row (article/recommended). Their flexbox setting allows the main content to grow whilst keeping the side content at a fixed width (flex-basis/flex-grow).

 

[radderfire]

Yes I was asking how it was done. I am familiar with responsive design techniques using divs and colums, but not the flexbox technique. With traditional designs I thought there was the possibility that the design would become misaligned at the intersection point. However, if it's flexbox, that answers it.

Is CSS3 now accepted for production websites? i.e. there's no issues with older browser compatibility? If so, then I guess it's another thing to learn.

Thanks

 

[McBain]

In short, older versions of IE won't support a lot of CSS3 (most?).

IE8 doesn't support flex, and it's limited in IE11. You would need a fallback.

Whether CSS3 is accepted for production sites, I guess that would depend on the project and the support scope. I tend to aim more towards graceful degradation and accept that older versions of IE will not display rounded corners and the likes.

Check http://caniuse.com for specifics.

 

[Cern]

In short, older versions of IE won't support a lot of CSS3 (most?).

IE8 doesn't support flex, and it's limited in IE11. You would need a fallback.

Whether CSS3 is accepted for production sites, I guess that would depend on the project and the support scope. I tend to aim more towards graceful degradation and accept that older versions of IE will not display rounded corners and the likes.

Check http://caniuse.com for specifics.

Let's be frank, older versions of IE are rapidly becoming a non issue. See here.

Obviously it does depend on the target audience of the site you are building. But generally speaking there are now more site visitors viewing on mobile devices than desktops. And of those on Windows-based desktops, the amount using something older than Windows 7 is dwindling quite fast because of Microsoft's somewhat pushy attempt to get everyone using Windows 10. And besides, Chrome and Firefox have for some time now been more dominant than IE anyway.

And even with those stuck using XP or Vista, savvy users have the option to use more up to date versions of Firefox or Chrome. So there's really no excuse to be stuck using IE8 and wondering why all boxes are rectangular

I think it's pretty safe to say that production sites should be aiming for CSS3, HTML5 and responsive design these days. Obviously try to be as backwards compatible, standards compliant and accessible as possible, but no need to fear these newer technologies and standards because of a tiny minority of users who are stuck in the past. You're more likely to be downranked by Google because your site isn't "mobile friendly" than you are because you don't support ancient browsers.

 

[McBain]

Let's be frank, older versions of IE are rapidly becoming a non issue. See here.

And even with those stuck using XP or Vista, savvy users have the option to use more up to date versions of Firefox or Chrome. So there's really no excuse to be stuck using IE8 and wondering why all boxes are rectangular
.

Can't say I disagree, good luck talking some clients round to that way of thinking.

A recent, rather large Telecoms company actually wanted support for IE6, because some of their **** internal systems would only work on IE6.

IE8 is a pain, but compared to IE6 it's a godsend.

 

[radderfire]

Thanks guys. I took a look at the flexbox last night and it does look like it might be a useful alternative technique.

Yes it is definitely good to see those old versions of IE dwindling away!!

 

[Cern]

Can't say I disagree, good luck talking some clients round to that way of thinking.

A recent, rather large Telecoms company actually wanted support for IE6, because some of their **** internal systems would only work on IE6.

IE8 is a pain, but compared to IE6 it's a godsend.

Yep, it does depend who your target audience is and whether legacy support is a big issue or not. But for general purpose sites (i.e. stuff that Joe Public is going to be visiting) then I think it's safe to move forwards with CSS3, HTML5, responsive design etc.

This doesn't have to mean sites should be unusable on legacy browsers, just that certain compromises need to be accepted - as you say, "graceful degradation".

Let's face it, a major Telecoms company using IE6 in 2016 is a disgrace. And then they wonder why they get hacked, lose confidential data and expose their customers to risk.