New site for MA Publishing course (uses WebYep and Blogger)

Freeway
1

I’ve just been given the go-ahead to remove the access restriction on
the site I’ve put together for the MA Publishing course at the London
College of Communication:

http://www.ma-publishing.com/

Feedback is welcome!

Here are some points I’m particularly pleased with…

  • Flexible layout:
    The structure is intended to flex to fit any reasonable screen size.
    It does show holes if you drag it to fill absolutely massive screens
    or squash it to particularly small sizes, but it should work well on
    all normal display sizes.

  • ‘Client’-editable content:
    The site’s content is editable by all five staff members of the MA
    Publishing course, thanks to WebYep and Max’s WebYep actions. This is
    a fantastic tool; it means I can carry on working on the Freeway
    layout structure while others get on with adding the page content.

  • Integrated blogs:
    There are also two blogs ‘integrated’ into the site design, one as a
    regular blog and the other as a news and announcements page. (I
    wanted to keep the blogging side of things as a more personal area
    than the page with generic announcements.) These were made using
    Freeway 5’s Blogger template construction feature, and the navigation
    simply links to the blogspot.com URLs as required.
    http://magsandbooks.blogspot.com/
    http://mapublishingnews.blogspot.com/

  • Transition effects:
    I also used Freeway 5’s Transition features. The home page slides the
    main content down (this was by popular demand from my colleagues),
    and the right-hand sidebar fades in on page load - hopefully just
    enough to attract a little attention but not so much that it gets
    annoying. :slight_smile:

There are a few rough spots to deal with still, and the content is
also still being amended. But thanks to Freeway and WebYep the
process has been simple and the structure remains fuly editable.

BTW, on the staff page - http://www.ma-publishing.com/staff/ - you’ll
find the only pic of me that I allow for this sort of thing…

Hope y’all like it!

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Overall it looks good. You might be able to solve the expansion problem at the top If you were to make the top header text portion and center white portion of your header where it says “MA Publishing at LCC” divisions that extends all the way between the book graphics, and used a black border on the top, and filled it with white. But as you say, takes a fair bit of browser window size to start seeing the problem.

The “shadowcaster” element seems a bit lost behind the white box at the top.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

dude u have a mail maybe i must contact u or yahoo messanger ? thanks anyway your site looks good

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Sometime around 2/11/08 (at 23:17 -0500) Thomas Ponco said:

dude u have a mail

