Category: The Ride

The layout of HTML Patterns contains the following:

• web view of the HTML markup and CSS
• source view of the HTML
• source view of the CSS

Both the textarea of HTML and CSS are editable to immediately update and reflect the changes on the web view.

The Problem

One thing that gets in the way is that the stylesheet of the site gets applied to the content in the web view. The favorable behavior is for it to appear unstyled by default and only the CSS in the source view will affect it.

Possible Solutions

1. Contain the web view in div and use style scoped
2. Reset the style by targeting the parent selector of the web view container
3. Use iframe srcdoc

Each of these solutions are not without quirks. I will do a quick follow up as I test for the best solution in this situation.

Stay tuned!

10/01/2014

As far as HTML Patterns is concerned, I settled with #1 – the original solution. Although style scoped is only supported by Firefox, the important thing is that the HTML markup is seen and it is interpreted in the web view. An advantage for Firefox users – they will get to see the style in the web view, too.

Regarding resetting the style of elements in a specific container, the CSS property all and its value initial, again, is only supported by Firefox. What I did was to manually reset each property that was previously set by the HopScotch stylesheet.

iframe srcdoc works best in bringing back the style of the content to browser default but it’s hard to control when it comes to live-updating the CSS (aside from the fact that, again, only Firefox supports that attribute).

I’ve had the privilege to attend a talk at Camera Cart about branding for photographers.

Heidi Aquende invited me to their studio’s 6th anniversary. She did not say who were speaking – only the topics. I chose the first one in the morning and it she who’s speaking.

Please read with discrection since these are simply notes from the actual context of the talk. Nevertheless, the gist is in there.

Make a brand around your company

Using your own name as the company – better because of perceived trust that you will protect your name’s reputation.

Brand Perception

• functional/technical
• emotional

Tip #1 – Offer quality work

• be confident with your work
• poor quality can quickly damage your work
• let clients see you only want quality
• it’s not just the service but also the products
• appear quality – be presentable

Tip #2 – Be clear about what you stand for

• unique selling proposition
• what are your values
• what do you promise your customers
• what makes you one in a million

Tip #3 – Stand out, be different

• differentiate and customize

Tip #4 – Be consistent

Tip #5 – Choose your team

• suppliers, employees
• choose who represents you

Tip #6 – Price better

• don’t show price in the website
• discounts and low prices attract price-sensitive clients who might not be for long-term
• price wars ruin industries
• price drops teache people to wait for the sale which is soemtimes bad

Pricing – 4 ways

• big guess
• competitive pricing
• cost pricing
• demand pricing

Tip #7 – Find the right clients

• you can’t please everyone
• it’s not just about demographics anymore
• rich clients are not necessarily your clients

Tip #8 – Give over the top customer service

• under promise, over deliver
• listen to negative feedback

Tip #9 – Nurture relationships

• Pareto principle – 80% of your income comes from 20% loyal customers
• keep evangelizers happy
• reward referrals
• constantly surprise clients

Tip #10 – Think long term

• don’t scrimp on your brand
• prepare for refund
• plan ahead

• Semantic HTML
• Semantic class names
• HTML Document Outline
• Microformats
• Schema
• Validation
• Accessible name and Friendly name

Here are some guiding principles we’ve adapted along the way in the web design and development industry:

• It’s easier to ask forgiveness than it is to get permission.
• DRY – Don’t Repeat Yourself
• KISS – Keep it simple, stupid
• HMW – How Might We?
• Be open to changes/improvements
• Invent, innovate
• Always set a purpose and goal in implementing design solutions
• Mind the PageSpeed
• Make it work and make it better

If a component is significant enough, it must contain a component name in the form of a heading element (e.g., h1).

But sometimes there’s a big tone discrepancy between the name of the component and what you want to say in the heading. Consider this example:

[html]
<div class="registration-component">
<h1>Welcome! Please register.</h1>
<form>…</form>
</div>
[/html]

Although, the context of a registration component is mentioned both in the class name and in the heading element, it still fails in providing an official name for the component which can be crawled by search engines and read by screenreaders.

The Solution

It would be what we call an accessible name. It is a formal name for the component inside a heading tag. In the existing example, the heading with the brand tone or voice would be a friendly name wherein we can get creative about.

Here’s a better example of that registration component:

[html]
<div class="registration-component">
<h1 class="accessible-name">Registration Component</h1>
<p class="friendly-name">Welcome! Please register.</p>
<form>…</form>
</div>
[/html]

In CSS, we could visually hide the accessible name and always use a friendly name even if they both have the same content (mostly for HTML markup consistency).

There are numerous types of user interfaces that we use in our designs – there are pages, screens, popovers, dialog boxes, alert boxes, sliders, tooltips, overlays, and the list goes on.

It is important for front-end designers to establish a system for naming such containers and reusing them all over our web projects via the class attribute of an HTML element (e.g., <div class="class-name">...</div>).

Say, for example, you want to define a container to appear as a dialog box. There are two important things to consider: first is the type of UI and the second is the state of that UI. The solution to this task is to hook up the class name of an HTML element with CSS. Then in CSS, the visual design for a particular UI type is already defined, as well as its different states (active or inactive).

The Naming Convention

Instead of mindlessly coming up with names, we must establish a naming convention (very similar to BEM) to help and guide us with repeatedly naming class names depending on the need.

In general, we would start from generic to specific in this syntax:

[code]<generic>__<identifier>–<specific>[/code]

The generic name says something about the whole naming convention – whether it’s a type of UI or a state of an element. The identifier is the element that narrows down towards the specific (in some cases if it answers to the generic name, it is the specific name). The specific name answers to the generic name similar to attribute="value" syntax (i.e., generic="specific").

Consider wanting to classify an element under a dialog box type of UI:

[html]
<div class="ui-type–dialog-box">
…
</div>
[/html]

Or defining a state of the dialog box:

[html]
<div class="ui-type–dialog-box ui-state__dialog-box–active">
…
</div>
[/html]

In our example, the generic names are ui-type and ui-state and the specific names are dialog-box and active, respectively. In the case of the generic name ui-type, dialog-box acts as the specific. And lastly, the separator between a generic name and an identifier is a double-underscore __ and the separator between a generic name or an identifier and a specific name is a double-dash --. The separators make the relationship between the names easier to understand and the syntax, easier to read for different front-end designers sharing front-end documents.

Further Reading

Metadata Syntax on Wikipedia

Hey there, welcome to Design DriveThru Blog.

This serves as our idea scratch paper – like the tissue you get a hold of in a restaurant during a light bulb moment.

The main purpose of this is to document work in progress about Front-end Design stuff. The secondary purpose is to share the thoughts with the design and development community.

I hope this gets productive and helpful.

~ Dys