0
Comment
This is just what we need for government websites in Philippines – web design standards:
Once and for all, stop thinking too much when you write. Pages and pages of ideas pass you by as you think too much. Write, just write.
Let this be a sketchpad wherein raw ideas – instead of getting drawn – get serialized into a whole that might make sense. To you, to me and anyone in between.
—
My name is Dys – the lead designer of DYS design studio. Our power is in designing user interfaces for the web.
In here you might find stuff about the design process, front-end development and WordPress. And some of the tools that I use to make things happen.
Please bear with me if everything in here is a work in progress, open to debate and unassuming & unapologetic at the same time.
24 August 2015
UX Week, SF
Being here in SF opens up my mind towards wanting a higher goal for my career. Do I really want to be in a developed country? What’s the higher goal? Well it’s more of for myself really – to worry less about the mundane things that the government fails to take care of like infrastructure and other stuff. I can’t pinpoint exactly. It’s like I know that I’m most needed in my country but it’s true that it’s a long way to go. I want my family not to experience these hardships. I don’t know. I need to talk to my partner about this.
In time for the celebration of International Women’s Day today – we celebrate women’s achievements, we call for greater equality. #MakeItHappen
It is good news that Philippines ranks number 9 out of 142 countries in the Global Gender Gap Report 2014. This means that the gap between genders in many aspects of our economy is getting slimmer.
And what is it to us as a country?
People and their talents are two of the core drivers of sustainable, long-term economic growth. If half of these talents are underdeveloped or underutilized, the economy will never grow as it could. Multiple studies have shown that healthy and educated women are more likely to have healthier and more educated children, creating a positive, virtuous cycle for the broader population. Research also shows the benefits of gender equality in politics: when women are more involved in decision-making, they make different decisions—not necessarily better or worse—but decisions that reflect the needs of more members of society.
~ Klaus Scheab – Founder and Executive Chairman, World Economic Forum
I’m currently working on HopScotch 3 and it involves a lot of revising the HTML markup of content structure plus a lot of structural class names.
In relation to this HTML refactoring, I’d like to share with you some notes on writing the HTML markup of web sites:
- Text. Begin by writing in plain text all the important content your web site has. For example, you might have a web site logo – translate it into words; if you web site has a tagline or description, write that too.
- Tag. Follow it up by wrapping each text content in its semantic HTML tag. Avoid using
divorspanjust yet. For example, your web site name should be wrapped in a heading tag likeh1since it is the title of your HTML document; your tagline could be wrapped in aptag. At this point, all heading tags could be inh1since we have not put these objects in context yet. Eventually, we would be arranging the hierarchy of these tags – fromh1toh6. - Group. This is where div and span will come into play. You will have to group and segment the objects based on semantics and not on visual appearance. For example, you could wrap both the web site name and tagline in one
div. - Classify. Put the class names into the grouped structure of the objects. For example, the
divthat contains the web site name and tagline could be classified as “web-product-name”. The test for its semantics is if the name is true to the objects’ nature – something that isn’t tied up to visual appearance or layout. - Format. To add another level of semantics and structure to the objects, we could use Microformats. It uses a vocabulary of class names that give structure to common content such as a person’s information, a movie’s information, an organization’s information and much more.
Related Reading
Further Reading
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.
Example
To denote that an article entry does not have content, we add the class ui-cond__entry--blank which translates to “the UI condition of entry is blank”.
[html]
<div class="ui-cond__entry–blank">
…
</div>
[/html]