XOXCO

  1. Nov 28, 2012

    Aware.js: Make your site reader aware

    by benbrown

    Last week, I wrote about the concept of reader aware design - the idea that our content websites can now look back at us and alter their layout to best suite our needs as readers without requiring us to login or create accounts.

    Today, I’m excited to announce the release of the first version of Aware.js, a jQuery plugin that implements many of these features, and enables developers to apply techniques first used in responsive design to these new reader contexts.

    What does Aware.js do?

    • Adds CSS classes to identify various classes of users: new visitors, repeat visitors, and repeat visitors who are making their first visit of the day.
    • Tracks time between visits, and makes this information available via Javascript
    • Flags content that is new to the reader for easy CSS styling.
    • Inserts relative bookmarks into the content stream to clearly indicate what a reader has already seen.

    Once implemented, developers can drastically alter the layout of their site using only CSS to accomodate a wide variety of reading scenarios. Combining these new CSS and Javascript tools with existing responsive design techniques unlocks a vast array of options for customizing the layout and content on a page to suite individual readers without requiring any server-side code or CMS template logic. View a demo of Aware.js in action here.

    Learn more, and download Aware.js here.

    We’re releasing Aware.js now to continue the conversation about reader aware design, and to collect feedback and suggestions from the community. What other information might Aware.js provide about a reader? How will you use these tools and techniques on your site? We’d love to hear from you - Send us a tweet to @XOXCO!

  2. Jul 13, 2012

    Images

    by goatsandbacon

    • This wednesday I got the chance to participate in Luke Wroblewski’s workshop on Mobile Web Design at An Event Apart. Here are my sketch notes from the event. While mobile design has traditionally followed web design, in the near future this pattern will definitely be reversed. With the explosion of non-desktop devices, it now seems almost archaic to design for specific screen sizes or use scenarios. Your web page must work on all devices, known and unknown!  A few crucial points that stood out were: Focus on content:  Simplify simplify, simplify! When you design you should consider efficiency formost - both in the design of the page, and in the delivery of the assets. What do you want to use precious bandwidth on? The average mobile experience is 1.5 slower than desktop - be smart. The constraints of small screens force you to hone in on important information. These constraints are crucial in not only the principles of design but navigation as well. If you’ve identified the most important pieces for your mobile experience, does that change if the screen is bigger? Content first, navigation second. I know it’s sort of obvious but as designers we forget this quite frequently. We seem to be drawn to nav bars and should step back and look at aligning content with user’s needs. -Bushra 
    • This wednesday I got the chance to participate in Luke Wroblewski’s workshop on Mobile Web Design at An Event Apart. Here are my sketch notes from the event. While mobile design has traditionally followed web design, in the near future this pattern will definitely be reversed. With the explosion of non-desktop devices, it now seems almost archaic to design for specific screen sizes or use scenarios. Your web page must work on all devices, known and unknown!  A few crucial points that stood out were: Focus on content:  Simplify simplify, simplify! When you design you should consider efficiency formost - both in the design of the page, and in the delivery of the assets. What do you want to use precious bandwidth on? The average mobile experience is 1.5 slower than desktop - be smart. The constraints of small screens force you to hone in on important information. These constraints are crucial in not only the principles of design but navigation as well. If you’ve identified the most important pieces for your mobile experience, does that change if the screen is bigger? Content first, navigation second. I know it’s sort of obvious but as designers we forget this quite frequently. We seem to be drawn to nav bars and should step back and look at aligning content with user’s needs. -Bushra 
    • This wednesday I got the chance to participate in Luke Wroblewski’s workshop on Mobile Web Design at An Event Apart. Here are my sketch notes from the event. While mobile design has traditionally followed web design, in the near future this pattern will definitely be reversed. With the explosion of non-desktop devices, it now seems almost archaic to design for specific screen sizes or use scenarios. Your web page must work on all devices, known and unknown!  A few crucial points that stood out were: Focus on content:  Simplify simplify, simplify! When you design you should consider efficiency formost - both in the design of the page, and in the delivery of the assets. What do you want to use precious bandwidth on? The average mobile experience is 1.5 slower than desktop - be smart. The constraints of small screens force you to hone in on important information. These constraints are crucial in not only the principles of design but navigation as well. If you’ve identified the most important pieces for your mobile experience, does that change if the screen is bigger? Content first, navigation second. I know it’s sort of obvious but as designers we forget this quite frequently. We seem to be drawn to nav bars and should step back and look at aligning content with user’s needs. -Bushra 

    This wednesday I got the chance to participate in Luke Wroblewski’s workshop on Mobile Web Design at An Event Apart. Here are my sketch notes from the event.

    While mobile design has traditionally followed web design, in the near future this pattern will definitely be reversed. With the explosion of non-desktop devices, it now seems almost archaic to design for specific screen sizes or use scenarios. Your web page must work on all devices, known and unknown! 

    A few crucial points that stood out were:

    Focus on content:  Simplify simplify, simplify! When you design you should consider efficiency formost - both in the design of the page, and in the delivery of the assets. What do you want to use precious bandwidth on? The average mobile experience is 1.5 slower than desktop - be smart.

    The constraints of small screens force you to hone in on important information. These constraints are crucial in not only the principles of design but navigation as well. If you’ve identified the most important pieces for your mobile experience, does that change if the screen is bigger?

    Content first, navigation second. I know it’s sort of obvious but as designers we forget this quite frequently. We seem to be drawn to nav bars and should step back and look at aligning content with user’s needs. 

    -Bushra