Categories
conference presentations

My Session – Web 3.0

Wow. I was way more nervous than I thought I would be – first time doing this one, you know. This means that I practiced and re-thought the presentation a lot!! It seemed to have paid off. The presentation was very well attended with lots of people paying pretty close attention to a LOT of information thrown at them in the space of about an hour. I talked for a bit over an hour, then we had a really, really good discussion for the next 20 minutes or so. There were a lot of people who were really thinking while I presented and had some great comments and observations. I’ve already made changes to my wiki in response to the discussions from the end of the session!
The wiki was well received as well – lots of people commented that they really liked the idea. It’s something I’ve been doing for EVERY presentation I do these days. Something else I did, this idea came from my co-presenter for the Becoming 2.0 class, is to get a label for my cards with the wiki’s address and slapped it onto a bunch of them for take-homes. They went pretty quickly, too!
All-in-all it went very, very well. I’ve been talking RDF and XML with folks all afternoon – and it’s been fun!

Categories
conference

Opening Day – the overview

Again, I’ve already posted my observations about the opening talk, breakfast and both sessions, so I won’t go into that here. This is all about tonight! I made reservations for 7:30 at the Harvest restaurant, and wandered over that way for dinner. Amuse-bouche trio I started dinner with the Amuse-Bouche trio, which was described in the menu as:

Starting with grilled baby Portabello Mushroom stuffed with creole crabmeat glazed with hollandaise
Accompanied by seared smoked duck with pancetta root vegetables, caramelized onions and goat cheese
Finishing with crayfish etouffee topped with asiago crust

Yeah, it was that good. I also had a glass of Monterey, CA Reisling (I can’t remember the vinyard now) to go with the meal and had with it a Thai curry marinated Halibut on a bed of wilted spinach served with wasabi/fennell mashed potatoes with carrots and asparagus sticking out of it (this is from memory – it’s not on the menu posted on the website…). That was all covered with a tamarind sauce and had caramelized onions and on it as well. Thai marinated halibut w/wasabi & fennell mashed taters It was all seriously yummy! Now I’m back in my room and will go over my presentation *one more time* before I hit the sack and get ready for my turn to speak tomorrow!

Categories
conference

Flexible CSS Layouts

Design Services Manager at UNC Highway Safety Center – author of a couple of books as well.

Flexible design = overall width of layout is not fixed number of pixels (liquid/elastic/hybrid)
Why bother? Why not?
When fixed width makes sense:

* lots of fixed-width content
* known users with known setup
* beginning designer
* just need to get something small and simple up quickly

Benefits of flexible layouts

Design differently! – Not every design comp can be turned into flexible layout, learn what design features are (and are not) flexible friendly

Discussion of how height shouldn’t be fixed – you never know what size font your users are viewing…
Avoid irregular shapes that force a particular height on your text – unless you can tile some portion of the shape
Avoid text matched with images that can’t expand – pick the right images, or mask the image part out so that it can slide along a tile-able background (be sure you use proper CSS to ensure text has enough space to sit in) or use variable cropping (CSS crops the image to make the image look good in a narrower column)
Variable cropping:
div {
width: 50%;
min-height: 100px;
background: url(image.jpg) no-repeat;
}
put this div as empty
or
div {
width: 50%;
min-height: 100px;
overflow: hidden;
}
put image in this div
Blend into background – blend the background into the image to allow image to slide around the div without looking bad
Scalable Images
Liquid image
width: 50%;
Elastic image
width: 20em;

Avoid fixed-width, full width content (images that fill the entire column) – use same solutions as above (variable cropping, scalable images, etc.) or just don’t fill the entire column!
Composite images
use background position property and properly designed images
Scrollbars for large content
overflow property:
div {
overflow: auto;
} – on the *containing* box, not the image itself

Avoid horizontal alignment across columns
Solution – accept misalignment

She then showed us a screenshot and the audience gave reasons why the image would be difficult/impossible to create in a flexible manner. This was followed by a “redesign” of that same site with the ability to create it in a flexible way.

Flexible design inspiration – www.zomigi.com/blog/inspiration-for-flexible-web-design

