[web] Creating a robust web presence: Hierarchical Organization

For some 17 years we’ve been building our own websites at SimpleTwig.  One of our first websites had a simple roll-over buttons, a very cool feature in the late 1990’s.

08website-TDS1

Our first website in 1998, complete with ‘roll-over’ buttons. ‘The Drawing Studio’ is now SimpleTwig Rendering.

 

Today SimpleTwig has a very robust web presence and making it work wasn’t an accident.  The core of our network is our Architecture and Rendering portfolio websites.  Branching off these core components are several other components that make up the entire network, some branches important and encourage participation, others less important by relevance.

Our second website. 2002.

Our second website. 2002. ‘The Drawing Studio’ is now SimpleTwig Rendering.

 

For instance, on our ‘today’s’ website we encourage people to find us on SimpleTwig FaceBook Page and subscribe to our blog (links in the right column, by the way, please like and subscribe :).  Both these avenues provide an opportunity for visitors to enjoy updates and get information on topics that are related to architecture and are interesting.  Therefore these high-priority links are ‘at the top’ and easily accessed.  Secondary components include our forum, twitter, youtube, vimeo, pinterest, flickr and LinkedIn accounts/profiles.  These secondary accounts are fundamental ‘foundation’ accounts that allow us to disseminate information towards our primary targets, our website, FaceBook and Blog.

Of course these accounts are linked.  That is, if I upload a video to YouTube, it gets automatically announced on FaceBook and on Twitter.  The same goes if a topic is created on our Forum.  Why have a forum?  A forum is a great place for someone to come and discuss various topics, or for us to coordinate with large clients and consultants privately… to share documents, concerns, problems, solutions.


 

NYSR (New York Society or Renderers, Inc.) website design by SimpleTwig:

2001 website design for NYSR.

2001 website design for NYSR by SimpleTwig.

 

Understanding Hierarchy: On the NYSR website above, you’ll notice that member names are put first, and equally, on the front page.  This gives each member and equal opportunity  to be discovered and encourages visitors to try each link.  The NYSR center image changes to individual member images once a link is clicked.

You’ll notice in the current version of NYSR this hierarchical relationship still exists although the N, Y, S, R organizational component of member images was lost.

Updated NYSR website 2004 is the foundation for todays NYSR website.

Updated NYSR website 2004 is the foundation for todays NYSR website by SimpleTwig.

 

 


 

(continued…)

Our Blog allows us to pre-assemble articles for release at a later date.  All articles that are released get automatically feed to our Twitter and FaceBook accounts.

So what’s so important about the Blog?  Well for one, we have our blog hosted at simpletwig.com.  This means when Google, Bing and others send a bot to see ‘what’s new’ they discover new content when an article is released.  This is important for getting one’s company name to appear higher in search results.  Lets face it, if your company doesn’t appear on the first page of a search then you probably will not get a phone call from that potential client.  This is also why there’s a FaceBook feed directly on this blog: new content.  Besides doing these obvious things, one also has to insert Google code into one’s website host in order for Google to verify that you are the real owner of a particular site, and thus a legitimate website worthy of scanning.

NYSR blog by SimpleTwig Web, 2012.

NYSR blog by SimpleTwig Web, 2012.

Website Functionality:  It’s important to make one’s website easy to navigate.  Despite the robustness of our website we think we have succeeded.  Our core, architecture and rendering, is each situated on 3 pages with links to each page at both the top and bottom, so one can easily view our previous work.  There are no thumbnails or extra navigating required by the user. In fact, besides the splash page (an intersection leading to the separate roads of architecture or rendering), the first page of each website is the portfolio itself.  No need to click on ‘portfolio’ and thus one less link to click = easy navigation.  Further, while each core, architecture versus rendering, is similar in layout, the architecture website has a white background while the rendering has a dark theme (more appropriate for renderings), thus clearly distinguishing between both sites.

While the secondary links to outside resources are important, so are tertiary links like our ‘legal,’ ‘usage,’ and ‘privacy’ terms.  These, along with the Forum, FaceBook, Twitter, Blog and even our graphics services called SimpleTwig Web all require special coding that allows those links to open in a new window.

For instance, this is the normal code for a button link:

<a href=”https://www.facebook.com/SimpleTwig” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image33′,”,’architecture_images/z_top_links/images/05-on-facebook.gif’,1)”><img src=”architecture_images/z_top_links/images/05-facebook.gif” alt=”facebook” width=”99″ height=”64″ id=”Image33″ /></a>

