SXSW session notes: Designing with the grid

Ordering Disorder: Grid Design for the New World – Khoi Vinh

Grids make sense of the world. Paper size – A1-A6 paper size system, each smaller size is half of the last.

The Grid = Harmony

The grid helps the user predict where the new information they seek will be found.

The simpler the grid, the more effective it is.

Steps in the design process:

  • Research
    • Understand the constraints
  • Wireframes or another activity that helps you figure out functionality and build agreement on whet needs to be to be built.
  • Preparatory design Sketches, calculations, page sketches
    • Sketch throughout the project.
    • Problem solving should come before the aesthetics.
  • Visual Design
  • Code

On the golden rectangle

It is sometimes useful to divide things by 1.618, but in practice Vinh has never seen someone use the golden rectangle extensively when designing a website. The rule of thirds is more important.

Constructing the grid

  • A viewport of 960×650 is still a good size to shoot for. (This talk focused on a fixed grid).
  • Units in multiples of 8 are useful. People are most comfortable processing between 60 and 80 characters per line, so keep this in mind when laying out page.
  • The grid is about constraint, and adding constraint can help with design.
  • Use the grid to design a stream of information.

Responsive web design is really good, but a little showy. What is really important is satisfying what the user expects. What they want is access and speed, usefulness, and great content.

Posted in Conferences | Leave a comment

SXSW session notes: Drawing Back the Curtains on CSS Implementation

Drawing Back the Curtains on CSS Implementation

Panelists:
- David Baron, Mozilla (@davidbaron)
- Elika Etemad, Invited Expert (@fantasai)
- Molly Holzschlag, Opera Software (@mollydotcom)
- Sylvain Galineau, Microsoft Internet Explorer (@sgalineau)
- Tab Atkins, Google Chrome (@tabatkins)

They all love feedback! Message them on twitter with ideas, suggestions, concerns. If you blog about CSS, they probably won’t see it, so send them the link. The majority of people want to be involved in the standards, take the time to participate.

You can also follow @csswg for minutes and drafts.

When asked how many in the audience preferred Internet Explorer’s incorrect implementation of the CSS box model, many raised hands. I was one of them.

Question: What would they change about the CSS spec?
Answer: Galineau said that there should be other methods for laying out pages than float:left and right. Floats are delicate and easy to break. Also insane we don’t have variables. CSS sheets are giant and unwieldy.

Posted in Uncategorized | Leave a comment

SXSW session Notes: You Don’t Have to Move, to Live Better

You Don’t Have to Move, to Live Better – Majora Cater

This session was sadly under attended. Majora Carter is an inspirational and upbeat speaker, and well worth seeing. I talked to some people afterwards who had purchased the SXSW ticket and drove from Houston just to see her talk!

You can see a couple of Majora Carter’s talks at TED.com, including her widely viewed talk on “Greening the Ghetto.”

You don’t have to move out of your neighborhood to live in a better one

The first part of the talk was bio information, read more at Majora Carter’s wikipedia page.

Carter grew up and lived in the Bronx, freeways were built over thriving working class communities. Red lining – red lines were built around area code no one would invest in. Landlords found it more profitable to burn their buildings than improve. This created something like a war zone. Carter’s brother Lenny spent two tours in Vietnam only to be gunned down in a nearby neighborhood. New York decides to place a sewage treatment plant in the area which would process 60% of NY’s sewage. Wealthier and largely white neighborhoods pushing onto the poorer ones. Young people who live near fossil fuel emissions are impacted – suffer learning disabilities.

The lower income neighborhood was targeted, because they had no political power or influence.

How do you create a more sustainable solid waste process?

What Majora has done

  • Started the first green roof company run by a community organization
    • Working with plants reduces stress levels- plants require patience
  • created the apparatus to create the kinds of jobs the community needed

Created Home(town) Security

Homeland security is about fear. Home(town) security is not based on fear.

People want to see things happen in their own home towns.

People see development and all they see is gentrification. How will they afford the change? (Karin’s note – I think the difference here is whether the change comes from inside or outside – gentrification is led by outside developers, productive neighborhood development comes from community initiative and involvement.)

Several examples:

