Brian Dys

Category: The Ride

  • The Power of the Tooltip

    —

    by

    Brian Dys
    in ,

    Discovery has always been part of our experience in using web sites and apps. They could be in any form: clicking an ambiguous icon to find out what it does going through multiple pages to find information finding out what’s causing an alert icon beside a label learning and memorizing keyboard shortcuts …and the list…

  • Elements of CSS V2

    —

    by

    Brian Dys
    in ,

    The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML. Nature Nature refers to the individual characteristics of an element. Display (display) Dimensions (padding, width, height) Theme Theme refers to the visual…

  • Label and Icon Combo

    —

    by

    Brian Dys
    in ,

    In general, label and icon combination is helpful in making an action easier to remember and depict. Take a look at the left menu of this WordPress Dashboard: And when there are no icons: Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons…

  • Action Padding

    —

    by

    Brian Dys
    in ,

    The HTML Anchor Element <a> should also stand for “action” since its use is very powerful from being a simple hyperlink to being an element that performs a specific action. Think icons in web apps that are <a> underneath the HTML markup. Link Padding on Actions You might have a 16×16 px icon for a…

  • Link Padding

    —

    by

    Brian Dys
    in ,

    Link padding simply means adding padding to the HTML Anchor Element <a>. It is important that we don’t leave the link as it is – we must make it large enough to be easily activated by any pointing device (mouse pointer or touch). Let’s take a very simply example – a set of navigation items:…

  • On Deducing a Web App into a Document

    —

    by

    Brian Dys
    in ,

    Make example of how simple a semantic markup can be made into a component. Use Search for example. While HTML adjusted for the use of fragmentation in content structure (e.g., Form label scattered across the place and only connected by ID’s and for attributes), as well as ARIA adopted to Web Components to provide meaning…

  • HopScotch Is an Official WordPress Theme

    —

    by

    Brian Dys
    in ,

    I received a confirmation that HopScotch got approved in WordPress Themes Directory. View HopScotch in WordPress Themes Directory

  • Picture Frames, Time to Go Digital

    —

    by

    Brian Dys
    in

    Picture Print I took a portrait using my DSLR. It produced an image with a 3:2 aspect ratio. I went to a photo lab to have it printed. Do I want it cropped? Hell, no. I spent hours enhancing and editing it. Besides, I already cropped it to perfection in Photoshop. No cropping? Then here…

  • On Government Information and Finding It

    —

    by

    Brian Dys
    in ,

    Reading in Facebook about an upcoming Procurement Hack by the Open Data Philippines and PhilGEPS, I followed a link to http://data.gov.ph/hackathon and I was shown a 404 Not Found page. I still want that information I could have been well within my wits to simply use Google Search but the immediate thing I did was…

  • Infomap

    —

    by

    Brian Dys
    in ,

    What is Infomap? Infomap is a spinoff of information architecture – it is a small part of it and is specifically for the usage of designers in creating Interaction Diagrams (basically a diagram of wireframes showing interaction; details on this in the future). What is the purpose of Infomap? It helps in setting up the…