Breaking the page

Breaking the Page Dan Donald, WDC 2010

Hello. I’m Dan.

Hello. I’m Dan. I design...a bit...

Hello. I’m Dan. I design...a bit... But mainly code... <?php echo ‘a bit of PHP, ’; ?> document.write ‘a bit of javascript or jQuery’; body { bitof: #css; } ...and all that stuff..

Hello. I’m also a dad to Keira... ...in a band called Mark of 1000 Evils... (subtle plug... markof1000evils.bandcamp.com) And did the Speak the Web events with @Rich_Clark

Hello. Started off wanting to be... ...but ended up being....

Bear with me while I go on a nostalgia trip... This may take a while!

Take a look back. Go to http://web.archive.org and look at old versions of sites... Great for a sense of perspective!

Say what? Metaphors are a double edged sword. Take a step back and see things differently.

Breaking the page, eh? Not advocating cruelty to print media.

http://www.ﬂickr.com/photos/juditk/4462110514/

Why is it important? Helped people to adapt to a new medium. At the time, web-pages were ﬂat ﬁles.

It did so much good... It helped people to adapt to something new. Implied transfer of skills.

Don’t let it limit you! The web is inﬁnitely more capable than it was. The underlying technology is decades old!

Do we still create pages? Err... yes and no... Javascript always added behaviours. But then frameworks/libraries & AJAX happened. Real-time and system driven sites.

There is no page... Maybe there never was? http://3.bp.blogspot.com/_YAqyEoNiXNU/S3ASYDW0u5I/AAAAAAAABKo/oZa7ea0lOEM/s400/Man-and-cow-share-a-newspaper-John-Drysdale-200369.jpg

These are experiences Got a better name for it?

Breaking the page = Keeping our minds open.

‘Go to my Twitter page..’ Streams, not ﬁles.

We’re unique, as developers and designers.

Intermission.

In the days of old... ...there were fewer conventions. Crazy shit!

Conventions. An important part of our toolkit.

Toolkit: Expectations, experiences, conventions, device constraints...

So much to consider Break the process down from higher-level through to looking at ﬁne details, whether it’s code or design.

My thing: social objects What the...?

Warning: abstract

Everything is objects. What are they? Prioritise them. Present and engage with them.

Everything is objects. What are they? Prioritise them. Present and engage with them. Give them a hug...

There’s objects already! Yup - business object, database objects, we code in objects... Not always the same thing and is deﬁned in speciﬁc domain or context.

Object-centred sociality Jyri Engeström seems to’ve coined both terms but the idea is the same: objects we use as part of conversation. This view of objects works well with the others. Check out Hugh McLeod (@gapingvoid) Great examples of social objects: http://gapingvoid.com/ 2007/12/31/social-objects-for- beginners/

Every project, business or site has them. These can form the backbone of the site. I’d go further though...

Elements of your site are Every article, image and video is - so this mirrors (some) ﬁles being objects. How could people be able to interact with these? How can the web encourage and enable?

All objects are elements! On the web we could have our own periodic table! http://www.wpclipart.com/science/atoms_molecules/periodic_tables/periodic_table_of_elements_BW.png

Content is molecules? Water = H20 Blog post = Text + 2 images Each exists an object but forms something new! http://expertvoices.nsdl.org/polar/ﬁles/2009/02/water.jpg

Building blocks... We use design as a way of communicating the properties of these objects. http://www.ﬂickr.com/photos/adactio/1799953270/

Going too far? It’s the way I ﬁnd of looking at the web on a more abstract level. Find your own, or use elements of this.

Web = interface. The sites & services we make are the interface between provider and consumer... A method of interacting with the social objects. Objects can have taxonomies - a domain of language that can help us link and explore them.

The bottom line. Be aware of the constraints we’re putting on ourselves.

The bottom line. Be aware of the constraints we’re putting on ourselves. Find a way to look at a really high level and at the levels of detail.

The bottom line. Be aware of the constraints we’re putting on ourselves. Find a way to look at a really high level and at the levels of detail. Find a way to push things forward in every project.

The bottom line. Learn about theory and technique - soak it up.

The bottom line. Learn about theory and technique - soak it up. Don’t lose sight of the bigger picture.

The bottom line. Learn about theory and technique - soak it up. Don’t lose sight of the bigger picture. Be aware of what other people do and gain and enhance your point of view.

It’s over, you can relax! Thanks. @hereinthehive

http://hereinthehive.com	381
http://www.linkedin.com	3
http://imap.hereinthehive.com	1
http://mx1.hereinthehive.com	1
http://pop.hereinthehive.com	1

Breaking the page

by Dan Donald

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 387

Statistics

Breaking the page Presentation Transcript