The site has a very basic design that has gone through numerous revisions all driven by its evolving content. It didn’t go through any branding – it’s logo is a bit of basic font-work. It’s colors have changed to reflect a balance of feelings I have witnessed in Andreea – both present and wished for. It went from soft, delicate and serious to bright, demanding and happy. The image in the header is processed from a lovingly taken photo I took of Andreea – though apparently some women thought it was a marketing image of femininity.

Feminitate was born as an after though on the heels of a similar website in Hebrew – at the time we were living in Israel. The Hebrew website got some traction but felt lifeless and unappreciated.  Then, out of nowhere, Andreea asked me to create a Romanian version. It started as a subdomain on the Hebrew website but soon after departed on it’s own path (the Hebrew website no longer exists).

Feminitate has less then 200 posts – most of which are written in a style I would describe as informative-accessible. It is meant to empower women by making information available to them when they need it. It does not offer entertainment or distraction. It is clear and focused.  It has never been marketed and never been promoted (SEO or otherwise).

Why has it been so successful?  I could probably formulate an intellectual answer like “it has a very specific niche in a very specific culture” and “it doesn’t have to compete to be overheard in the pollution of the English speaking Internet” and I may be right … but I think those are consequential side effects of something deeper.

Feminitate was created to cater to the needs of one person – Andreea and her need to express herself. It came as a surprise to the both of us because on the surface she had no connections to Romania, it’s culture, people or language (other then it being her mother tongue). Yet under the surface there was an intense movement … an awakening.

By catering to her own needs Andreea reached and touched other women … and together their momentum grew. The more ripples her writing had the more motivation she had to reach out and write more. Within a year Andreea was in a dialogue with Romanian speaking women (from Romania and around the world) and was receiving thankful emails regularly. She was also starting to give online consultations (by email, messenger, skype, etc.).

I remember a point in time where the site statistics indicated that a post about female anatomy had been viewed over 20,000 times (it is now nearing 40,000 views and there are over ten such “technical” posts that have been viewed more then 20,000 times and over 20 posts that have been viewed more then 10,000 times). What an amazing result … thousands of Romanian women are educating themselves simply by reading what Andreea had (literally) to write. I remember thinking to myself how powerful blogging can be … that no other medium has such an amazing and effective reach. How much effort would it have required to print 20,000 copies of that post and get it into the hands of 20,000 women?

However it wasn’t all smooth sailing. I don’t remember exactly  - but my impression is that for at least half of its online existence (3 years) the website continued to thrive without Andreea’s attention or involvement. Andreea lost her motivation to write or engage. We talked about it … a lot. Sometimes it felt to me as if she was failing to appreciate the value of her own work and as a result was also neglecting her responsibility to maintain it. Yet Andreea, being a woman, was not particularly moved by my motivational talks (it’s not that she doesn’t listen, she does) – she only wrote and only writes when she has a need to do so – when she feels connected.

Andreea’s second wave of writing was associated with her visit to Romania in the autumn of 2009. The response to Feminitate was so intense that we decided she should visit Romania and meet women in person. At the end of her 10 week visit I joined her for two weeks of vacation. 10 months later we had folded our life in Israel and were on a plane to Romania where we are in the process of creating a new life. We arrived in Romania with Andreea already a well known online figure. Now that online presence could begin to manifest in the physical world. I think it’s safe to say that almost all of her friends and social circles are a direct or indirect result of Feminitate.

I could not have imagined a better example of a website as an exploration and expression of purpose. Feminitate is an expression of Andreea’s Dharma – a website that has gone way beyond binary bits in a computer. Andreea is just now entering her 3rd wave of writing. I am excited to see what the future holds for us as we continue to explore this leg of our journey through life where Feminitate has been and continues to be a cornerstone.

Here it is directly from Google:

If you contact me and ask me about SEO I am most likely to reply by asking about your writing.

But the issue I want to address in this post is a wonderful example of what I consider to be misdirected decision making when UI decisions are in the hands of developers. WordPress 3.3 introduced a new media-upload interface. When you click on the new consolidated media upload button (there is now one where there used to be four – which is actually an excellent improvement) a new drag and drop surface onto which files can be dropped is displayed.