In syracuse, the mayor put in blue lights in the dangerous neighborhoods, but what does that feel like to the people who live there? This is the drama of local community development, and it will make good TV.

Tree People – Andy Lipkus is unpaving paradise

Coal Mountain WatchJudy Bonds died of cancer from breathing in the toxicity after mountain top removal mining. Worked to turn these areas into wind farms.

I missed a couple of other examples.

Carter saying “I should be advising president obama” was met with applause.

Question: (From AARP representative) – How can we get state offices to fund services which will help older americans stay in their homes – transportation, walkable neighborhoods, etc, instead of packing up and moving to florida?
Answer: The nice thing about older americans is they vote. Livable cities are the kind of thing which will keep people around.

Question: Would grant writing workshops be useful?
Answer: Probably not. There are already community organizations, we don’t need more of them, we need to build up the ones that are there.

Question: How to engage community? Would social media be effective?
Answer: This is one of the reasons to start with community based development, it is easier to build support around. Also, “feed them and they will come.”

Question: (I missed this question!)
Answer: Work a bit by bit, pursue market based solutions. A lot of our tax money is used for social services. If we can turn expensive people receiving social benefits into working taxpayers, everyone wins. Most people want to work.

Question: How to be involved locally when one can’t afford to live local? This is from someone who moved out to the suburbs because he didn’t feel safe raising his children where he lived.
Answer: Community Policing can be very useful. Working with the police to identify areas which could use more foot patrols. Job creation is key as well – sometimes people would rather have a job than sell weed.

Question: How to address criticism that [community development] is not realistic or too idealistic?
Answer: Follow the money. They can’t argue with results. The world has enough pessimists. (karin’s note: And ignore them! Who cares what they say?)

Posted in Conferences | Leave a comment

SXSW session Notes: Why Would We Think Social Media Is Revolutionary?

Why Would We Think Social Media Is Revolutionary? – Clay Shirky

TL;DR

What can you do? Pick something you care about, and learn about it. Use that knowledge to inform others.
“Join hands around the muslims in this country, stop hateful political grandstanding.”

Social media tools are not just a utilitarian way of getting the word out, they are also a divide between generations. They provide a narrative for the current generation to produce change.

The revolutions which are happening now are the end of a long process, not a new process. The Kefaya movement started in 2004, using blogs to coordinate efforts. But what happens when the long game is not there? People don’t know who to trust.

What people really want is a more responsive government. (Karin’s note: I have heard this repeated again and again – the cry isn’t for “democracy” per se, but a government who will listen to the people. Sometimes democracies don’t even seem to have that.) Feminism correlates strongly with attempts to make government more responsive.

Totalitarian governments are running into a problem – in order for economies to be competitive, people need to be informed. Everyone with a cell phone. But that gives people a way to organize. They can synchronize, coordinate, and document, as well as share.

What can we do?

Pay attention! Pick an area you care about and learn about it. Bloggers, tweeters, etc who can make informed decisions about what to repeat are valuable. They can add context and explain.

Help out. Example: Egyptian linux users group shared information with other linux user’s groups. Share expertise, experience.

Finally, Clay showed a picture of the Christian Egyptians holding hands to protest the muslims praying. We can do that. Join hands around the muslims in this country, stop hateful political grandstanding.

Posted in Uncategorized | Leave a comment

SXSW session Notes: Interview with Matt Mullenweg

Matt Mullenweg Interview: The Future of WordPress – Interviewed by: John Battelle

TL;DR

Matt is awesome, WordPress is awesome, Jetpack is launched, Guided Transfer to move from WordPress.com to your own host, I am a total fangirl.

(note: these notes are pretty disjointed, was busy taking it all in!)

12% of sites are powered by WordPress.

Blogging isn’t dead, it’s just changing

Mullenweg about tumblr – (paraphrased) some will say it’s all porn, but it’s artistic.

Tumblr is a different product, with a different focus. It integrates the reading/writing process in a beautiful way. WordPress should do more of that.

WordPress.com is made to be a consumer service – for people who don’t want to deal with the plugins, etc.

Interviewer – “You do seem to make money with advertising, but you seem to hate it.”

