[Wsuug] Modular Web Design

[Kelley Walker]

At 10:57 PM 12/28/2009, Christopher Jones wrote:
>1. Haven't read anything on Modular Web Design, but making visual 
>components seems to be the point, so ok, I'm with that.
>
>2. In my opinion, UI/UX is less about "making things look pretty" than 
>anything else. I know very few back-end developers who know the first 
>thing about UI or UX, no matter what they think they know. For that 
>matter, most of the front-end developers don't know nearly the UI/UX that 
>they think they do.

true true.


>That being the case, I would like to point out that UI/UX is not the same 
>as front-end implementation, which is where all of your questions are focused.

Exactly. The quiz idea was geared to the backend developers who think UI/UX 
is primarily about markup. I didn't explain it well enough, I suppose. At 
any rate, I was thinking of administering such a quiz just to make a point.

As for the rest, I couldn't agree more!

The issue for us, at least in our organization, is advocacy for a role 
broader than implementation. I am thinking of this on two fronts:

1. avoid treating implementation as "mere implementation".
2. avoid treating implementation as separate from the broader UX issues you 
mention below.

I was listening to a video by Charles Wyke-Smith a couple of weeks ago. He 
was walking through *just* markup issues - "lowly" things like making sure 
there is title text and alt text, using page titles correctly, etc. He was 
pointing out how each of these things had much to do with UX in the broader 
sense you speak of below.

Thanks for your feedback Chris!

Kelley

>While a front-end developer may know all of the answers to your questions, 
>knowing those tells us nothing about their skills at making the user 
>experience a rewarding one. The user doesn't care if the code is valid. 
>They don't care about the doctype or if the entire site is written in 
>spans or tables. You can have excellent UI/UX with awful code driving it. 
>You can have excellent code driving myspace... and what do you know, they do.
>
>A UI/UX designer (for lack of a better term) needs a different knowledge 
>base that has little to do with code, beyond knowing what is possible. For 
>example, what are the differences in how users use a form that has top 
>labels vs side labels? How about left-aligned vs right-aligned labels? 
>What are the use cases when you would use each?
>
>What draws the users eye to let them know where the calls to action are?
>
>How is readability affected by line-height? Font-size? Line length? What 
>is the optimum of each of those for different age groups?
>
>Why are drop down menus bad for users?
>
>How does site speed affect users and how can you get around a site with 
>large load times?
>
>Is the new HTML5 video tag better for users than what we are all using 
>now? Why?
>
>What are the benefits and downfalls of using embedded font-faces?
>
>Those are just a few of the things someone in UI/UX needs to know, and 
>most of those don't need to be known by a front-end developer for that 
>developer to be excellent at implementation, which is the developers 
>actual job.
>
>~ Christopher
>
>On Mon, Dec 28, 2009 at 7:24 PM, Kelley Walker 
><<mailto:designlists at inkworkswell.com>designlists at inkworkswell.com> wrote:
>I feel a pre-presentation coming on....
>
>Two actually.
>
>1. I've been reading Mathan Curtis's Modular Web Design which is the UX 
>engineer's version of Object Oriented CSS. Where OOCSS is all about making 
>the code modular, Modular Web Design is all about making the design 
>components modular.
>
>for those who attended my presentation, I'd mentioned that one of the 
>reasons why OOCSS is important, and emphasizes the role of the UI 
>developer, is that when you're in OOCSS mode, you're more likely to re-use 
>components. Thus, when a designer hands off a design calling for a 2px 
>gray border, but it's usually 1px, you'll spot it -- because you can't 
>reuse code, but have to write new code. Since the difference between 1 and 
>2px is negligible, and there's no good reason for a design change most 
>times anyway, the UI developer ends up going back to the designer to 
>clarify the requirements.
>
>With Modular Web Design, the idea is to make those elements modular and 
>reusable at the UX design level first.
>
>2. I heard a couple of things recently that put me on edge:
>
>  - UI/UX is all about making things "look pretty," and
>  - UI development is important, that's why we ALL do it (meaning backend 
> developers)
>
>With regard to the 2nd issue, I think that would make for a good discussion.
>
>Delineate the ways UI/UX about a lot more than making things "look pretty".
>
>As for "we all do it" issue, it occurred to me to create a quiz. Questions 
>might be the following. Any other test questions you'd add? :)
>
>a. Explain the box model then explain at least one box model bug for which 
>a UI developer would need to be acquainted to code for IE6.
>
>b. Name three deprecated HTML elements
>
>c. True or False: A selector name "rightRail" is semantic. Explain your 
>answer.
>
>d. Name two microformats that are in the completed Specifications stage.
>
>e. What does POSH stand for?
>
>f. What is the basis of
>
>g. True or False: when developing a new Web site, you should use the 
>transitional doctype
>
>h. When indenting markup, the example of indentation (below) is an 
>accurate representation of the DOM tree, true or false:
>
><div class="foo">
>   <h1>Heading</h1>
>      <p>This is a paragraph that is very short.</p>
>         <a href="" title="">This is a link</a>
></div>
>i. The "alt" attribute has been deprecated but we still use it for SEO 
>reasons only. True or False?
>
>add your own question here! :)
>
>Kelley
><mailto:kcwalker at inkworkswell.com>kcwalker at inkworkswell.com
>
>
>
>blah blah
>
>
>
>
>_______________________________________________
>Wsuug mailing list
><mailto:Wsuug at list.wsuug.org>Wsuug at list.wsuug.org
>http://www.thelinuxlink.net/mailman/listinfo/wsuug
>
>
>_______________________________________________
>Wsuug mailing list
>Wsuug at list.wsuug.org
>http://www.thelinuxlink.net/mailman/listinfo/wsuug