If you read about this feature inside the WordPress community then it will be hailed as a “cool” feature … and to developers or technically oriented users sitting in front of two screens it may be. However if you think about most users this “cool” feature is actually an obstacle.

For many (if not most) non-tech people “mouse drag & drop” is not an intuitive interaction – it is in a different league of difficulty compared to the simple “mouse click”. It is also fairly complicated to use when it involves more then one application window – which is why most people can drag & drop while playing solitaire but not much more.

I believe (no numbers or research to back this up so do with it what you will) that most people work with their browsers in either full screen or almost full screen mode (the latter mostly because they don’t know where to click  to get to full screen). Therefore the chance that they will have a screen containing a file browser and web browser side by side is very very slim. This means that for a lot of (if not most) people this will be a useless feature. Correction, it will be a distracting feature – standing in the way of something they already know, something they will have to figure out, something they will have to skip, EVERY time they want to upload media on their way back to the straightforward interface of “click & select”.

I am not one of those people. I am somewhere in the middle, I use drag and drop, I understand new interfaces fairly quickly. I work on one screen and my browser is full screen and I don’t expect to benefit from this feature. However this is not the end of the story – it isn’t just about what I like or like. There are further consequences in the two websites where I have upgraded to 3.3:

• In one site media uploading is dead – nothing works, neither the old nor the new. Since I upgraded I’ve been unable to upload images. I’ve gone over all the support suggestions I could find in the WordPress community and nothing helps. My personal support request, beyond an initial well intentioned response is hanging in the air silently and uselessly.
• In the other site the new drag & drop interface made a short appearance and I haven’t seen it again. Fortunately the older interface is still there and does work so I can still upload and publish images.

From searching the web I know that this feature has had other disturbing ripples, some of which have been solved.

I am confident that the WordPress developers in charge of this feature are proud of it as are their other colleague developers – I understand them, really, I’ve been in their shoes. But the introduction of this feature is a mistake – it sacrifices simplicity and core stability (uploading media is a very basic function) for a whim that very few people will benefit from.

How about getting that upgrade process to work instead of complicating things that already work?

At first we tried using the “Links” section that is inherently available on WordPress. We encountered several problems with that:

• The links cannot be arranged in hierarchical categories – only flat categories. Bhudeva needs at least two levels of categories – one to represent the site sections  and the other for categories within each section. We tried using the flat categories – but it was a mess.
• The native links are not well integrated into the overall data-model of WordPress. In WordPress all of the content is stored (behind the scenes) in one container called “posts” which can be refined and extended using post-types (an example of post-types is the teacher’s directory I wrote about). Links, probably due to their historic legacy are a unique entity and set aside from everything else. This means that integrating them into a theme is a nuisance (especially when compared to posts). We tries using  a plugin (Link Library) to do this – but that didn’t work out nicely at all for our needs and it would have required too much maintenance.
• It seems that native links were originally intended as a blogroll (a list of other blogs that a blog is linked to) – a concept which I think is largely obsolete (maybe this topic deserves a separate post) – which insinuates a certain scale (quantity of links). We are adding many more links, sometimes to single pages within other websites … and it felt like we were using the wrong tool for the wrong task.

Then WordPress 3.1 came out (just in time) with a new feature called post-formats. If this feature is enabled in your theme you will see a new box “Format” box (which will only show the options enabled in your theme) beneath the “Publish” box:

Though this may seem kind of pointless it isn’t. It makes it possible to customize a theme in such a way that posts of different formats are displayed differently. In Bhudeva we used this to treat posts that are marked as “links” differently then regular posts.

Here is how we used this new WordPress feature on Bhudeva:

1. We decided that all of our link would be posts – and we re-entered all the links we accumulated as posts (a bit of manual labor).
2. In these special “link” posts we decided that:
   • The post-title would be the name of the link.
   • The post-content would be the actual url (address) of the link.
   • The post-excerpt would be the description.
   • All links would open in a new window.
3. We used the regular post-categories to arrange our link-posts in as many categories as we felt were necessary (and we can continue to add and change the categories as we add more and more). Our categories are already arranged into sections so that the links fit perfectly into that.
4. Navigation in the link library is created without any programmatic intervention – we are simple using standard WordPress menus to present the link-post categories anyway we want.

