Notes

News, links, research, and product announcements from XOXCO in Austin, TX.

  1. Posts tagged rwd

  2. Links for 6/11

    Brad Frost, responsive web guru and genuinely nice guy, wrote about the concept of atomic design - designing web pages from the smallest component up, combining atoms into molecules into organisms which populate a finished page. Along with style guides and pattern libraries, this represents the shape of modern web design.

    At least for today.

    Cleve Gibbon has written a great explanation of why we should be building content APIs, not more web publishing tools. If anyone asks you to build them a new CMS plugin or website template, send them this link first! Then, send them to Packagr. (Hat tip to Jeff Eaton for the link.)

    posted 10 months ago on Jun 11, 2013 | Permalink | 1 note

  3. Aware.js: Make your site reader aware

    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!

    posted 1 year ago on Nov 28, 2012 | Permalink | 47 notes

  4. 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 

    posted 1 year ago on Jul 13, 2012 | Permalink | 8 notes

Receive XOXCO's curated broadcast of original essays and links about product design, publishing, and software. Featuring exclusive links to experimental software and limited edition digital downloads.