Dude I have email. :slight_smile: You’ll find contact info in my Freewaytalk
user info, and my college email address is in the Staff page
(http://www.ma-publishing.com/staff/). Scroll down to the bottom of
the page. But this is a very busy time for me; it might be better to
talk here in case others can chip in with info as well.

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Sometime around 2/11/08 (at 22:36 -0500) chuckamuck said:

a black border on the top, and filled it with white.

I think I tried that and had problems with IE6 not having a &%$@!
clue about correct scaling. But I should revisit it; I would like to
use a more bullet-proof method.

The “shadowcaster” element seems a bit lost behind the white box at the top.

Would ‘subtle’ be another word? :slight_smile:
I didn’t want it to be too obvious. It is all too easy to overdo
shadow effects…

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

The site is very functional, but seems a bit spartan, if you know what I mean. It looks ‘old’ when in fact it has modern features and techniques. Maybe it is irrelevant to the requirements of the site, but the overall look seems a bit off to me.

I also don’t really understand the point of using the TransitionFX. It appears to only be there because it is a cool effect. I find it distracting and I was looking to find out what it was signaling me to do.

I hope I don’t sound harsh because it is a good site, but thought I’d throw in a few opinions from a total outsider.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Would ‘subtle’ be another word? :slight_smile:
I didn’t want it to be too obvious. It is all too easy to overdo
shadow effects…

Ok, perhaps what I was intimating was not using it since it does not scale well.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Sometime around 3/11/08 (at 13:27 -0500) george said:

The site is very functional, but seems a bit spartan, if you know
what I mean. It looks ‘old’ when in fact it has modern features and
techniques.

Heh. You should see some of my colleagues!
This was made with a somewhat conservative feel on purpose. (I prefer
to describe it like that than ‘old’, but then of course I would… :wink:

And the transition effect is something that really was ‘by popular
demand’, coming out of a lengthy team discussion. What it signals
should be clear: “here’s some content, woo-hoo!” for the home page,
and I hope a much more subtle ‘soft pop’ appearance for the sidebar
throughout. I know, I know, I’m hoping to scale back or replace the
home page thing further down the line. But I can live with it for now.

I hope I don’t sound harsh because it is a good site, but thought
I’d throw in a few opinions from a total outsider.

Not at all. It isn’t always easy to judge something without knowing
some background, but opinions really aren’t worth much if they’re not
honest. Your comments are appreciated.

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Sometime around 3/11/08 (at 14:55 -0500) chuckamuck said:

perhaps what I was intimating was not using it since it does not scale well.

Meaning it doesn’t scale at all… :slight_smile:
I will look at all this when I re-try making that center block as a
flexible object.

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

On the center block thingy, why not make the center section a division itself, then add two div inside that one that contain the header, then second below that with the subhead?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

It looks really good. I hope you don’t have to spend too much time
“tidying up” after the other editors. WebYep is great when everyone
knows what they are doing. I just sent this important tip to one of my
clients yesterday:

“If you are editing text and/or photos in WebYep and it looks like you
are messing it up, and you can’t get it to look right or get it back
to the way it was, DON’T SAVE! Click cancel and get out of it.”

Of course, I closed that barn door after the horse was gone.

One thing that doesn’t look as nice to me are the photos on on the
staff pages and the alumni page. The photos are just kind of “out
there.” It’s probably where you put the WebYep image tag, right? I’m
thinking it might look better in the text, up by the name. It was a
little confusing to me what photo went with what text. Also, they are
not consistently sized and, for example, Victoria Pavry’s photo should
be much smaller. I assume they are adding their own photos, so you
don’t have much control over size/content. Do you have it set to a
maximum size? I think if the photos were in the text area, the
inconsistency in sizes wouldn’t be as noticeable.

Robin Stark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Sometime around 4/11/08 (at 07:31 -0600) Robin Stark said:

It looks really good. I hope you don’t have to spend too much time
“tidying up” after the other editors.

[sigh]
Using a rich text editor add-on (TinyMCE) is essential, but it means
that when people copy and paste from Word (spit) they include a HUGE
amount of absolute junk in the style code. My next step is to educate
people to write directly into the forms or pass the text through a
plain text editor first to clean it up.

One thing that doesn’t look as nice to me are the photos on on the
staff pages and the alumni page. The photos are just kind of “out
there.”

[…]

I think if the photos were in the text area, the inconsistency in
sizes wouldn’t be as noticeable.

A very good point, and yes, those have been added very recently by
others. But if inline was used (which would definitely improve the
look) then people would have to insert them in a much more manual
way, involving uploading and then typing in a URL manually. Or at
least, that’s how it appeared it would have to be when I was looking
at it myself; if I’m wrong I would be delighted to know!

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

TinyMCE has the W icon that opens another window for people to paste
their Word (yes, spit) documents in, and it strips out all the junk.
The hard part is to get them to do that one extra step.

You can still use the regular WebYep image tag in your set-up, along
with the Rich Text. When I first switched all my sites to the Rich
Text editor, I didn’t think about how next-to-impossible it would be
to show people how to upload their images ahead of time, let alone
[OMG] RESIZE them! I ended up going back in and re-adding the regular
image tag so they could continue to upload their images the way they
had been doing, and I could put a max size on their display. The bad
part is that if you have more than one image per loop, you have to
explain to everyone that they will need to divide up their text so
that they can add the second or third image. In your case, there is
only one image per loop, so it won’t matter. Whatever you do, don’t
give people the option of a left OR right image, because they will use
both … oh, stop me, I could go on and on.

I told my client yesterday, after a particularly horrifying WebYep
update on her part, that I would take care of her graphics from now on
and she should just worry about text. She said: “I do not have any
graphic ability that I know of. How do I acquire that on my
computer? That would be important for the web.”

On Nov 4, 2008, at 8:47 AM, Keith Martin wrote:

Sometime around 4/11/08 (at 07:31 -0600) Robin Stark said:

It looks really good. I hope you don’t have to spend too much time
“tidying up” after the other editors.

[sigh]
Using a rich text editor add-on (TinyMCE) is essential, but it means
that when people copy and paste from Word (spit) they include a HUGE
amount of absolute junk in the style code. My next step is to
educate people to write directly into the forms or pass the text
through a plain text editor first to clean it up.

I think if the photos were in the text area, the inconsistency in
sizes wouldn’t be as noticeable.

A very good point, and yes, those have been added very recently by
others. But if inline was used (which would definitely improve the
look) then people would have to insert them in a much more manual
way, involving uploading and then typing in a URL manually. Or at
least, that’s how it appeared it would have to be when I was looking
at it myself; if I’m wrong I would be delighted to know!

k

Robin Stark

Robin Stark
Web Flunky
www.webflunky.com

Instant Messaging:
GoogleTalk: email@hidden
iChat: email@hidden

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Sometime around 4/11/08 (at 09:10 -0600) Robin Stark said:

TinyMCE has the W icon that opens another window for people to paste
their Word (yes, spit) documents in, and it strips out all the junk.

Oh my sainted Aunt! That is wonderful. I don’t think I’ll have any
serious trouble getting people to do that. Thanks!

You can still use the regular WebYep image tag in your set-up, along
with the Rich Text.

But how do I build it so the image tag acts as an alignable graphic
within the flow of text? I’m keen to know!

She said: “I do not have any graphic ability that I know of. How do
I acquire that on my computer? That would be important for the web.”

Heh. With that kind of response I think it is probably important for
the web that your client doesn’t ‘get graphic ability’. :slight_smile:

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

On 4 Nov 2008, at 15:39, Keith Martin wrote:

She said: “I do not have any graphic ability that I know of. How
do I acquire that on my computer? That would be important for the
web.”

Heh. With that kind of response I think it is probably important for
the web that your client doesn’t ‘get graphic ability’. :slight_smile:

It’s the ‘… that I know of’ that creases me up :slight_smile:

best wishes,

Paul Bradforth

http://www.paulbradforth.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Sometime around 4/11/08 (at 09:10 -0600) Robin Stark said:

You can still use the regular WebYep image tag in your set-up, along
with the Rich Text.

Hi Robin,

I have placed my WebYep Image block to the left of the WebYep Rich
Text block, and I’ve added align=left to the image’s HTML Attributes
option in the WebYep action options. That works a treat, thanks for
the nudge.

But how on earth do I get it to have padding or offset? This
inability seems specific to my MA Publishing layout, as I can get it
to work easily with a basic hand-rolled page… but the hspace
attribute is ignored when I include it along with the align=left
item. It appears in the code, and that code works when used in a
simple document… but not in this Freeway-generated page. <:-(

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

But how on earth do I get it to have padding or offset? This inability seems specific to my MA Publishing layout, as I can get it to work easily with a basic hand-rolled page…

hspace is an HTML property, and you’re going to need to use margin if you’re setting CSS (Style) properties. Try adding a declaration for margin-right.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

But how on earth do I get it to have padding or offset?

How about nesting the webyep image in a second div and give that a margin?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Sometime around 4/11/08 (at 16:44 +0000) Keith Martin said:

how on earth do I get it to have padding or offset?

Problem solved, although in a moderately roundabout way: I added a
style that targeted img tags within the maintext div (which holds the
WebYep loop) and gave it a right indent of 10px.

#maintext img { margin-right:10px; }

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Sometime around 4/11/08 (at 12:14 -0500) waltd said:

hspace is an HTML property

Yep, I kicked it into submission just now by applying a div-specific
img tag style that applied a margin-right setting.

But I was actually putting the hspace attribute into the img tag, and
it was working in a simple hand-rolled example but not when used in
the Freeway/WebYep page. Even though I followed the example in the
manual. Curiouser and curiouser…

k

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options