Originally how the ads worked is they would only be served to people who were coming from google, had never been to WordPress.com before, and were not on Firefox.

Question: Any ideas how to change the monetization of WordPress? Promoted posts like Twitter? Promoted accounts like Tumblr?

Answer: WordPress is very sensitive to putting things on people’s blogs. There is a little more room on pages that feature collected posts on a theme, because you are not messing with people’s personal style or infringing on their space.

They do monetize by providing value for the users – with things like premium themes, etc.

Jetpack launch!

Jetpack is a new plugin which aggregates some features which were available previously in seperate plugins, and brings features from the WordPress.com site to the .org site, like analytics and a math markup language. The goal is to have 100% feature parity between WordPress.com and self hosting users.

Guided transfer lanch!

Guided Transfer is a service which costs $99 and will help the user leave WordPress.com to their own guided host.

Business model: “We make a good thing, tell people about it, people give us money.”

Mullenweg was born and raised in Houston. Was in a linux user’s group and a palm users group there.

How the WordPress business works:

There are 80 people around the globe, the most people in any one place it 5. They use very little email, but use IRC for chat, and the P2 theme (for WordPress, duh) to keep track of projects. It has sort of a twitter/friendfeed feel. They have more P2 installs than they have employees. Superior to email because it is archivable and searchable. Great for catching new people up on the projects.

Question: Are there enterprise solutions? Pay for a certain level of uptime?
Answer: They already do this. WordPress.com powers some of the largest sites in the world – CNN, lolcats, time magazine

Question: What separates the entrepreneurs who make it?
Answer: Are you willing to outwork everyone else?

Question: What would Matt like to see in WordPress?
Answer: Handle media better. There is already a full screen writing mode for the visual editor (see pic below) , but Matt would like to improve even more.
Wants to continue to put authors first.

How to get full (browser) screen writing mode in wordpress

Question: Are there any plans to make podcasting better?
Answer: This will continue to be handled by plugins, and WordPress will continue to provide the hooks to make it work.

Question: Will you make it easier to livestream?
Answer: Matt recommends picking up a WordPress theming book and get skinning. You can use categories to distinguish livestreaming entries. “Scripting is a new literacy.”

Question: When will you make the iPhone app better?
Answer: It will continually get better, along with the blackberry, android, etc. apps. These are like nothing WordPress has worked on before, there are 5 different codebases. Also, people don’t like to contribute to closed platforms, so they are not getting the open source community help they do with other stuff.

Question: Is there any plan for plugin consistency?
Answer: This is hard because the plugin makers have leeway. But there is a UI group where plugin makers can ask about the best place to put things.

Updates are still not as easy as Matt would like. Working to make it better.

Posted in Uncategorized | Leave a comment

SXSW session Notes: Programming and minimalism

Programming and Minimalism: Lessons from Orwell & The Clash” by Jonathan Dahl

TL;DR

Programming has a lot of similarities to writing, composing, and other creative activities. Programming is a craft, and should be treated as such by rewriting, refactoring, and cleaning up constantly. Discussed is George Orwell’s essay, “The politics of the English Language” – and the way it connects poor writing to poor thinking.

Programming is defining processes. Be a code craftsman – build good code, that can’t be commoditized. Develop habits and use tools that allow a craftsman do his or her job well. Work with good teams and develop good habits and practices. A good programmer can describe complex processes in a precise way.

Programming and similarities to music

Both work in an abstract way – the musician records the music in a notation that is an abstraction of the actual music, a representation (dots on a page). The coder also works in abstraction.

How music is created:

  • Make something simple and interesting (like the hook of a song)
    • {build on it (loop)}
  • End up with something enormous, stale and boring
  • Trim the fat
  • Repeat as necessary

The Dahl went into a musical history, which I don’t think would be as useful without the clips he played. But the gist was, music goes in cycles from simple to complex to simple again.

Simple -> Complex -> Simple -> Complex -> Simple -> Complex

It is operating well between the simple and the complex that leads to beauty.

Minimalism is a positive aesthetic.

Programming and similarities to writing

An essayist writes and rewrites, as a programmer codes and then refactors code to make it better.

