Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
We’re working on two projects that we’d like to share with you – Visual Variables and Animation Diagram – both of which aim to bridge communication between visual and front-end designers working on web projects.
Check back on Monday for updates.
Visual Variables and Animation Diagram are available!
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
textarea of HTML and CSS are editable to immediately update and reflect the changes on the web view.
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.
- Contain the web view in
- Reset the style by targeting the parent selector of the web view container
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.
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).
What goes into the creation of HopScotch?
The name HopScotch was derived from the children’s game, hopscotch. According to Wikipedia:
Hopscotch is a children’s game that can be played with several players or alone. Hopscotch is a popular playground game in which players toss a small object into numbered spaces of a pattern of rectangles outlined on the ground and then hop or jump through the spaces to retrieve the object.
The idea of sequential blocks that form the whole diagram is the basis of the name adaptation. Similarly, the structure of HopScotch’s HTML is arranged based on the importance of the information. This basic idea is inherent in each group of data that form a source of information.
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.
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
- Information (HTML)
- Information Architecture
- Content Structure
- Presentation (CSS)
- Visual Design
- Interactivity (JS)
- Inherent characteristics of an element (display)
- Positioning (float, position)
- Dimension (padding, width, height)
- Spacing (margin)
- Colors (color, background-color)
- Typography (font-size, font-family)