RE: Wire Frame for the web site

Okay, now I feel stupid.  It's clear from the context that web framing is a
matter of typical page layout.  I had it in my mind as a flow chart/site map
sort of thing.  Do we have an Information Architecture scheme for our site?
That's the question in which I was more interested.

David R. Herz
wpd@theherzes.com

-----Original Message-----
From: Chris Mills [mailto:cmills@w3.org] 
Sent: Tuesday, April 23, 2013 5:23 PM
To: wpd@theherzes.com
Cc: public-webplatform@w3.org
Subject: Re: Wire Frame for the web site

On 22 Apr 2013, at 14:46, "David R. Herz" <WPD@theherzes.com> wrote:

> I have been looking, not very hard I will admit, for how I set the 
> width of my web page.  I have been wandering the beginner stuff, the 
> HTML, the CSS, and then I arrived at the Planning a website page.  It 
> suggests that the normal process behind planning a website is 1. 
> Having the idea (we've got
> that) and 2. Wireframing the site's layout.  Do we have a wireframe 
> model that I can view, especially for the beginner side?

I will be adding this to the beginner's article series, for sure. 

There is a wireframe model at
http://docs.webplatform.org/wiki/concepts/wireframing_a_site

The basic concept is that you would design a site as a wireframe of some
kind. At this point, you would choose a width for your layout, either a
fixed width (such as 1024px wide for desktop, 480px for mobile, etc.) or a
variable width (such as 90% of the browser window width.) This is more
complicated than it used to be because of the variety of devices we now have
to view the web. This is the foundation of so called "responsive web design"
- making a single sit that will adapt its layout for display on different
devices. But I'll leave that there for now, and just concentrate on your
original question.

When you have chosen a width to make your site (let's just say 1024px for
now, to make the discussion easier), you will then create your site inside a
container element that is 1024px wide. This could be the <body> element, or
it might be a container elements such as a <div>, depending on your
circumstances. I mostly just use <body>.

In your CSS, you can set the width like this:

body {
  width: 1024px;
}

> 
> Also, I would like to suggest an index that might be more intuitive 
> for a beginner.  We have an "Index of all HTML topics," but when I 
> look there, it is not clear to me where I can find information for how 
> to set the color of my text, the width of my page, or even something 
> as simple as a first line indent on my paragraphs, or justification of 
> my text.  When I search for justification, I get a dictionary 
> definition, but am in no way pointed to how I would actually justify my
text.

Ok, so a much more granular index of typical tasks. This could be useful
yes. I agree that we need to also sort out the organization of the articles
in general.

Received on Tuesday, 23 April 2013 16:56:51 UTC