Q&A
Flash? Can it be resized? Yes, it can be, google for scalable or resizeable flash and you’ll find it.
Text resizing widgits? Should they be used? – no strong opinion, but never used them herself – depends on your users. Put it in and test, check to see if it works!
Font-sizing? She uses biggest text size she can get away with (never below 80% if she can help it) so that those who have learned how to use their browser font resizing tools aren’t punished.
Standardized ID/Class names (a la Eric Meyers) to allow users to create customized stylesheets? Great idea – but do what makes you comfortable about allowing your users to change/alter your designs
Boxy designs – how to avoid, overlapping, perhaps? That’s fine, but make sure you have space below/above to allow text to resize. Check CSS Zen Garden for ideas on non-boxy designs.
Final note – browser zoom capabilities – why bother with flexible layouts? Doesn’t really help it for liquid layouts – makes the text too small to avoid horizontal scrollbars, etc.
How much work do you put into cross-browser support? All browsers should be able to read the content. Test first in FF, then in IE. (checks down to IE 5, but only to confirm readability)

All done – she’s giving away one of her books now – and I got it! A training video from Lynda.com called Web Accessiblity Principles. Sweet!!! (I answered the question of who came up with Faux Columns first – it was Dan Cederholm)

And now I’m talking to Zoe’s mom!!

Categories
conference

Adobe Forms

My first “real” session of the conference was on Creating Forms with Adobe Acrobat (specifically versions 7/8) by David Williams from Chester County, Pennsylvania.
The first thing I discovered was that users could save typed up forms in Acrobat Reader – if they had the proper extension. There was some discussion that this might only apply to version 7 – 8 may let them do it natively. I’ll have to check when I get home – if that extension is available, I’ll put it on our PCC machines! The next thing I learned was the Forms –> Form Field Recognition command. That will save me a BUNCH of time when I’m creating all the forms that came to mind as being useful to us at MRRL during this session! He then gave a tour of the editing form field process and properties, much of which I was pretty much unfamiliar with…
He showed us, during that tour, a neat trick with the fields – if you control-click and drag a field, you will copy and move that field so that you have a fully filled in field in a new place that only has to be tweaked, not completely re-edited. Pretty darn cool! He also showed us the comb feature – you know those forms that have boxes that require one letter or digit per box? Adobe will recognize those and make ’em work just like they are supposed to.
He went through customized field masks and how to create arbitrary masks to define your own data formats. He also showed how to create groups or hierarchies of fields that you can then use to make other actions like calculations easier. You can make this happen just by naming the field with the group.field naming convention.
Buttons can submit form to an URL (perhaps to a III Patron API URL that would let us auto-add library card apps to III….)
There was some discussion of the signature option, which creates a completely un-verified local signature for the user. When asked later about the legality of that, he suggested that we each check with our lawyers!
A final trick he showed was to make small changes to a form, add the new form using the Document –> Replace Pages command to slide the new document below your existing form fields so that you only have to tweak, not completely recreate the form.

Categories
conference

Breakfast and the keynote speech

Man, they really know how to feed a gal! Breakfast this morning consisted of scrambled eggs, biscuits and gravy, pineapple, bacon, cinnamon-raisin toast and grapefruit juice with coffee & water at the table – and that’s just what I had for breakfast, there were donuts, yogurt cups, omelets and sausage links on the buffet table as well. The table at which I sat had more than a couple of mothers with teenagers (myself included, of course) so that took up the majority of the conversation. We were joined by a gentleman who came to the conference from Holland (that’s a long way to come for a webmaster’s conference!!) who was very interested in my upcoming topic, Web 3.0. The discussion of teenagers and upcoming web technologies kept our breakfast table an interesting place until the keynote speaker began.
Joe Patella, Chief Technical Officer & Usability Practice Director of Delphia Consulting was our main attraction today. He gave a wonderful talk on “We the people: Are they really the center of your design process?”. Some of the highlights of his talk are:

  • Clue bus – an actual bus he keeps in his office to remind his staff when they’ve fallen off the clue bus (as in, aren’t getting a clue about user needs in their designs) and need to get back on. Very cute idea!
  • 5 D’s
    • Define – user requirement gathering
    • Design – identify info objects of import
    • Document – style guide, etc.
    • Develop – test & iterate
    • Deliver – roll out production site
  • Tech that helps, not hurts!
    • What works best for your content contributors?
    • Repurpose content
  • Think “content” not “webpage”
  • Info repositories – Los Vegas City site used Services/Departments/Audience to define each document or piece of information and then made the information accessible via the service, the department or the audience that was applicable to (this could be done with Drupal’s views and might be an excellent way to structure MRRL’s site…)
  • User-Centered Design is a process approach
    1. Know your users
    2. Set visibility goals
    3. Organize information, both on the site and *about* the site
    4. Make a great impression
    5. Validate your ideas (testing!)
    6. Coordinate design of the total user interface
    7. Evaluate and Iterate
