Category: Frontend Design

  • Press Time: Using CSS Transform to Nudge a Button

    Two of the ways in which you can show an illusion of a button being pressed are: darkening the background-color and nudging its vertical position.

    See the Pen Press Time by Brian Dys Sahagun (@briandys) on CodePen.

    It is important to provide for a hint when a user activates an element in your user interface (in this example, a button). The feedback assures the user that the element “responds” to his action.

    The advantage of using transform: translateY is that it does not affect the elements around it (unlike using margin or padding).

  • The Separation of HTML and CSS

    The Separation of HTML & CSS
    An illustration of HTML on the left and CSS on the right.

    In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup.

    In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation of the HTML markup.

    Consider the scenario wherein you, as the front-end designer, have only 3 chances in having control over the HTML markup and on the other hand, an unlimited number of revisions and updates on the visual design aspect of the project.

    This indeed is a far-fetched situation – but it definitely will get us creative in setting up the HTML markup or in planning ahead. This scenario encourages us to use semantic names in the class attribute of the HTML markup as opposed to peppering it with presentational class names which are heavily tied up with the style sheet.


    In this basic HTML and CSS tutorial, we are going to demonstrate the following:

    • the separation of HTML (content structure) and CSS (visual design)
    • how to position a secondary element (like a graphic element or a label) thru CSS position: absolute and padding

    And some disclaimers:

    • while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
    • it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
    • it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole

    Separation of HTML and CSS

    HTML markup is intended for chunks of text content to have meaning for web browsers (screenreaders and search engine crawlers too, among others that I am not aware of) so that they could very well translate the content into something that people would understand easily.

    The text content along with its HTML markup must stand alone without the CSS layer. The content structure must remain intact and must be established before fully considering the visual design. Imagine writing a document in rich text format wherein you could create headings, lists, etc.

    This separation prevents the compromise of the content structure. For example, in a visual design mock-up it is shown that the navigation is located on top of the brand logo – in the HTML, should the author be putting the navigation markup first before the brand name markup or vice versa?

    In web design, it is not our ultimate goal to only replicate the visual design mock-up using HTML and CSS. While it is important to achieve visual quality, there’s an optimal approach in doing it while adhering to HTML’s semantic intentions. And semantics is the way to properly communicate with search engine crawlers and screenreaders. And of course, ultimately the people to whom the information is served.

    The Example

    The “Next Post” and “Previous Post” links are common in blog websites. Sometimes they also contain the article titles. Here’s a sample screenshot from PetaPixel.

    The Next & Previous post links in blog websites

    Step 1: Establish the content structure

    Let’s say we want to show the article titles along with their respective labels; the raw content would follow this structure:

    Previous Post: Previous article title
    Next Post: Next article title

    We give importance to the previous article that’s why it’s on top. But if our intention is for the reader to read forward to newer posts, we put the next article on top.

    Step 2: Markup using HTML

    <label>Previous Post:</label> <a>Previous article title</a>
    <label>Next Post:</label> <a>Next article title</a>

    Marking up in HTML involves semantics – meaning, assign the HTML element that conveys the meaning of that content. Sometimes it is objective and sometimes it depends on the HTML author’s intention.

    In our example, the objective nature of “Previous Post:” is that it is a label and it is also our intention – for it to be a simple text label that’s why we marked it up by the HTML label tag. For the article title, our intention is for it to be a link, so we marked it up by the HTML a tag.

    But since the label tag is intended for form elements, we choose another HTML tag that could convey the label meaning. Unfortunately, there isn’t any other HTML element intended for labels outside of forms. Here will come in handy, the generic inline tag which is span. Only use it as a last resort if you can’t match the content with its semantic HTML tag.

    <span>Previous Post:</span> <a>Previous article title</a>
    <span>Next Post:</span> <a>Next article title</a>

    Step 3: Put the proper HTML attributes

    <span class="label">Previous Post:</span> <a href="#">Previous article title</a>
    <span class="label">Next Post:</span> <a href="#">Next article title</a>

    Since span is a generic element, we must put a class attribute with a class name to make it semantic.

    Step 4: Label the component

    <span class="label">Post Navigation</span>
    <span class="label">Previous Post:</span> <a href="#">Previous article title</a>
    <span class="label">Next Post:</span> <a href="#">Next article title</a>

    Consider these links as one control – a type of navigation that aids the reader to navigate through old and new articles. In this regard, we could label it “Post Navigation”.

    Step 5: Check the HTML document in a web browser

    Remember about the separation of HTML and CSS? Apart from giving importance to the content structure (the arrangement of content according to its importance from top to bottom), we should also give importance to the bare HTML document that is displayed in the web browser.

    Does the content displayed conveys the content structure? Does it show hierarchy of information? Or the very least, is it readable? One could argue that it is readable – although we could further improve its readability by further improving its sematics.

    Step 5: Level up the semantics

    We will be adding several HTML tags not to “fix” the layout of what the browser displays but to be more semantic which in turn, positively affects the way the content is displayed and laid out in the web browser.

    <div class="post-navigation">
        <span class="label">Post Navigation</span>
        <ul>
            <li><span class="label">Previous Post:</span> <a href="#">Previous article title</a></li>
            <li><span class="label">Next Post:</span> <a href="#">Next article title</a></li>
        </ul>
    </div>

    Here comes the importance of knowing if an HTML element is block-level element or an inline-level element. To simply put, block-level elements simply block off the entire width of the space it occupies while inline-level elements could be joined together on a line – just like in our example on Step 5.

    So, basically, span is an inline-level element, as well as a that’s why they are displayed all on one line.

    On using <div>

    Use div to contain components or content when there’s no appropriate HTML elements that match. Another thing is div provide for the flexibility to nest or contain any kind of HTML element unlike p, HTML standards does not allow it to contain a div, for example.

    On using <p>

    Personally, I would use p or the paragraph tag as a substitute for div as a block-level element. This is OK for simple text content.

    On using <ul>

    ul stands for unordered list. I intend to treat the previous and next content to be a list of actions. Though one could also simply intend to treat them as they are, like:

    <div class="post-navigation">
        <p class="label title">Post Navigation</p>
        <p class="previous-action"><span class="label">Previous Post:</span> <a href="#">Previous article title</a></p>
        <p class="next-action"><span class="label">Next Post:</span> <a href="#">Next article title</a></p>
    </div>

    But I prefer using ul as it conveys structure.

    Step 6: Check the HTML document in a web browser

    That’s more readable, right? While its underlying markup wasn’t constructed to convey layout but meaning.

    Step 7: Pre-CSS – classify HTML elements

    Now that we got it going for us in terms of readability, we can now proceed to setting-up our HTML markup for CSS considerations.

    While the HTML markup of the example above is OK on its own, we must remember that working with CSS requires us to easily pinpoint or target HTML elements directly or at least using fewer selectors, otherwise it would be very difficult to style such elements. We could achieve this by naming HTML elements thru the class attribute. And these attribute values we will use as selectors to pinpoint the HTML element.

    <div class="post-navigation">
        <p class="label title">Post Navigation:</p>
        <ul class="action-list">
            <li class="previous-action"><span class="label">Previous Post:</span> <a href="#">Previous article title</a></li>
            <li class="next-action"><span class="label">Next Post:</span> <a href="#">Next article title</a></li>
        </ul>
    </div>

    Here, we specifically classified “previous-action” and “next-action” so that we could easily pinpoint it during the CSS phase. Of course, apart from CSS considerations, this approach is an added semantics to our HTML document because apart from marking up the content as a list, we specified what type of content are contained within each list item.

    At this point, I wouldn’t say that classifying each HTML element is purely for semantic purposes only because we are already transitioning towards the CSS phase, thus pre-CSS.


    Watch our for the second and last part of this tutorial tomorrow wherein we will demonstrate that CSS could simply transform the content displayed top to be laid out at the bottom (or anywhere else).

  • Recreating Spotify’s Album Cover

    Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis.

    Circular images everywhere

    No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take it to the extreme, the corners vanish and the shape becomes a circle.

    Spotify’s app presents album and artist covers in a circular manner with the same picture faded in the background.

    Spotify - Album Covers
    A screenshot of Spotify’s Mac application showing the circular album and artist covers.

    This is what we’ll recreate using HTML and CSS.

    (more…)
  • CSS Regions–we’re waiting for you

    Your content will flow through various containers (called regions) which you specify.

    The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.

    Source: http://dev.w3.org/csswg/css-regions/

    CSS Regions
    An analogy of CSS Regions using a faucet and water flowing through interconnected containers.

    Imagine a magazine layout where you could have multiple columns in your article or where the cut of a paragraph continues to the next page.

    With all these CSS developments going on, one could really build a web app based on HTML and CSS as its front-end.

    We’re really in the 21st century.

    Also, checkout Adobe & HTML’s page on CSS Regions.

  • To or to

    ?

    I’m being confounded about an article I’ve read about your logo being an image (and not a background image). You would notice about the differences between the two wherein img puts your actual image on the page and h1 replaces the text with a background image of your logo.

    You may be using one method over the other — and to calm your nerves down, Facebook and WordPress use h1 approach while Google and Firefox use img approach (and a whole lot of different combinations for other sites out there).

    Now, I won’t go into details about both methods because I’m sure you’re already using one — even different from the two mentioned. What’s important is the answer to “why are we using what we use?”

    The answer lies on your priorities.

    • You like the underlying text to be the document title of your webpage
    • You like the logo to be presented as is — an image of a logo

    If you’ve answered the former, then most likely you’re using h1 approach and the latter, img approach.

    Personally, the way I test if I’m writing a web document properly is I strip it off everything — images and CSS — and see if it still makes sense from having semantic HTML elements to its document outline. And one of the natural steps in this test is having a heading on top of your document — usually the title of the site — it could be a logo or an photograph with an inscription — but what it represents is more important.

    There are lots of combinations in putting up a logo on your webpage — just be conscious of why you’re choosing one approach over the other.

  • Frontend UI Checklist Archive

    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
  • From vitruvian to breakdancing: The three frontend layers of a webpage

    This week, I’m conducting a workshop on basic HTML and CSS at Chikka. Participants come from the corporate communication, creatives, and content teams. For a martian to easily digest a complicated topic such as a webpage, I’ve used a human being as a metaphor for the three frontend layers of a webpage.

    Frontend meaning the webpage not needing any database or server — it should launch and run even when all you’ve got are notepad, Internet Explorer 3.0, and zero prepaid load in your EDSA Mail internet dial-up connection account (no internet needed!).

    HTML: the structure layer

    Think about a simple human body; disregard the color of its skin or the length of its hair or whether it is male or female — god simply made it with a head, body, and legs. No complicated hiphop outfit nor nice slick pompadour; it doesn’t have any flavoring not even vanilla. It’s only a naked human being. That’s our HTML markup — purely focused on the very essence of the structure of the content.

    Vitruvian Man

    The HTML markup is what you see when you view the source of a webpage or when you open an HTML document in a text editor.

    That’s the structure of the content of your document. For example, your webpage is an article about cats, then most probably, the structure of your content is arranged according to this:

    • Header
      • Site name
      • Navigation
    • Content
      • Cat article
    • Footer
      • Copyright information

    Of course, each item I enumerated has a corresponding HTML tag like for the header group it is <header>, etc.

    It is best to forget about CSS when we’re laying out the structure layer. What all matters here is the structure of your content — don’t you ever write <header> at the bottom of the document because that’s not the correct structure. Header should be at the top, footer at the bottom.

    Also, what we should give attention to in laying out the structure layer is semantics. Meaning, if you’ve got some important title or heading in your design, make it <h1> or <h2> depending on the hierarchy of your headings. Don’t use the heading tags for their font sizes; use them to show hierarchy in your headings. <h1> being the most important like the title of your site or the heading of your cat article. Likewise, if you have a list of anything, use <ul> or <ol>.

    Open the HTML document in a browser, close your eyes and let someone read your HTML webpage per element from top to bottom, from left to right (or right to left in other cases) and say “next” if you want to proceed to the next element. If it makes sense to you, then most likely you’ve made the right structure.

    To somehow test its semantics, you may want to use a screen reader. Everything should make sense to you while listening and “browsing” the content.

    CSS: the presentation layer

    Now, it’s time to present our naked human being to the world. It needs something to wear. Something like Sailor Moon’s costume.

    Sailor Moon

    That’s CSS, short for Cascading Style Sheets. A set of instructions that our HTML document takes to have a visual design like background color and many more.

    CSS could also make HTML elements be positioned anywhere on the webpage whether at the left, right, top, or bottom.

    JavaScript: the interaction layer

    And lastly, whenever you want your vitruvian man to do some break-dancing, add some script.

    A practical example is the validation of a form. Of course, we’ve got our content which is a form (HTML) and we’ve dressed it up with spanking gold-colored buttons (CSS), now it’s time to make it show messages when a required field is skipped and to never ever activate the button until the user fills up correctly all the required fields (JavaScript).

    Combine all three layers and you’ve got that breakdancing streetdancer.

    Minus the baby-kicking.

  • Designing HTML Emails

    Designing HTML emails is just like designing a webpage. You go planning your page’s width and length of content and consider its appearance in your target browsers. Only that one of the browsers to consider is IE6! This is just an analogy to the fact that not all email clients have wide support for HTML and CSS.

    Popular email clients include: Microsoft Outlook, Gmail, Yahoo! Mail, Hotmail, and email clients used by specific platforms like iPhone, iPad, and Android. All of these top clients should be considered for the simple fact that it just might be the one your recipients are using. You wouldn’t want to send a “broken” email, would you?

    Here are two important things to remember in designing your HTML emails.

    (more…)