Couple feature ideas inspired by Responsive Web Design techniques

[Ozten]

Background:
With Responsive Web Design, developers/designers are starting to figuring out more strategies for CSS[1]. Our tools should make this easier.

Basic Ideas:
1) Inspecting a page should have an overlay of page layout. "hard
boundaries" and "flexible boundaries" imposed by structural CSS. This
is like what a designer adds in a layer of a PSD mockup to explain how
to bulletproof an element for content overflow. These purple lines are
hard boundaries and won't change. This element can expand to the right
and down… it's right and bottom boundaries have a green border.

2) Every element should have a resize handle, so you can see how
bulletproof an element will layout. What does it do in a really wide
space, narrow space, etc. This, combined with Aurora's ability to do
media queries when resizing the entire window, would be a fast way to test
Responsive designs.

3) (Controversial) Best practices with CSS for responsive design guide
developers to have Structural CSS, with no content styling. We should
provide a list of warnings…
WARN .email-blurb has both structural and presentation styling on the
same element in the same rule.. Consider breaking them apart.

thanks,
ozten

[1] https://github.com/csswizardry/CSS-Guidelines/blob/master/CSS%20Guidelines.md

[Rob Campbell]

Hey Austin,

Thanks for the ideas. A few comments inline.

On 2012-03-19, at 6:18 PM, Ozten wrote:

> Background:
> With Responsive Web Design, developers/designers are starting to figuring out more strategies for CSS[1]. Our tools should make this easier.
>
> Basic Ideas:
> 1) Inspecting a page should have an overlay of page layout. "hard
> boundaries" and "flexible boundaries" imposed by structural CSS. This
> is like what a designer adds in a layer of a PSD mockup to explain how
> to bulletproof an element for content overflow. These purple lines are
> hard boundaries and won't change. This element can expand to the right
> and down… it's right and bottom boundaries have a green border.

We've certainly been talking about some layout overlay ideas ourselves. The highlighter has the potential to provide different surfaces that could show rulers, measurements and boundaries of layout elements.

Lots of different possibilities.

Even something along the lines of "guides" in the photoshop sense would be nice to have for designers to cut up their page.

> 2) Every element should have a resize handle, so you can see how
> bulletproof an element will layout. What does it do in a really wide
> space, narrow space, etc. This, combined with Aurora's ability to do
> media queries when resizing the entire window, would be a fast way to test
> Responsive designs.

That's an interesting idea, but I'm not sure it makes sense to have them on every element. Certainly some containers could be useful. Might be a fun experiment.

Would it make more sense to make the content area independently resizeable from the Browser window? Paul Rouget did an experiment with this and it looked promising.

> 3) (Controversial) Best practices with CSS for responsive design guide
> developers to have Structural CSS, with no content styling. We should
> provide a list of warnings…
> WARN .email-blurb has both structural and presentation styling on the
> same element in the same rule.. Consider breaking them apart.

Yeah, I think there's a place for these types of tools. We haven't really done much in the area of reporting and diagnostics like this.

Thanks!

~ rob

[Kevin Dangoor]

Thanks for the feedback! I have a couple of comments beyond what Rob has
already said.

On Mon, Mar 19, 2012 at 6:18 PM, Ozten <aust...@gmail.com> wrote:

> Basic Ideas:
> 1) Inspecting a page should have an overlay of page layout. "hard
> boundaries" and "flexible boundaries" imposed by structural CSS. This
> is like what a designer adds in a layer of a PSD mockup to explain how
> to bulletproof an element for content overflow. These purple lines are
> hard boundaries and won't change. This element can expand to the right
> and down… it's right and bottom boundaries have a green border.
>

Someone I spoke to recently suggested that it would be nice to be able to
see (in the highlighter view) how the other elements in the same container
affect the layout of the selected element.

I totally agree that providing some kind of view that shows how the layout
of elements relate to each other.

>
> 3) (Controversial) Best practices with CSS for responsive design guide
> developers to have Structural CSS, with no content styling. We should
> provide a list of warnings…
> WARN .email-blurb has both structural and presentation styling on the
> same element in the same rule.. Consider breaking them apart.
>
>

I agree with providing higher-level, actionable assistance to developers.
For example, I proposed a possible Summer of Code project for cross-browser
issue detection, which is a huge area for web developers to deal with.

Some of these higher level features start raising the question of what we
want to ship in-product and what we want to leave in the domain of add-ons.

Kevin


--
Kevin Dangoor

work: http://mozilla.com/
email: kdan...@mozilla.com <k...@blazingthings.com>
blog: http://www.BlueSkyOnMars.com