Categories
conference

Preconference day

Well, you all have seen my posts from the preconference sessions themselves, so I won’t go into that, just the “around the sessions” stuff that happened!
During our first break, I had a gentleman with a vaguely UK accent (later found out it was Scottish, but he’s been in the US for 15 years, so it’s subtle) ask me if he could be cheeky and steal a cigarette. I immediately started giggling and had to explain that I had promised myself, during my recent trip to England, that I was not going to giggle when asked for a “fag” from anyone. Of course, if you read my blog you know that I did giggle when it happened.
Lunch was a turkey sandwich, pasta salad and a HUGE chocolate chip cookie eaten outside on a slightly chilly but perfectly sunny day. It was provided by the conference (the lunch, not the day) and was wonderful! After lunch we trooped back in and hit the second preconf of the day.
After that session was over, I came back to the main part of the hotel, ate dinner and found the gift shop (located on the recreated Bourbon Street inside the hotel) and picked up some toothpaste and a razor. Ah well, if I remembered everything all the time, I’d be perfect and you’d all hate me, right? I did actually bring a very nearly empty tube of toothpaste with me, but that will do me no good later in the week…
Now I’m back in my room, chilling and checking my makeup before I head to the opening reception – also held in the recreated Bourbon Street area of the hotel – where there will be snacks, an open bar (and not the night before my presentation – yeah!! – I don’t mind *attending* sessions hung over, I just don’t like leading them hung over…) and lots of networking/chatting/socializing. I’m looking forward to it!
Tomorrow is Forms in Adobe Acrobat and CSS Layouts for the Flexible Web as the sessions I’ll be attending and the opening keynote is on keeping people in the center of your web design process. It should be a good day!

Categories
Programming

PHP/MySQL Session

Richard Weinberg
City of Providence (RI)

Started with a demonstration of the PHP Uploader including detailed explanation of the code. It’s a pretty cool little program! One thing he mentioned is that if you create a form input of the type=”file”, the browser will create the browse button and all that interface for you. (include the enctype=”multipart/form-data” in the form tag to make that work, too) Pretty easy! While going through the code, he mentioned the Heredoc syntax:
<<

Categories
presentations

Prototyping

My first pre-conference session! It was very interesting with LOTS of great information. My notes, as the information came at me, are below. Enjoy ’em!

Marc Drummond
Web Technologies Coordinator
City of Minnetonka

What tools can I learn?
When should I use each tool?
How do I use each tool?

Prototyping = an approximation of an actual design
Lo-Fi vs. Hi-Fi

Tools:

* Paper
* Wireframes
* Gray-Box
* Photoshop Comps
* PowerPoint
* XHTML & CSS
* Interactive prototypes

Discussion of what prototyping we’ve done turned into a discussion of designing for resolution. 15% still use 600×800 and these are gov’t sites, so there were lots of opinions.

Content first!
Challenges in getting content – content brief gives deadlines/responsibilities – discussion of getting content from busy people. Embarrassment/shame works…
Page Description Diagram – focus on content/hierarchy
Exercise – create a Page Description Diagram with Creative/Content brief provided

Developing Layout Concepts
Info design first! Layout second.
Elements of layouts:

* container
* identity block
* primary/secondary navigation
* other navigation
* content
* footer
* whitespace!

Purpose of navigation
Purpose of design = make them look at something specific
Discussion of grid theory/golden ratio
Thumbnail sketches – make ’em early & often
Exercise – create at least 10 thumbnails (I got 6 done)

Break – they have Red Bull as well as all different kinds of soda on the break tables. So typical of web/coders…

Paper Prototyping
great for usability testing
Lots of info on testing – paper prototyping as the base, writing a script for the test, (in response to question) creating “tests” for the site, recruiting testers, testing team design (facilitator, user, “computer”, note-taker), take time between sessions to process – but don’t make changes between sessions, review results, make changes, test again
Example of paper prototyping using volunteers for us to see a working example – handy!! Discussion followed on the advantages/disadvantages to the process.

Wireframes = page skeletons used as storyboards
Tools – Visio, OmniGraffle, etc. to create wireframes
Notate – project name, page name, version number, last rev date, author, copyright on template for the site
What should be wireframed
Challenges of wireframing

Grey Boxing
Adobe Fireworks CS3 examples – learned about layer comps & how to use them – cool stuff!

Design issues
Color picking/psychology of color
Color Tech (brightness, RGB vs. CMYK, etc.)
Color picking advice

