Rudimental’s of Content Strategy

Leave a comment

The linch pin of web design at the moment is that it needs to respond to the client’s device appropriately, which leads to the choice between mobile or wide screen first.

Choice of Media Query Breakpoints

Should the choice of breakpoints be randomly assigned, dependent on popular devices or design led?  It may make more sense to look at the content and core functionality that the website needs to deliver when choosing the breakpoints for the responsive design.

Atomic Web Design

Brad Frost’s upcoming book, implying a content strategy where design elements and all content are broken down into small building blocks called atoms, which can be assembled to form molecules and even larger organisms.

Style Guidelines

  • https://ux.mailchimp.com/patterns/

Introduction to Responsive Web Design

Leave a comment

Sitepoint course on http://learnable.com by Russ Weakley

Web Design Principles

  • Browsers – IE 9+, Chrome 12+, Firefox 5+, Safari 5.1+, Opera 11.5+
  • Eliminates the need for separate mobile and desktop sites.
  • Key principles – a flexible grid based layout, flexible images and media, CSS3 media queries.
  • Progressive Enhancement – starting with a good foundation and then add improvements depending on what technology is likely to be available.
  • Adaptive layouts could be fixed width layouts designed for specific sizes.
  • Mobile first forces one to prioritise core functionality, easier then to adapt to wide screen layout.
  • Strengths – one site, making it cost effective, easy to maintain.
  • Weakness – delivery of the same content to every device, which means a single image size and resolution.  Cannot customise content delivery to different device types.

Media Types and Media Queries

  • Previously CSS had media types… all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.  An unspecified media type defaults to all. Many of the media types are not supported by the relevant devices, stick to screen, print and all.
  • There are several ways of specifying media types and media queries avoid multiple @import if page load speed is important as files are downloaded sequentially and not in parallel. 
    <link rel="stylesheet" href="a.css" media="print, screen /">
@import in style element 
@import inside css file
@media screen inside css file { css }
  • Media Feature (e.g. and (color) ) can be defined with or without a unit value depending on the feature.  Boolean operators – and, not and comma is the same as ‘or’ .  These enable CSS rules to overlap. There is also an ‘only’ keyword which prevents older browsers applying the styles as older browsers understand @media in the context of screen types. 
    /* CSS @media rule */
@media screen and (color) {
   /* CSS rules inside */
}
  • There are several options for  IE 6 – 8, browsers which don’t support media queries:  1. respond.js  2. CSSS3-mediaqueries.js a simple lightweight javascript solution.  3. simpler CSS files for IE 6-8. a fixed width layout.  As they are only relevant to IE 6-8, place it inside a conditional comment. 
    <!--[if lt IE 9]>
    <script> src="assets/js/respond.min.js">
    </script>
<!endiff]-->
  • Breakpoints – the point where the layout changes from say 2 to 3 columns.  Previously specific screen sizes were used based on typical resolutions, however rather use breakpoints which are relevant to your content and functionality.  Not device based, but rather design based breakpoints. Tools to test break points – responsinator, screen fly, there is no breakpoint.

CSS3 for Web Designers – Dan Cederholm – A Book Apart

Leave a comment

Really glad to see that this book is in its second edition… last revised February 2015.

Using CSS3 Today

Understanding CSS Transitions

  • Even though it is in draft, CSS transition support can be found in Safari 3+, Chrome 2+, Firefox 4+, Opera 10.5+, and IE10+.
  • http://www.w3.org/TR/css3-transitions/
  • Why not use JavaScript, particularly given all the popular frameworks being developed?  For non-critical UI it may be simpler just to add a few lines of CSS code.  But keep it simple and appropriate.

Hover-Crafting with CSS3

  • “Our job as designers is not to simply dress up the bottle and make it look pretty, but rather to find ways to enrich the story and enhance the message.”  Interaction is easily enhanced by CSS and not missed by those that don’t support it.
  • When using RGBA to assign colour values, specify a solid colour first as a fallback for older browsers that don’t support RGBA.