One thing to note about post-formats is that these are actually posts that exist in the post time-line (unlike post-types which do not, by default, appear in the blog timeline). We considered this and decide to embrace and utilize it. Every link we add is essentially a post that appears in all the post-listings on the website.

We differentiated links from regular posts by giving them a unique design and behavior.Each link has a visual icon on the left hand side. The post title is visually emphasized and clicking it links directly to the website (instead of linking to to a single post page as is usually the case with posts.  This adds dynamic life to the website which is refreshed as links are added. It is also much easier for us to add new links as we encounter them.

In addition to this link-library we occasionally publish posts which contain numerous links in them (the links appear both as individual posts and in the bundled post). This happens when we approach a new (for us) subject and we bring together all the link that got us started on a topic.

We are happy with this result and are looking forward to see how it develops.

So now rather then being one pile of blog-based content, Bhudeva has been divided into a few clear sections. The site header now has a smaller menu for pages like about & contact. Then, the more prominent navigation menu reflects the different content areas within Bhudeva.

I deliberated for some time on using images in the section-navigation and in the end I came across a visual language that felt both clear and appealing. Then I used my Thections code to create the sections themselves. I then had to review and organize the categories to match the sections and to review the existing posts to make sure they were properly assigned to their categories (most of them were, though some updated were needed). All the sections have a languages-widget that links the Romanian & English sites (as I write these words the Romanian website is still using the previous theme). Then each section has each own widget-area which, for now, have a single menu-widget based primarily on categories.

There are a few things that we still need to do:

1. Re-organize and prepare the Romanian website (posts and categories) for the new theme and then add and adapt the new theme to it.
2. Review and reconsider the use of tags (which are now presented only on the main page).
3. Re-organize and integrate the link library into the theme (WordPress 3.1 was just released and I am considering using Post Formats instead of the existing link items).
4. Continue to explore and apply some user interface refinements to the theme.

We started off with a clear direction in life but a vague notion of where the website would go. We kept it simple at first and watched to see what happened with the content. The content then gradually took shape and this redesign is a reflection of that.

When people (that don’t already know me) hire me to help them create websites they do so usually because they’ve seen other websites I’ve created and like something about what they see.  Usually they are referring to a mature website that has been live for some time and that has gone through numerous iterations and changes. They are seeing the fruits of an ongoing process.

That in itself is usually the birth of an expectation problem – they want me to design a website “like that” for them. I then explain that there is a process that I can guide them through that may eventually lead them to such a website – but it isn’t going to appear out of a single “design” process. A website is a process of discovery – the first design is merely a point of departure – something good enough to carry you on the first leg of your journey. But people have a short memory – especially when they realize that most of the work involved is more on their shoulders (content content content) then mine.

So, to demonstrate my point I am going to harness the Bhudeva process to show how a website evolves. Bhudeva is a personal journey of discovery in real life – the website is a side-effect and partial reflection of a major life chage. Though in our hearts Bhudeva has a clear destination, I have no idea where it will carry us – either in real life or on the website.

Private Launch

Bhudeva was launched two days before we departed to Romania. It began as a spontaneous inspiration – to share this aspect of our lives with others. Some soul / word / domain searching brough me to the name Bhudeva which was luckily an available domain. Andreea loved it and so we purchased the domain and I created a fresh installation of WordPress. It was a network installation because we intended it to be in both English & Romanian.

I added to it two posts as a way to store some Youtube videos we’de come across and wanted to remember and that was all the content it had. It also had no visual design other then the basic look of the default 2010 WordPress theme. Yet from the start it was open to the public and to search engines. It was a kind of lucky charm – a wish we sent out ahead of us to Romania – a karmic wave that would sweep clean the world that lay ahead.

Semi-Public Launch

It was only 4 or 5 weeks later that I got around to creating a basic design (colors, header image, etc.) that would resonate with wat was in our hearts. We still didn’t know what kind of contents the site would have. As I write these words the categories are still a mess and just now beginning to become clear to us.

It took 3 or 4 iterations to reach the design that you see in the screenshot above. Once the basic design was in place a variation was created for the Romanian version of the site and I began gradually adding contents. Some of the content was curated (referencing resources we found online) and some original content.

We have also created a third site – Bhudeva House – where we experimenting with WordPress as a design tool for our future house. You can read more about our intentions for this website in this post at Bhudeva.

I still don’t feel that the site has been officially “launched” but we have started linking to it on Twitter and in relevant forums – so it is starting to draw traffic.

We have a few things already planned for the coming weeks – which is what prompted me to write this post. Now that I’ve written it I feel free to proceed to the next iteration … and I will do my best to keep the story going here as well

1. A form is presented on the website for a visitor to fill out.
2. When that form is submitted the information in it is processed and automatically stored in either a standard post or a custom post-type.
3. The new post can then (assuming it was created in a published state) be found and viewed on the website itself without any manual intervention.

The first part is fairly easy to do – I’ve been using Contact Form 7 for a long time as a forms plugin. The 3rd part is standard WordPress behavior. The challenge was in the 2nd part – capturing and processing the information. I am happy to say that not only is it possible but it is actually very simple to do (for a WordPress theme/plugin developer).

What tipped me off and uncovered the solution was another plugin called Contact Form 7 Database Extension which stores form information submitted using Contact Form 7 in a database. I examined the code and found what I was looking for.

Contact Form 7 has an action hook called wpcf7_before_send_mail which is passed an array that includes the form title and an array of submitted data. All you need to do is hook into this action and do … whatever you want to do.



function my_wpcf7_save($cfdata) {
 
	$formtitle = $cfdata->title;
	$formdata = $cfdata->posted_data;	
 
	if ( $formtitle == 'expected-form-title') {
 
		// access data from the submitted form
		$formfield = $formdata['fieldname']
 
		// create a new post
		$newpost = array( 'post_title' => $formdata['formfield-containing-title'],
		     		  'post_content' => $formdata['formfield-containing-content'],
		    		  'post_status' => 'publish');
 
		$newpostid = wp_insert_post($newpost) 
 
		// add meta data for the new post
		add_post_meta($newpostid, 'custom-field1', $formdata['formfield-containing-customfield1'];
		add_post_meta($newpostid, 'custom-field2', $formdata['formfield-containing-customfield2'];
	}
 
}
add_action('wpcf7_before_send_mail', 'my_wpcf7_save',1);

This function demonstrates:

• A save function hooked into the contact-form action.
• Conditional testing of the submitted form so that other forms are not mistakenly processed
• Using wp_insert_post to create a new post based on form data.
• Using add_post_meta to add custom fields based on form data.

Once you get the hang of it you can do anything you want inside WordPress. I’ve used this technique for creating posts, custom post-types and even for creating a customized user registration form embedded into the front end of a website (with custom fields added to the user profile too).

One last thing I wanted to add but have not yet figured out is how to automatically redirect the browser to the new post. I tried using wp-redirect but that didn’t work. I am guessing it created some kind of conflict with the plugin which has not yet completed it’s processing. I did find this redirection technique within the plugin but I do not know how to use it to redirect to the actual post.

Over the past year I’ve come across numerous questions on authoring HTML content where the best answer required some explanation of HTML. This prompted me to pick up this thread where I’ll try to cover some really simple and basic HTML issues for non-developers and then build on that and answer some of the questions I’ve been asked. I don’t think you will get much out of this if you don’t need and apply it to your own writing so I hope you come across or remember to revisit it when you do actually need it.

What is HTML?

HTML (HyperText Markup Language) is essentially an agreement about how information is structured and edited online. Though you don’t see it, it exists on this webpage and most probably on every other webpage you’ve ever visited. It contains underying information (markup) about the contents of a page. For example on this page:

• The title “HTML for Writers – Part1: HTML Tags” is marked as a level one heading (top level).
• The subtitle “Introduction” is marked as a level two heading.
• The paragraph after it is marked as a paragraph.

Though it may seem redundant it serves you in more ways then you can imagine.

For example search engines use markup to refine their understanding of content – a word that appears in a heading carries potentially more weight then a word that appears in a paragraph. Have you noticed that the browser you are currently using also displays in it’s window title the title of this web-page? That too is possible because in the underlying HTML of this page there is information about the current page title that’s placed in a standard (agreed upon) way that makes it possible for the browser to find it and use it.

Another demonstration of the importance of HTML is for the blind. If you are reading this with your eyes – then you can tell apart title, subtitles and content by using visual cues that have been designed to help you do that. Blind people cannot benefit from this information – they rely on other hardware devices or software applications to relay the information on the page to them . Suppose that a text-to-speech application is used to read this page to a blind person – how would it know when it encounters a heading? It looks to see HTML markup which it uses to effectively read the page.

What are HTML Tags?

The beauty of HTML is that at it’s heart it is a very simple mechanism which is used to convey markup – it is achieved using HTML tags. HTML tags are special characters that are placed around content. For example if you were to look at the underlying HTML of this page you would find that the title actually looks like this:

<h1>HTML for Writers - Part1: HTML Tags</h1>

The opening <h1> tag indicates where the title begins and the closing </h1> indicates where the title ends.

The subtitle on this page looks like this:

<h2>What is HTML?</h2>

This time an agreed upon <h2> tag indicates a subtitle.

HTML language is essentially a collection of agreed upon tags. You can see a sample list of existing HTML tags here. The HTML language is maintained by the World Wide Web Consortium (W3C) and is constantly evolving and changing. You may have, over the past year, heard some buzz about HTML5 – that means that the language is changing – new standard tags are announced making HTML a richer and more refined language.

How are Tags Written?

The principles of writing tags are really simple:

1. Tags are always placed between lesser-then and greater then signs. This makes it possible to tell apart tags and content.
2. Tags almost always (there are a few exceptions) come in pairs: an opening tag and a closing tag.
3. Closing tags have an additional backslash ‘/’ character which separates them from opening tags.

When used in conjunction they draw an entire underlying image about the contents of a page:

<h1>HTML for Writers - Part1: HTML Tags</h1>
<h2>Introduction</h2>
<p>Over the past year I’ve come across numerous questions on authoring HTML content  ...  when you do actually need it.</p>

That’s all there is to it … the rest is learning what tags are available and how to use them to your advantage.

Blogging can be very much like a new posture – it may seem difficult or even impossible to sustain. Like Yoga postures, a correct practice can make it much easier to blog then it may seem to be. Also, like Yoga postures, incorrect practice can be so consistently unpleasant that it can turns you away from practicing – or blogging.

Just as In Yoga postures there are things you can do to make a posture more accessible – so there are in blogging.

Focus

In Yoga it helps to know why you are practicing. Do you want to be more flexible? Do you want to feel calm? Do you want to feel a spiritual connection? Do you want to meet other like-minded people?

In blogging it helps to know why you are writing. Do you want to express yourself? Do you want to change the world? Do you want to sell something?

Prioritize

In Yoga you can choose what is more important to you, for example: flexibility in your spine or flexibility in your legs. If your focus is being healthy and improving your energy flow then you should probably focus on your spine. If your focus is to become a ballet dancer then you may want to focus on flexibility in your legs. Without a focus as a point of reference you will be hard pressed to prioritize your choices.

If you are blogging as a means of expression then you should probably focus on what supports your writing. If you are blogging to get a message out to the world then you should probably focus on making sure your writing reaches an audience. Getting your priorities mixed up can be destructive. If, for example, you keep track of your site statistics and find that your site isn’t getting much traffic – how does that make you feel?

• If your focus is self-expression then it shouldn’t matter to you.
• If your focus is self-expression and it bothers you – then you wish to re-examine your focus.
• If your focus is getting a message out to the world- then you may need to change your strategy and focus on social media/networking to complement your writing.

Surrender

Suppose you want to focus your Yoga practice on improving your health and energy and to do this you choose to give your spine priority over your legs. Usually the first thing you need to do is … less! Remove from your practice things that may be interfering with moving your spine. Simple things like bending your knees or releasing your shoulders and elbows increase the potential of movement in the spine.

Suppose you want to enjoy a freedom of self-expression on your blog. You may be better off turning off your site-statistics plugin and disabling comments. How you feel writing is more important then what others know or think of you or your writing. Freedom of expression is not a popularity contest. How many visitors you get is not important and a single critical comments can drain your creative energy in the blink of an eye. Don’t let your energy escape from your heart to your ego.

Practice

Whatever you do keep practicing. Blogging, like Yoga is 99% practice. Know why you are blogging, create conditions that support you and clear out things that may get in your way. Find a consistent pace of practice that works for you and then publish, observe, change, publish, observe, change.

Eventually you will come across an understanding and variation of blogging that works for you, that supports you and that you can comfortably hold.