Illustrator examples – coolest tool in existence = Live Color – recolors your prototype VERY easily, and lets you save any of the schemes you create with it. I’m going to have to play more with Illustrator.

Creating effective communication – quick tips on design decisions to make your communication effective…
Typographical considerations – lots of considerations – spacing, justification, sizes, punctuation, test fonts at typetester.maratz.com
Design effects (lines, gradients, etc.) to help draw attention to content and make ’em pretty, make images with people face your content to draw the eye, choosing images, etc.

Interactive Prototypes – XHTML/CSS
clickable wireframe
good for complex scripting testing
Reusable – maybe, can be timewaster…
Use a good browser to develop in, test in nasty browsers next

Demo of prototyping in Fireworks – continued from before, added information to the grey boxes he made earlier, showed how to quickly create multi-page prototypes in FW, showed how to link from master page to pages he just created. Very cool stuff – I had no idea… Once this is done, exporting all the pages as basic web pages is easy. Too cool…

More Fireworks tricks – use Common Library to make buttons and other “doo-dads” without any real work – great for quickly working up forms and such.

Finally – review of prototyping process

  • Content
  • Thumbnails
  • Grey Box
  • Advance design
  • Interactive prototype
  • test, test, test (all through the process)
Categories
travel

Chillin’ in St. Charles

Today was my driving day – I went from Jefferson City to the suburbs of Chicago on 2/3 tank of gas. I love my car. Anyway, I left this morning and got in at 4ish, registered, got settled and decided to go exploring. Since it’s a bit rainy (not quite Noah’s Ark rainy, but close…), I confined myself to exploring inside, though the outside of the Pheasant Run Resort & Spa looks pretty damn amazing. Can’t wait for the storms to pass so I can wander! The inside is nice, too – with an indoor recreation of Bourbon Street (complete with a Ben & Jerry’s shop!!!) and lots of little shops and cool little nooks. While I was exploring, I stopped and registered for the conference and got the best bag of swag I’ve received for a conference yet. It included a lovely NAGW (National Association of Government Webmasters) polo shirt, a 2G thumb drive and my ticket to Zanies Comedy Club on Friday night to see Kevin Nealon. Score!! My speaker's gift
I then took off for dinner (IHOP – close and cheap…) and came back to go through the paperwork in my bag. I made sure I know what I’m doing for the next few days – tomorrow is pre-conference day where I will be learning about prototyping techniques in the morning and PHP5 in the afternoon – and checked my email/friendfeed/etc.
I’m going to call home now and say goodnight to the kid and the boyfriend and then settle in for some TV. I thought I might check out one of the lounges, but I’m seriously tired and have to be up and at my pre-conference session at 8am tomorrow! I’ll blog about what I’m learning as I learn it!

Oh – I almost forgot – as I was registering, I gave my name and the lady behind the desk started laughing and said “oh yes, the webgoddess!”. I had completely not realized that my job title would be published on the list of attendees page on the website and was way amused to see it there. Apparently she was too. I was blushing like a schoolgirl by the time I left the booth…

Categories
Web 2.0

Playing

I should be writing, working on a presentation or editing something, but I’m not. Instead, I’m playing with my two latest toys in an attempt to feel like I’ve accomplished something today (the Envisionware install was trying, to say the least… though it wasn’t really Envisionware’s fault, we piled too much onto the “to-do” list along with it). First, I got an account with Updating.me (http://www.updating.me) using the beta code BetaToUpdateMe (that will work until they shut the doors on it – no guarantees for the length of time that will be!) and then, thinking that a Ubiquity command would be just the thing to make Updating.me really, really useful, started hacking at some Javascript.
34 minutes (according to my FriendFeed posts) after I started whining about wanting to see a command for Ubiquity that would update my Updating.me account, I had it written, posted and tested. It worked! Except for the small fact that the Updating.me folks haven’t actually released their API yet, so it doesn’t actually update anything. They posted on their blog, however, on the 28th of August that an API would be coming soon, so all I have to do is change a single line in the script to point to their API “hook” and the script will be actually useful.
In case you are as impatient as I am, you can get the command (after you install Ubiquity, of course) at http://www.intertecdesigns.com/updatingme.html. If Ubiquity is installed, a drop-down bar will pop out of the top of your browser and ask you if you want to subscribe. Do be sure to subscribe to updates so that as soon as I make that little API hook change, you will get the full benefit of a working command to update multiple social sites with one single command.
Sweet!!