In order to add the function of opening this in a new browser window, one must add  ‘target=”_blank”‘ in the correct spot within this code for it to work properly.

<a href=”https://www.facebook.com/SimpleTwig” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image33′,”,’architecture_images/z_top_links/images/05-on-facebook.gif’,1)” target=”_blank”><img src=”architecture_images/z_top_links/images/05-facebook.gif” alt=”facebook” width=”99″ height=”64″ id=”Image33″ /></a>

And of course, this code is also a roll-over so that visitors recognize there is a link.  This image shows you some of what we do for the hundreds of pages and images we create to make a robust website, all fully functional without mistakes to ensure the website preforms on all browsers, IE being the hardest to ‘fix’ to make work.

48-website

Roll-overs are an important component of any website.  Many can be done easily with text, like, in the image above, the words ‘Residential,’ ‘Commercial,’ and ‘Art’ are simple text rollovers, done in Adobe’s DreamWeaver under Modify>Page Properties>Links by selecting the link colors.  Still, when on a page, and in the example above you can see we are on  the ‘Commercial’ page because the word is highlighted, it is a bit more tricky to remove that ‘Commercial’ link (because the user is already on the page so doesn’t need a link) and then ‘color’ the word using CSS so that it becomes highlighted, thus informing the user which page they are looking at and which pages they still need to visit to see the entire portfolio.

At the top of the page, one sees ‘image based roll-over links.’  This is accomplished by making two images, one that’s ‘on’ and one that’s ‘off.’  Again, when the user is on the page in question, one needs to remove the link and highlight the word, thus removing the roll-over.  This too can be tricky and is basically a time consuming effort to place each ‘button’ individually so that all mouse-overs and links work properly without interfering with it’s neighbor.

While Adobe’s DreamWeaver is a robust program, it’s usefulness depends on the users knowledge of the program.  It’s important to layout a design for the website and be sure to understand it’s hierarchical relationships with other pages, and it’s purpose driven functionality to the end user.  Then, one can create a template either using Photoshop > DreamWeaver, or do a layout directly in DreamWeaver adding Photoshop component images as required.  A template is the foundation for a working website, as it ensures that every page will function  the same way as a previous page without having components ‘bounce around’ when a new page loads.

Robust means inserting ‘extras’ into your website:  Here you can see we’ve even created a Google Map that shows were all of our projects are located around the world.  Some are Architectural (yellow) and some Rendering (purple).  For SimpleTwig this map is important to convey an idea, that we are sought out by people from around the world to work on their project, no matter the program.

48-map

This is because we see ourselves as ‘real Architects’ that can look at almost any program and all the best solution to evolve through the design process.

Copyright and Protection:  We learned a lot about protecting oneself with those early websites.  I abandoned the company name ‘The Drawing Studio’ (http://drawingstudio.com) in 2010 because too many people were ripping us off, taking our images, our client list and attacking (hacking) our site with malware (it’s clean, take a look, if you get a warning let us know).

Our client list, verbatim, on someone else's website. The nerve!

Our SimpleTwig client list, verbatim, on someone else’s website. The nerve!

 

It was amazing that with a search we discovered this, and shocked that anyone would just copy/paste someone else’s client list and call it their own, as if, perhaps, we did the same thing.  We did not!  We’ve been working for many clients over the last 22 years and are indeed very proud of who engage our services, partly for the respect we have for their own companies and institutions.  Now ‘LakeWind’ is on FaceBook only as their domain directs people to their fan page https://www.facebook.com/lakewindsoundstudios but what you’ll notice is the same banner as is noted in the image above.  Fortunately ‘lake wind sound’ was not a competitor in the same industry, but it illustrates just how slimy some people will get, including those who just directly stole my renderings and said it was their own work.  We how have employed many protections to our name and work.  Our trade mark protects our name (yes that was stolen a couple of times, once outside the US), the trademark on every image within our portfolio, our LLC corporation allows us to sue companies and individuals easier, and certainly carries more weight when warning people of their infringement and other things to protect us from hackers, spammers and the like.

All of this is part of what goes into creating a robust web presence.  There are no real short cuts, but fundamentally in today’s world one must be on the web somewhere, even if on a free site, in order to exist.  One can consider the web as today’s yellow pages.  If you’re listed you’ve just increased your chances of being considered for a project, so get out there!


Please comment and share.  Thank you.

SaveSave

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.