Is language ambiguous? Is that the problem? Or is the problem that we don’t realize that language is imprecise, so we don’t take it into account?

There is not a 1:1 correlation between what we want and how it can be expressed in code, this is why coders are needed in the first place.

George Orwell the essayist

Read George Orwell’s “The politics of the English Language” – it connects poor writing to poor thinking.

Example: the US Patriot act. The name does not tell you anything, it co-opts your ability to think intelligently about whether it is a good idea. It should have had a title like “The expanded surveillance act.” The sloppy title inserts the idea beyond rationality into someone’s brain, and demonstrates sloppy, unclear thinking.

Bad writing is more prone to bugs.

Bad writing is more prone to bugs. The presenter gave an example of terribly unclear writing that had a quadruple negative, one of which didn’t need to be there. Clear, direct writing makes it easier to follow the thinking and detect bugs.

Orwell’s rules:

  1. Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
  2. Never us a long word where a short one will do.
  3. If it is possible to cut a word out, always cut it out.
  4. Never use the passive where you can use the active.
  5. Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
  6. Break any of these rules sooner than say anything outright barbarous.

Application to programming

  • Minimalism
  • Clear direct writing
  • Take simplest approach to coding
  • Clever code is bad code
  • Any code not doing something is harming your product. If your users don’t need it, get rid of it.
  • Accept constraints – work witht he language and framework when possible
  • If something isn’t local business logic, it belongs in a library. (In MVC, model should not be huge)
  • If it is not local, consider using open source
  • Don’t over or under abstract
  • Always actively clean up your code – otherwise your code is degrading
  • Code tracker – always document what needs to be done
  • Apply these rules wisely
  • Simple code is beautiful
  • Break hard problems down

Consume

  • pair programming, hold code critiques, view other people’s code
  • read good prose
  • listen to good music
  • study and learn

Produce

Good programming is:

minimal – direct – beautiful

Questions

Question: How to justify to stakeholders time spent on cleaning up code?
Answer: Don’t tell them. They hired you to do the best job you can, and the best is not broken spaghetti code.

Question: How do you deal with an organization love of complexity?
Answer: I didn’t record an answer for this one. If anyone thinks of something, let me know!

Posted in Uncategorized | Leave a comment

SXSW: Recap

I had a fantastic time at SXSW. I learned a lot (though I felt my brain was full by the second day) and met a ton of fantastic and smart people – both professional contacts and personal ones.

I am working on a series of posts of my notes from SXSW. Interspaced with those will be posts about what I learned in general and the value I see in SXSW.

SXSW Notes

I took 47 pages of handwritten notes. It’s gonna take a while to type them all up.

Posted in Conferences | Leave a comment

CSS teaching and wrapping block elements with an a tag

Today I taught a graduate digital history class about CSS. I only had an hour, and there was no projector in the room, so I put together a tutorial to walk through how to take a list from normal looking list to navigation style list.

Here it is, in case you are interested. All the explanation is in the linked CSS file. Best to use something besides IE to view the CSS.

Since I used an HTML5 doctype, I experimented with the now legal application of the <a> tag around a block element. In this case, I have code that looks like this:

<a href="#"><li> ... </li></a>

The weird thing about this is that the only thing that has stopped us from using this technique is fear of the almighty validator. As it turns out, browsers quietly kept the functionality while HTML itself did not. Because of this, the functionality is spotty. In the above picture, you can see that  the list items are underlined, even though I explicitly set text:decoration to none.

Still, this might be a fun technique to play with.

Posted in coding, computers, CSS, Tutorial, Web Design and Development | 1 Comment

Going to SXSW

Going to break a way too long silence on this blog to talk about: Vacation!

I will be headed to SXSW Interactive in Austin, TX next week, the 11th-16th. If you are going and would like to meet up, email me (karin at nirak dot net or nirak on twitter).

I’m pretty excited to go to SXSW, having listened to many of the podcasts and for a couple of years, sans visuals, and following the conversations. I’m sure I will learn a lot, and from what I hear, I will also be staying up way too late.

[awkward segue]

