Discover how we can enhance your team today!…


Contact Us…

Systems Thinking Institute LLC logo

× ×

Systems Thinking Institute LLC

Contact us:

×

Rock Eel Digital

We're easy to talk with and easy to work with! Our small business solutions are geared for ‘solopreneurs’ and startups, up to 250 peeps. See our Spectrum of Solutions for resources appropriate for larger firms.

Connect with us on social media, by email, phone or even snail mail…


Connect to Matt:


Linked In: Linked-In connect to Matt Weilert & Twitter:
Phone: +1-847-227-3006 (Int'l)
Phone: +1-866-288-0530 (North America)

Email: Rock Eel Digital

Snail Mail: PO Box 151, Cedar Creek, TX 78612 USA

×

Do you want
Rock Eel Digital
to design your site?…


Learn more about our “Spectrum of Solutions” when you:

Connect with Us…

× ×

7 Key insights to go mobile-friendly effectively


Nielson-Norman web writing guidelines

3 key ingredients

for easy-to-digest web copy:

  • Rich cream = Concise (info in every bite, no fake calories)
  • Bread crumbs = Scannable (clear path)
  • Cool cucumber = Objective (unbiased)

For mobile, an even terser style applies. More direct data, less narrative or "story." Yes, we know that "storify" is the latest thang, but not for the web, where every character counts! Read the mobile UX research excerpt or the web writeup.

Responsive framework

Design once, display many

Responsive code frameworks are like having a maitré’d who never forgets! Already baked into the code are features called media queries, which is a way to ask the device "who’s coming to dinner?" and set the table accordingly.

Responsive themes and frameworks are becoming more widely available and that means everyone enjoys a fuller, more satisfying web experience.


Inspire

Delight in the details, deliver the fundamentals

Your site purpose = Communication. If that's not effective, shiny objects don't cut it. Using the nuances of modern web tools to bring the on-screen presentation closer to the classic elegance of a finely printed book requires more than just technical know-how: you have to care. Why should you? Because better matters.

In the image above, we have highlighted the custom code for two flourishes applied to maintain line height. Flourishes are tell-tale signs of chefs who love their work and the people they feed with it.

  1. Elegant superscripts that don't distort your line height, and so avoid ugly and hard-to-read gaps in your text.
  2. Overline characters (special positioning unicode) that tuck the diacritic glyph snugly above the letter o, again so that the line height is not disturbed as it would be with CSS.

Cross-browser Testing: a must!

Multi-platform testing


Your recipe for success requires knowing your way around the kitchen. Learning your way around means signing up for one or more free test accounts on browser test sites, then evaluating the site on at least:

and if you have time & money to burn, making Internet Explorer (IE) error-corrections as your time, budget and patience permit. We specifically disclaim IE compatability, yet our special sauce header already includes many of the most essential IE fixes, so your site might work just fine. IE itself doesn't adhere to web standards, so our special sauce header puts you ahead of the game!





Nibbles & bytes

Content layered in bite-size chunks



Three legs of the milk stool:

  1. Create the Pull
  2. Provide Path to Detail
  3. Tie in Visuals

The difference for layered content in mobile: it's best to expose the path to detailed content very plainly for those turning to you because they can find answers fast.


It doesn't matter what you say until the learner wants to hear it. Then it's news! That's the great contradiction in marketing (read "teaching and training"). Creating that pull, that want to learn more is the basis of every cliffhanger plot, every serialized novel, and all too sadly, the very rare marketing message.

The inverted pyramid is even more important in mobile, yet it's not new. What is different and challenging is to write for multiple audiences at the same time, where tiered information is per paragraph not per page. You may not be selling them today, yet because you recognize your audience includes the whole world, rather than just people in a niche, you want to leave an impression as a valuable go-to source.

Layering by linking

One of the wonders of the web is the ability to write a concise sentence that links to the most specific detail available, making the content brief AND rich.

Once you've written your best, have your grandma read it and tell it to your next door neighbor's 10-year old. When it still makes sense under those conditions, then you've got your message! If it's a technical topic, abstract it to something more familiar, like we've done here with the cooking theme.


Inclusive Design

Think of all audiences



Designing for all audiences means that you will ignore many of the most in vogue web trends, because they weren't good ideas in the first place. Will the cognoscenti thank you for leading the way? No, they will fight you, because you are challenging their influence.

Here are the essential Section 508 US Government web accessability guidelines, summarized from Breakthrough Design Group.


Appearance & Readability
Functionality
  • Use scripts to improve appearance and functionality, rather than to deliver core requirements, so that screen readers have practical navigation. This will also improve Search Engine Optimization (SEO).
  • Any external resource (applets/plugins) required must have links to download as needed.
  • Forms need labels. Not just for compliance with Section 508, more for common sense! (Said lovingly of course…) Make sure all form element labels agree to the input id:

    < label for=species >Species:< /label > < input type=text name=type of bird id=species / >

    which renders as:



    just as an ordinary form, yet it now has the context embedded so screen readers can navigate it effectively for speaking the form to the blind and visually impaired.
  • Provide link to Skip Navigation for people with screen readers to jump to the page body. The USDA's site has a good example of this.
  • If a timed response is required, alert the person reading.
Associate Headers & Data in Tables
  • Define row and column headers for tables. Associate data and header cells in tables with more than 2 rows or columns. Use the scope attribute within the tags and within the first element of each row. For example:

    < table >
    < tr >
    < th colspan="4" > Rock Eel Café < /th >
    < /tr >
    < tr >
    < th scope=col > Voice < /th >
    < th scope=col > Web < /th >
    < th scope=col > Email < /th >
    < th scope=col > Print < /th >
    < /tr >
    < tr >
    < td scope=row > Language Leverage < /td >
    < td > Mobile-friendly sites < /td >
    < td > Elegant eMail < /td >
    < td > Rapid, Rich Indexing < /td >
    < /tr >
    < tr >
    < td scope=row < /td >
    < td > Semantic Compression < /td >
    < td > Dynamic Titles < /td >
    < td > Writing in the Active Voice < /td >
    < td > Creating Color Families to develop brand identities < /td >
     < /tr >
    < /table >

    The table below renders the same onscreen as a typical table, but has the associations embedded to provide the needed context for screen-readers. {An aside for sticklers in detail: Zurb's responsive tables are having hiccups, an alternate solution is Foo-table.}


    Rock Eel Café
    Voice Web Email Print
    Language Leverage Mobile-friendly sites Elegant eMailRapid, Rich Indexing
    Semantic Compression Dynamic Titles Writing in the Active Voice Creating Color Families to develop brand identities

Bake-in your Success

Maintain & grow


Document your work processes, your code and especially the details of what worked, what didn't and how you fixed it. As your products gain traction, as your firm staffs up, it is essential to develop and practice both [code | document | product] discipline AND cross training, so That's Bob's job is never heard to cross the lips of anyone committed to your success.


In the 19 Days to Business Intimacy training pipeline, we teach three deep management: at least three other people have the knowledge, ability and authority to solve problems in the absence of the primary role-holder.

Get in touch!

Phone: +1-847-227-3006 (Int'l)
Phone: +1-866-288-0530 (North America)