Transforming the Message

  • According to the W3C… CSS transforms allow elements style with CSS to be transformed in 2 or 3 dimensional space…
  • Bear in mind you can set a transform-origin.
  • Scale,  rotate, skew and translate…. then add the transition on top of that for a good effect.
  •  A demo by Paul Hayes using skew and transitions to create multiple 3D cubes from simple chunks of hypertext, http://www.paulrhayes.com/experiments/cube/multiCubes.html.
  • The Web Trend Map uses skew to place avatars on an isometric grid, creating unique data visualizations from otherwise flat elements (http://webtrendmap.com).

Multiple Backgrounds

  • Parallax scrolling – background images move at a different pace to foreground images which creates an illusion of depth.  This could be used when the browser resizes. https://en.wikipedia.org/wiki/Parallax_scrolling
  • Here I’m layering the four images, with the clouds at the bottom and stars on top in a comma-delimited list. (Notice the stacking order starts with the image “closest” to the user.)  I’m also repeating each of these horizontally, and setting them at differing horizontal positions (using positive and negative values) to make each layer “shift” at different speeds as the window is resized. And finally, I’ve fixed them in a locked position on the page with the fixed value.  The almost-black background color of #1a1a1a is added in last as a separate background-color rule.  Notice there are no dummy wrapper divs to layer them.
  • body {
  background: url(img/space-bg.png) repeat-x fixed -80% 0;

  background:
    url(img/stars-1.png) repeat-x fixed -130% 0,
    url(img/stars-2.png) repeat-x fixed 40% 0,
    url(img/space-bg.png) repeat-x fixed -80% 0,
    url(img/clouds.png) repeat-x fixed 100% 0;
  background-color: #1a1a1a;
}
  • Older browsers will lose the look and feel, so you can initially  specify a single fallback background image for browsers like IE7 and 8 which will simple ignore the multiple backgrounds.

Enriching Forms

HTML5 for Web Designers – Jeremy Keith – A Book Apart

Leave a comment

I’ve read this book many times, but it’s good to be reminded of some of the underlying principles of HTML5… The Semantic Web… All the effort that went into supporting existing content.

Keeping it Simple

  • Doctype declaration <!DOCTYPE html>
  • Character encoding declaration <meta charset=”UTF-8″>
  • <script src=”file.js”></script>
  • <link rel=”stylesheet” href=”file.css”>
  • Anything goes.. uppercase, lowercase, quoted, unquoted, self-closing… You can decide on a coding standard.
  • Backwards compatible so tags are obsolete and not deprecated.
  • Presentational elements are obsolete… use CSS.
  • APIs for creating web applications in HTML5

Tags which have changed…

  • <small> now a semantic definition for the ‘small print’
  • <b> used to be bold, but now it is ‘stylistically offset’
  • <strong> text with extra importance
  • <i> no longer italicised rather ‘in an alternate voice or mood’
  • <em> text with an emphasis
  • Try to think beyond visual rendering environments.
  • <cite> no longer means a reference, rather ‘the title of a work’
  • multiple elements can now be nested within an <a> tag

Rich Media

  • <img> once an image has been served up to the browser it cannot be updated.
  • <canvas> is an environment for creating dynamic images, backwards compatibility is achieved as only browsers which don’t support the canvas element render the markup between the tags.
  • https://html.spec.whatwg.org/multipage/scripting.html#the-canvas-element
  • The DOM can have many nodes – element nodes, text nodes and attributes.  The <canvas> element has no DOM, therefore content cannot be represented as a tree of nodes which is a problem for screen readers, and therefore accessibility.
  • Unobtrusive JavaScript – enhanced content using JavaScript degrades gracefully in browsers who don’t support new features… also consider accessibility and assistive technologies.
  • https://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html
  • <audio src=”AGreatSong.mp3″ controls loop autoplay> </audio>
  • Audio formats… mp3 is licensed, but you can specify different formats for different browsers… audio/ogg or audio/mpeg, which is useful for falling back using an object element…
  • Video formats… all very similar to audio formats.

Web Forms 2.0

  • Placeholder text for form fields.
  • Autofocus
  • Required
  • Autocomplete

Semantics

  • http://alistapart.com/article/semanticsinHTML5
  • use the class attribute to add more semantic value to elements, classes are for CSS and can also be used in DOM scripting.
  • Microformats, conventions agreed by a community, using the class attribute, hCard, hCalendar, hAtom, which enables one to extend browsers and parsers to work with these specific patterns.
  • <mark> </mark> element, shows items currently of interest.
  • <time class=”dtstart” title=”2015-11-07″> 11th November 2015</time>
  • <meter> </meter> for marking up measurements
  • <progress>
  • <structure>
  • <section> very similar to div, only difference is that div has no semantic meaning, ask yourself, is all the content related?
  • <header> elements can also exist within a <section> element, as with <footer>
  • <aside> for tangentially related content, nice to have but you can removed them without significantly changing the message
  • <nav>
  • <article>
  • <hgroup>
  • Scoped styles, particularly with the use of h1 to h6 within sections.

Using HTML5 Today

  • The most important question, is what happens if I implement all these new tags, etc?
  • What would be interesting is a rewrite of the status quo a few years down the line, what has the uptake of all these new structural / semantic tags been like?  Anyone using the aside element?

 

WordPress Themes

Leave a comment

Top tips for creating WordPress themes…

Plugins & Themes

Enqueue Scripts

Hooks

  • Remember  wp_head() right before the closing </head> and wp_footer(), right before the closing </body>.   Then plugins can use them to add stylesheets and scripts.

Security

Review

Copywriting

Leave a comment

Copy can affect moods, sway opinion and influence moods.  We need to engage the audience.  So, “Who is your audience?”  is it your client, your client’s customer, general public?

Step 1 – Planning

Content strategy… What is your story?  Who is your story for?  Then decide how to tell your story, choosing the language, tone of voice, tense etc… to use.

Involve all stakeholders in the content production process.

Step 2 – Creating

Consider the content inventory, if there are existing guidelines use them so that you write consistently and authentically in terms of the required brand tone of voice, language, etc.

Step 3 – Measuring

How do you measure the level of engagement? What metrics are available to you?  Social media activity, analytics, A/B testing content.  Feedback direct from your audience.  Regular Review.  Ask yourself, have you achieved the purpose you set out to achieve?

 

Gather Content – 30 day trial available – Webinar – https://gathercontent.com/editorial-content?utm_source=blog

Website Performance

Leave a comment

Heuristics

For a website to appear slick it should load within 1 second on Wi-Fi and 2 and a half seconds on 3G.

Inlining to enhance performance:

inlining – serve up some CSS in the same file as the markup, which reduces the number of server requests for a page.  When the browser encounters externally linked CSS it will effectively stop everything its doing, the request, download and parse the CSS.  Then it will go back to rendering the page.

Develop code in silos, then optimise afterwards, hopefully tools can automate inlining as a production step.

A Book Apart 13 “Responsible Responsive Design” – Scott Jehl

HTTP/2 vs HTTP/1.1

 

Digital Style Guides and Branding

Leave a comment

Digital branding is visually presented online on:

  • webpage
  • mobile page
  • mobile app
  • email footer
  • Facebook Ad
  • display banner
  • social post,
  • …

Questions to ask clients:

  • How should the logo behave at different responsive breakpoints?
  • Is there an icon fallback for small screens?
  • What are your web typography standards?

Display the digital style guideline online, build a simple HTML framework to display and categorise your elements clearly and provide code snippets.  Include downloadable digital assets (PNGs, SVGs, font files, etc…).  Downloadable PDF containing the print rules.

Consider:

  • logo usage (dimensions, colours, padding)
  • responsive logo views
  • logo icons (app icon, favicon)
  • RGB colour references
  • CSS typography styles
  • the standard masthead and footer
  • iconography
  • buttons (primary CTA, secondary)
  • patterns (overlays, backgrounds)
  • grid structures
  • form styles
  • animation examples
  • video opening and closing frames
  • social post examples
  • accessibility standards

Examples