July 2021

Brian Dys

Creative Leadership

About Snippet

Brian Dys

Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.

I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!

Home Current Index
682
Categories

Trying out Fangs – a Firefox screen reader emulator extension

10:38:41
10:38:41
Brian Dys Avatar Brian Dys
0
Comment

In a quest to streamline and improve our HTML markup, I’m looking at how the page would appear to a person using an assistive device such as a screen reader.

I’ve installed Fangs – a Firefox extension that “helps developers find accessibility issues in web pages and managers to understand how their website may appear to a person using an assistive device.”

In Fangs preferences, switch the output style to “Sectioned” to have an overview of the sectioning of the HTML document — this is related to checking the outline.

Categories

Frontend UI Checklist Archive

10:21:15
09:13:38
Brian Dys Avatar Brian Dys
0
Comment

18 April 2013

Step 1: text + semantic tags

Convert the mock-up to plain text and wrap each text to its semantic HTML tag

  • write using notepad/simple text editor and save as .html
  • no need to write <html><body> etc… begin writing the actual markup of the module you’re assigned to
  • don’t use <div> or <span>
  • for headings, use only <h1> (no <h2>, <h3>, etc.)
  • put everything inside its semantic tag (e.g., if it’s a link, put inside <a>, if it’s a paragraph or a line of text, put inside <p>, etc.)
  • write based on your own knowledge (we’ll improve based on your output)
  • if you’re unsure which tag to use, use <p>
  • forget about the layout/colors, strip down the design to its core content
  • open the HTML in a browser to see if the “all-text” content makes sense and usable
  • as much as possible, limit your time to only 30 minutes
  • check the outline if it is correct: http://gsnedders.html5.org/outliner/

Step 2: Prepare layout structure

Wrap the module and its elements in <div> tags. Use 4-spaces as standard for indentations.

  • For modules inside the content area, wrap the module in:
    <div class=”mod”>
    <div class=”mod-cr”>
    Your module in step 1 goes here…
    </div>
    </div>
  • For header, wrap the module in:
    <header>
    <div id=”header-cr”>
    Your module in step 1 goes here…
    </div>
    </header>
  • For footer, wrap the module in:
    <footer>
    <div id=”footer-cr”>
    Your module in step 1 goes here…
    </div>
    </footer>

This template model provides for the first container to have the display, positions, floats and the second container the width, padding, margin, border.

Apply box-sizing:border-box to the second container to fix the box model.

6 March 2013

So you’ve been developing the front-end all along but you’ve forgotten to setup a Google Analytics for the site. Not too bad, right?

But when you’ve taken for granted the IE browser version 8 and below, that’s when you should acknowledge a headache.

Checkout this list of things to account for when developing the front-end of a website.

To start with:

  • Use HTML5 Boilerplate
  • Create a favicon by adding this line: <link rel=”shortcut icon” href=”img/favicon.ico”>
  • Customize Modernizr according to your needs
  • Fill-up the meta description in the <head>
  • Add the document <title>
  • Add a separate stylesheet for your custom styles: <link rel=”stylesheet” href=”css/ui.css”>
  • Add Google Analytics

As you go along:

  • Convert the design to pure text only
  • Wrap each text in semantic HTML tags
  • Check the outline of the document if complete
  • Check the document structure on a browser if it makes sense from top to bottom
  • Wrap the groupings in <div>s and <span>s
  • Put the markup blocks inside the skeleton template
  • Name the <div>s with ids and classes
  • Consider mobile-first styling
    • No floats and positioning
    • Style first the color and background-color
    • Build the design as you go from mobile to wider views
  • Check the layout concurrently with IE7 and IE8, if supported

Forms

  • Put “for” in <label> and “id” in targeted form elements
  • In using tabindex, start with 1
  • List down all inline and generic message validation
  • Always put <label> in forms for screenreaders
  • Don’t forget error messages

Add title tag to icons without text labels — in case the user couldn’t decipher which icon he’s hovering on, a tooltip will appear.

Put states in icons — make it position:relative and on :active, put top:1px

Always put a control to remove notification messages away. A “dismiss” link or close button would suffice.

16 January 2013

Filenaming

  • Filenames should always be descriptive
  • Use dash(-) for separating words not underscore(_), i.e. user-account.html, main-banner.png
  • All small letters

Images

  • Use png for transparent background images like icons.
  • Use image sprite for images with the same sizes instead of separating each image.
    Ex. icon-16.png (16x16px icons); icon-32.png (32x32px icons)

Coding

  • Use “Tab” key for indention
  • Always add comment for every closing tags, mainly divs.
    ex. <!- -End Main Div –>

Others

  • Make sure all websites are responsive to all smartphones(iPhone, Android, Tablet)
  • Always test to all browsers, especially IE
  • Favicon(16x16px)

5 December 2012

While marking up, know beforehand which versions of old browsers you will be supporting.

  • Check the layout early and often in lower versions of IE, especially IE7 and IE8

Setup notification messages or “notifier”

  • stationary messages
  • fading messages (similar to a toast in Android)
  • make it closer to the form
  • if site-wide, have a consistent area where the notifier appears
  • yellow for regular notification
  • red for error
  • blue for information
  • green for success

Always name the main wrapper accordingly. For example:

<div id=”page” class=”page-dashboard”>

Dashboard pertains to the page/screen.

Layering of elements – use position:relative and z-index numbers, 1 being the lowest (under the stack).

19 July 2012

Before launching a website, here are several checkpoints to validate:

  1. Valid HTML and CSS markup
  2. Browser compatibility
    • Firefox
    • Chrome, Safari
    • Opera
    • IE 7 to 9 (forget IE6)
    • Tablet browsers (iPad, Samsung Galaxy Tab 10.1)
    • Mobile browsers (iPhone, Android mobile device)* For Desktop browsers, check both in Mac and Windows 7
  3. Search engine result — how it would look like when shown in Google search results
  4. Facebook share view — how it would look like when shared in Facebook

9 July 2012

Guidelines on how to sprite icons for use in sites

  • Group icons horizontally
  • One file per pixel dimension (16×16, 24×24, 32,32, 48×48)
  • Provide three rows per group (for normal, hover, focus)
  • Add another group below the last row of the first group
  • For additional icons in a group, extend the canvas to the right in an increment depending on the pixel size of the icons (16, 24, 32, 48)
  • If an icon is not exactly 16/24/32 in its boundary, align it at the center horizontally and vertically
Categories

Things to add to HTML5 Boilerplate HTML markup

14:41:17
14:41:17
Brian Dys Avatar Brian Dys
0
Comment

Editing HTML5 Boilerplate 4.1.0

  • Edit line: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.5“>
    • For mobile device browsers, set the initial scale to 100% zoom and limit the zooming to 150%
  • New line: <link rel=”shortcut icon” href=”img/favicon.ico”>
    • Place your icon inside the img folder
  • New line: <link rel=”stylesheet” href=”css/ui.css”>
    • Start with a blank stylesheet alongside normalize and main.css
Categories

Creating hi-res icons

18:57:00
01:05:29
Brian Dys Avatar Brian Dys
0
Comment

While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image.

While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion.

We have website icons sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.

Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.

In you CSS:
width:32px;
height:32px;
background-size:1000%;
background-position:-32px 0; /* in increments of 32 pixels */