I read this very interesting article on .net magazine about tips for designing for localised interfaces and found that all of these principles completely apply to designing for a website for a SiteCM Content Managed website.

http://www.netmagazine.com/features/10-tips-designing-localised-interfaces

Hope this helps someone!

With the release of retina displays, such as Apple’s new MacBook Pro with retina display, designers have been thrown yet another curve ball with which to keep our designs up to par. Not only do retina graphics exist on mobile and tablet devices but now need to be optimized for desktop computers!

I have the great opportunity with ideaLEVER to be able to both design and develop some mobile sites for our clients, and am lucky enough to own an iPhone4 to test the following example with. If you are lucky enough to have a iPhone 4s, Nexus, Galaxy, iPhone5, Surface Tablet, iPad3, the new iPad, or even a shiny new MacBook Pro with retina display then this will tickle your fancy.

Yesterday, I found myself with the challenge of trying to increase the clarity of the graphics implemented on my iPhone4, realizing that they were all slightly fuzzy.

Thankfully, the answer to all my problems was already tucked away in our new default structure.css file, in the form of the retina display media query. Every new SiteCM skeleton site (staging site) comes with the full list of most widely used media queries in anticipation of our resellers implementing a responsive design.

It looks just like this:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) { 
       /* styles go here */
} 
Continue Reading →

This is a must read for content owners, beginner and seasoned designers alike.

Talk to any web surfer, or look at any website on the web, and you can easily agree that the presentation of text can easily make a beautiful design, or break the aestheic. Nothing is worse for designers than seeing your beautifuly typeset page turn into a minefield of *gasp* highlighter coloured text, random font size, and no visual hierarchy.  No matter how great your colour scheme, functionality, features, content, or photography is – if the typographic presentation is poor then chances are the site is something of an ordeal for your visitors to read, understand, and still think that it is credible.

When your customer, or “end-user” is visiting site essentially what they are looking for is information. More often than not that information is text – and a hard to read site equals a site that doesn’t get read or visited, making your trusty Google Analytic stats dismal at best. I encourage you to take a quick look through the following free resources I have passed upon and just had to share.

Meet your type is a beautifully displayed presentation that is easy to read with lots of visuals for even content-owner ameatures can understand the art of typography. I hope this becomes an invaluable resource to you as you venture into maintaining your beautiful SiteCM websites.

My tip that wasn’t included here: If your reader notices your type (im talking bulk text like paragraphs) then your type isnt doing its job because more often than not they notice its flaws and how illegible or unreadble it is. You should see your text like a ghost, meant to be read and not “seen”. And yes, i’m talking about all those infamous instances of ghastly flourescent pinks and faux bold italics. Can you say cringe!?

Meet Your Type – Presentation

Coming up next: We talk about beautiful typography on the web and and updated tutorial on custom fonts for the web.

This is not really a CSS Quick Tip, but a useful piece of information that I had to share with you. Our resellers always surprise me with the thought and care that goes into the long term maintenance of their beautiful sites, and our partner Rees Communications is always pushing the boundaries of what SiteCM can do. This morning I got an email about adding what is called a “schema” to the beautiful SiteCM site: Insight Eye Care.

What the heck is a schema?

Here is the short-and-sweet definition I have come to understand:

“Schemas are HTML attributes that “webmasters” can add to their website’s markup that allow search engines to recognize and understand your markup in context.”

As you already know, there is a bit of an art to structuring your content on a page when using heading tags, paragraphs, etc etc etc, but what is missing even with the most carefully crafted page is some data that allows Search Engines to understand your content in its context and how to intelligently return that in its search results. When it comes to explaining how schemas work, the website schema.org says it best already:

Recently I worked on a project that involved working with code that I did not write and I have got to say, there is nothing worse than opening up a style sheet that is messy. It is like walking into a friends house when they haven’t cleaned it weeks. Yuck. This experience reminded me how important it is that we as developers write tidy, well structured and well commented code.

Good coding practice doesn’t just save YOU time, it saves us time when maintain YOUR beautiful site.

Here at ideaLEVER everyone on the team uses the same basic organization structure so that we save time when working on collaborative projects.

So what are some tools that you can adopt into your own coding practice that will have other developers singing your praises? Here’s a couple we strictly follow:

On my daily browse of the twitterverse this morning I came across the exchange shown here between a couple of designers I follow on my @ideaLEVER account. I hid the account details to protect the innocent.

I did a bit of poking around and the host in question charges $3.95/month.  The thread goes on to complain about the lack of support from the host.

I feel bad for the designers and for their affected clients but I can’t say that I am surprised.  We hear this sort of story all the time.  When price is your motivator it usually doesn’t end well.  I don’t care if you are getting your house painted, your car fixed or getting a web site.  The lowest price estimate is rarely the best.

What is this incident going to cost?

• Loss of Business:  While being offline for week is bad enough, this is going to affect their Google rankings and cost them business for many weeks to come.  Right before Christmas…
• Loss of Productivity:  The designer has to scramble to repair the damage.  This would likely include moving to a new host, launching their most recent backup (if they have one) and making any changes to content that might have occurred since the backup.  This likely is not billable work so several days of revenue go out the window.
• Loss of Reputation: The designer will have to work very hard to re-earn the trust of their client and depending on the nature of the hack, the affected customers will have to repair their reputation with their customers too.

When comparing the price of an OpenSource CMS to a SaaS product like SiteCM you need to look at the bigger picture and all of the costs over the life of the site.  Not only does SiteCM provide reliable hosting and great customer service, we also provide regular updates to our CMS closing security holes before they can do any damage to our reputation or your customers.  Your customers will also get regular training and support so you can keep doing design and building your business.

If you have had an OS CMS site hacked, give SiteCM a try.  Yes the price is higher but the cost is much much lower.