I had a long post written up once (one of many posts I have written which will probably stay in “draft” form) about why libraries should fund conference expenses for staff as well as faculty. I still think that is the case, but recognize that, with budgets being what they are, it probably is difficult to fund faculty travel to conferences right now, let alone staff. However, there is some advantage to paying my own way, which I neglected to mention in that post.

An excerpt from that post, written almost a year ago:

“The employee, and in turn the employer, gets much more from staff attendance at a conference besides continuing education. They get new professional contacts, new ways to solve problems, new resources to check, and, most importantly, an renewed excitement for the work they do. If a conference results in an employee that returns with new excitement and commitment to the work they are doing, everyone benefits.”

The nice thing about paying my own way to conferences (which I have done several times a year), is that since I don’t have to worry about publishing papers or giving presentations, I can choose the conferences that excite me rather than the ones that are likely to advance me towards tenure. I come back to work super exhausted and super excited about the work I am privileged to be able to do. I’m very lucky to have both the money and the available time off to be able to attend conferences.

Not really sure of my point here, except to say WOOO SXSW!!!!!

(Expect a few more awkward blog posts while I get back into this whole blogging thing).

Posted in Conferences, Library | 2 Comments

Some thoughts on Less CSS

First – I will clarify that this post is about the Less CSS method of writing CSS (writing in another format and then compiling to CSS, either through Ruby or Javascript) rather than the Less CSS framework. It’s confusing that these two things have the same name.

If you would like to get started with Less, I think the easiest way right now is to use the javascript include method mentioned on this page. There might be a few little quirks, I didn’t run into any.

Basically, you just write your Less CSS code in a separate file with the extension .less. Then you include that file and a link to the Less CSS javascript in your HTML head like so

<link rel="stylesheet/less" href="stylesheets/less/new.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

(Sorry, I know I need to write some better code styling)

Alternatively, if you are on OSX, you can use less.app to auto compile your code on the fly. Or, you can always use the original Ruby version to do the same.

Anyway, I spent a bit of time trying out writing CSS using the Less CSS notation, and I have to say it is quite intuitive. I don’t think I can add much (yet) when it comes to how to write in this format, so I will just point to the original less css documentation and the post “My thoughts on LESS.”

I spent most of my time trying out the different ways to implement LESS and experimenting with how it would fit into my workflow. I installed the Ruby gem and used it for basic compiling, and that worked fine. I tried out less.app for on the fly compiling, and that worked fine, too. I tried serving the file using the javascript method above, and that too worked fine.

I then tried to figure out how to get an auto refresh development environment similar to what I get with CSSEdit. I tried the Xrefresh plugin for firefox, but ran into a problem with my Ruby install (which I am not patient enough at present to troubleshoot- I will wait until my work gets around to upgrading me to Snow Leopard). So right now I am stuck alt tabbing and refreshing. SIGH. so hard. This article discusses other ways to get an auto refresh on your browser. I may try out TextMate for this, as I have been meaning to try it out anyway, and it seems to have much more active development than CSSEdit.

Conclusions

I really like Less, and think it will be especially useful for complicated layouts. I already know Ruby (a little), so the notations are familiar, but it doesn’t look so different from CSS that people that don’t know any programming will be overly intimidated. The variables are cool, but after using Less, I think the ability to set an attribute the same as another attribute is even cooler (this is called “Accessors” – see the aforementioned “My thoughts on Less” article.)

However, until editors get built in support for Less, I don’t see using Less as my production level code. It seems like it would be too easy for the compiled CSS file to get overwritten by someone else on the project because they don’t know what to do with the .less file. I would not want to use the on the fly javascript version in a production site – I browse sites too oven with javascript turned off to be comfortable with that. So I will likely use less right now for initially developing a new site CSS, either using the javascript method and then later including the compiled code, or using less.app for on the fly compiling. After the site is “done”, I will compile and include the compiled CSS for the production site. Perhaps I will inclide the .less file in a “notes” or “src” folder in the site for future reference.

I am unsure whether I will try to teach my student workers to use less over traditional CSS – probably not yet. Most of them have only a basic understanding of CSS to begin with, I worry that it might be a bit much to throw at them. However, for those that have taken Steve Ramsay’s Ruby class, I will definitely mention less as an alternative.

Posted in coding, computers | Tagged , , , | 1 Comment