Back to NSDesign Blog Homepage NSDesign Web Design and Hosting
NSDesign Blog
interesting thoughts on web design, hosting and other stuff...

Archive for the ‘Web Design’ Category

Big Thanks to Sean – Student Work Experience

Friday, January 29th, 2010

We’ve been fortunate to have Sean Forsyth with us this week – on work experience from Gryffe High School.

I asked Sean to sum up his week with us, and am delighted he’s letting me share it on the Blog:

I have really enjoyed my week of work experience here at NSDesign even though at first I was not sure what to expect. I feel like now I have a greater knowledge of the web design business and would like to follow it as a career path, although I still have a lot of learning to do before I can do anything that all the staff here can. Also I am very interested in other parts of the business too like ‘Embrace the Space’ and never realised how Social Networking sites could be used for business purposes and so effectively. Everyone at the office has been very helpful in getting me started and making sure I get the most out of my week. I thank everyone here for making the effort to give me the chance to work here as I’ve had a great experience!

On behalf of the team, I’d like to offer a big thanks to Sean for all his efforts this week, and we hope to keep in close contact as he continues his career.

Post to Twitter

Working for free – another success!

Sunday, January 3rd, 2010

For the second year running, we were delighted with the results from our “Work for Free” day, which we carried out just before Christmas (December 21st 2009).

Following on from last year, the NSDesign team enjoyed a great day helping just over 20 small businesses, with free consultancy on the likes of SEO, Social Media, and web design.    Like last year, we weren’t without our detractors for the initiative, with the DBA again giving us a little “dig” on twitter… (although thankfully, nothing on the scale of last year!)… and a few industry players that like to moan about “de-valuing” design, without truly understanding what the day is actually about.

However, like last year, all we really care about is the feedback from clients, which has been 100% positive.

We were also lucky enough to get some great publicity on the day, mainly from a BBC Radio Scotland interview which went on to look at the value and benefit of providing free time and consultancy, and the history of working for free!  Listen to the full radio interview here.

Will we repeat the work for free initiative next year?  What do you think…

Post to Twitter

Resources to make Font Embedding Easy!

Tuesday, November 17th, 2009

Over the last few months I have been following developments regarding the use of the @font-face feature of CSS3. As we have recently been involved in a project where I saw both an opportunity and a benefit to using @font-face, I have gathered together some information that I think helps clarify how best to use it.

Licencing and Support
Font licensing is a pretty big issue surrounding @font-face, even free fonts, which may stipulate that they are only used on non-commercial sites or have a link back to the author. Some new resources which offer a solution to the licensing issue are appearing, notably Typekit. As they put it its “Simple, bulletproof, standards compliant, accessible, and totally legal.”

At the moment @font-face is best supported by Firefox 3.5, Chrome 3, Safari 3.1, Opera 10 and IE8. The two most commonly used font formats you will see today are .otf (opentype) and .ttf (truetype). To embed a font using these formats you use the following css in your head or an external css file:

@font-face

{
font-family: 'Philosopher';
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: ‘Philosopher’;
font-size: 20px;
}

You could argue that embedding specific fonts is superficial and that all it does is add to the overall aesthetic of the site rather that provide any benefit in terms of accessibility or usability. And if this is the case why bother trying to support older browsers? I guess that’s true but our job as web designers to at least try to provide the richest possible user experience to as many people as possible so why not give it a bash!

EOT (Embedded Opentype)
The font format supported by previous versions of IE is .eot (embedded opentype). You can add a line to your css to include this format with the others. To create the .eot version you first need a .ttf version of your font. If you have this I’ll explain how you you convert to .eot it in a minute but if you only have an .otf then you need to convert it to .ttf first. After a bit of digging I found a hard way and an easy way to do this. The harder way is to install Fontforge and the easy way is Online Font Convertor The Online Font Convertor works but seems to slightly distort some of the characters(at least when I tried it.)

Fontforge and Sygwin
If you want to install Fontforge on a windows machine you first need to install Sygwin which provides a Linux-like environment for Windows which is required to run Fontforge. I found it a bit tricky but this Installing Fontforge article is a good tutorial which explains exactly how to do this.

TTF to EOT
Once you have your .ttf font file you need to convert this to an .eot. Once again I found a few ways to do this. One is using the Microsoft tool WEFT. A lot of people have said WEFT is quite tricky to use but I found this tutorial and it wasn’t too bad. The only problem is that it doesn’t always play nice with every font. When you load in the font you wish to convert it will indicate whether or not it can be converted with a green, yellow or red icon. If it is green or yellow you’re in luck and you can create your .eot file. If it’s red (which I encountered) go to TTF2EOT Online. This tool is great and once it converts your font it even provides the css and instructions on how to embed the font in your page.

Once you have an .otf or a .ttf font aswell as your .eot version you can now embed the font using the following css:


@font-face
{
font-family: 'Philosopher';
src: url("Philosopher.eot");
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: 'Philosopher';
font-size: 20px;
}

Early Chrome Support – SVG
You can improve browser support further by adding an SVG version of the font to the css. This format allows the embedded font to be viewed in Chrome 0.3+. This can be created again using Fontforge from one of your other formats or using a tool called Batik. I found good online tool created by Martin Saulis which he has built using Fontforge and TTF2EOT. The problem with SVG fonts is that they have a fairly large file size but by opening the font in any text editor you can delete the unnessessary characters from the font, greatly reducing the file size. The main elements to delete are the glyph-name=”null” and the hkern elements. By doing this it will reduce the file size with minimal effect to the font.

There are a couple of small issues that have to be considered once you have your SVG file. The SVG must be assigned an id which will be used in the css and html to reference it. This can be done by again opening the SVG file in a text editor and editing the tag and adding an id to it. Another issue is the requirement of an SVG namespace to the file. This also must be added for the font to work and can be added in the svg element in the file.

The final code would look like this:


@font-face
{
font-family: 'Philosopher';
src: url("Philosopher.eot");
src: local('Philosopher'),
url("Philosopher.svg#header") format('svg'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: 'Philosopher';
font-size: 20px;
}

Overall it is a bit of a tricky process but I think it is worth it to be able to achieve what has been much sought after in web design for quite some time.

Post to Twitter

Geek events come to Glasgow

Wednesday, July 29th, 2009

They are like buses…  you wait for ever for some decent “geek” events to come to your hometown, and then 2 arrive at once… 

So, if you’re into your web design, twitter, technology, etc.. and live in the Glasgow area, then I’d strongly suggest the following 2 events coming up in the very near future.

Glasgow Twestival

Held at the Living Room on St Vincent Street, the Glasgow leg of the popular Twitter Festival (or Twestival – sorry..  but I don’t make us these terms!) looks to be a good one!  Hosted by our good friend and Radio Clyde DJ Colin Kelly, the night will involve a mix of fun, networking, tweeting, live music, charity raffle and auction. 

It’s all for a good cause, with a nominated charity (voted for by the “tweegies” themselves) benefiting from the entry fee (just £10 – although some early bird tickets still available) as well as all funds made on the night.  Get along and say hi… and make sure you also add us to twitter – www.twitter.com/nsdesign in the meantime!

More at: http://glasgow.twestival.com/

Future of Web Design – Glasgow

Run by Ryan Carson (he’ll be the American in the hat) and the carsonified team, the popular FOWD event comes to Glasgow (a welcome first!) for a days worth of hard-core web design seminars, featuring the likes of Drew McLellan and (NSDesign client) Patrick Lauke.

Held on the 14th September at the Glasgow Film Theatre on Rose Street, it’s a must for anyone involved in the web design industry with tickets still available at £67.85.  A few of the NSDesign team will be there, so make sure you say hello… 

More at: http://events.carsonified.com/fowd/2009/tour

 

Lets hope this is a sign of things to come, and we see more big name events for this industry in Scotland soon. 

Post to Twitter

Running your own Web Design Agency

Wednesday, March 4th, 2009

Last week I had the pleasure of giving a guest lecture to some students from the School of Computing and Creative Technologies (CCT) at the University of Abertay in Dundee.

The focus of the talk was on the highs and lows of setting up and running your own business, drawing on experiences and “lessons learned” since founding NSDesign over 10 years ago.

All in all – a really good afternoon, for me, and also (from the great feedback) for the students also..  always inspiring to see them asking some good questions, many of them tied to the current economic issues we’re all facing today.  And of course – always nice when a few of them ask for jobs!

So thanks to everyone who attended, and for the many that have since follwed me on twitter.

Post to Twitter

Top 10 New Year’s Resolutions for your business website

Monday, January 5th, 2009

2009 is upon us, and while most of us are making personal resolutions that we’ll never keep (there’s simply too much chocolate kicking about from the kid’s selection boxes), owners of business websites should really be making a few of their own that WILL make a difference to the success of their site this year.

We therefore present to you, our Top Ten New Year’s Resolutions for your Business Website, a few of which you may already have signed up to personally!

 

Lose Weight

Like maybe yourself after some over indulgence on the turkey and Christmas pudding, your website has probably become a bit “bloated” over the past year or more…  Often put together in a piece-meal fashion, it’s not unusual to find bolt-on javascript examples, unnecessary inline css, html hacks, cool (but now very dated!) dynamic effects (you can lose the animated snow now).  Make a start by clearing out your code and get it back to a lean mean selling machine!  And if you really feel up for a challenge, get rid of the html tables and deprecated code, and ensure your site code validates to xhtml/css standards.  You’ll end up with a site that’s faster for your end-user, easier for you to update, and produces better results in Google.  There’s no such thing as a tummy tuck here, but you can still be ruthless with the scalpel!

Kick those Bad Habits

While your site probably doesn’t smoke or drink, it most likely will have a few bad habits that you’ll want to address this year.  Like the spelling mistakes you know are in there, or those 2MB images you uploaded straight from the digital camera that you always meant to go back and reduce, or the “honest, it’s not spamming” approach you still take to mass-mailing potential new contacts instead of ensuring only a 100% clean “opt-in” list.  Running a website on a day to day basis is bound to result in a few cut corners and quick-fixes, but left alone, such bad-habits can seriously impact your site, or worse – your company’s reputation.  Cut them out now!

Get out of Debt

OK – so you may not actually be in debt, but in these unstable economic times it’s vital that your website focuses on making your business PROFIT, not just generating turnover or page-views.  With that in mind, take a look at all the products and services you offer on the site.  Identify which aren’t actually generating profit, and get rid of them.  Focus your efforts on selling the services that generate the most profit and even start to look at existing services currently given away for free, and turn them into revenue generating assets.  Even if you don’t actually sell anything – does your website generate enough page views that you could make profit from external advertising?  The internet is full of sites offering “free stuff” – your business website does not need to be one of them!

Talk More

If you haven’t already got a company Blog up and running, then start one.  If you already have a blog, then blog more.  Blogs are a great way for you to (informally) communicate to your audience on a regular basis, and the more you post, the more successful the blog will be.  Think of it as your “unofficial company news”, with posts on anything and everything related to your company and industry.  What’s more, a regularly updated blog will help you get a better listing in Google and other Search Engines.

Talk Less

With the exception of your new Blog, consider reducing the text and content on your website to only say what it actually needs to.  The quicker you can make your point to a website visitor, the more likely they’ll go on to make a sale, or complete the contact form etc.  Remember that the majority of your visitors do NOT read every single word on the page – they scan it to get a quick overview, before deciding whether to take further action.  Make it easy for them, and say only what you need to.

Don’t Break the Law

You’re probably not even aware of it, but chances are – your website is breaking the law.  Data protection laws, intellectual property laws, disability discrimination laws, distance selling laws and more – they ALL impact on your website, and you as the owner of the site need to ensure that you comply as best you can with them.  From simple things like ensuring your limited company name, number and address is clearly shown on the site and on emails, to a privacy policy, fit for use terms and conditions, and website accessibility compliance.  Don’t be a law breaker and take advice from the professionals where you need to – it’s not worth the consequences.

Make New Friends

The more people who know about your site the better, so make a point of making new friends on Facebook, Linkedin, Twitter or any other social networking platform of your choice.  The chances are many of your existing business contacts, colleagues and co-workers are already signed up, so you’ll be able to build up a “friends list” in no time at all.

Get out More

Not directly related to your company website itself, rather general good business advice.  Network!!  Don’t rely on twitter to grow your social and business circles, get out there and actually meet people.  Face to face really helps your business (especially any online business) promote a “real” presence beyond the website.  People like to do business with other People, and so getting in front of these potential customers is vital to grow sales as well as company image.  Don’t be frightened of “Networking” and view it as a crucial part of your marketing strategy for 2009 (you often get free wine and cakes too – just don’t break the first resolution!!).

Face-Lift?

Could your site do with a slight make-over or a complete face-lift?  The overall design of your site is probably the key factor in forming a new visitor’s first impression, and it’s got just 50 milliseconds to do it.  No pressure then.  Now’s the time to appraise your site (or better yet – get some 3rd party “testers” to do it for you) from not only a design point of view, but also usability, as the two go hand in hand.  You may have launched your site a decade ago, but does it still look 10 years old?  What about clear, consistent navigation – is it easy to move around and quickly arrive at your “profit” pages?  Web design has come a long way in a short space of time, and web users are quick to understand what’s hot, and what’s not.  If you’re in need of some facial reconstruction to improve your visitor’s perceptions of you then get it done sooner rather than later.

Be Excellent to one another!

As a wise man called Bill S Preston once declared to the masses – “be excellent to one another”.  Not just for the purposes of making the world a better place, but because it actually makes solid business sense.  Excellence in customer service and support is what will stand a company out from it’s competitors over the next few years – as economical troubles mean that customers look for good, reliable and trustworthy companies to do business with – ie: ensuring that their money is well spent.  Nowhere is this more true than the internet – with customer support emails and phone calls all expected to be dealt with instantly.  Provide an excellent customer service and offer true value – and your business should endure the rocky road ahead.

We hope that you enjoy our Top 10 New Year’s Resolutions for your business website, but more importantly, we hope that you’ll actually employ even just one of the resolutions and improve your site in 2009.  For your benefit (and amusement) we’ve created a nicely formatted PDF that you can download and pin to your wall summarising all 10, and of course if you’d like any further help or advice on improving your website, we welcome your communication.  We promise to be excellent in our response.

 

NSDesign Business Internet Solutions
Web Design | Web Hosting | Web Consultancy
www.nsdesign.co.uk
info@nsdesign.net

Post to Twitter

Future developments for more flexible web design

Thursday, December 18th, 2008

One of the important concerns to web designers is striking a balance between the creative aspect of a website in terms of style and media and being able to implement the design into an accessible and standards compliant site which can be read by search engines. Web technologies have come a long way in a short time in helping to achieve this with xhtml, css and javascript providing a more flexible way of realising ideas while maintaining clean, structured code and accessibility standards. More recently newer developments are becoming available which are pushing the possibilities of the web and raising the bar in the flexibility designers and developers have. As long as the ideas keep flowing on what we would like to achieve on the web, the technology will continue to advance inorder to match this.

CSS3

Css3 has been in development for a few years but is now beginning have some of its features supported better. There a number of interesting features which have been developed to meet design trends, so as to make the implementation of these stylings easier, though many of them are still currently unsupported by browsers, especially Internet Explorer. Some of the features include:

    - Multi column allows the developer to position blocks of text in several columns similar to print.

    - Rounded corners can be achieved on elements by setting a radius on the corner.

    - Border images allow the developer to create custom shaped elements by setting graphics for each corner and sides of an element.These 3 features are only currently supported in Firefox and Safari 3.

    - Border color allows gradient borders to be used though are currently only supported by Firefox.

    - HSL colors have been introduced, which aswell as setting the colour also allows you to set the hue, saturation and lightness of colours, providing a lot more flexibility in colour schemes. So far this is supported by Opera 9.5, Safari 3, Konqueror and Mozilla.

    - One of the most popular features of css3 is opacity. This can be set on different elements allowing a gradient effect to be achieved. This is supported by most browsers except Internet Explorer.

    - Box sizing is an interesting one as previously padding and borders were always added to the width of an element but now can be added inside a div. Firefox and Safari support this with the prefix -moz- and -webkit- respectively though Opera simply works with box-sizing.

    - Font-face was included in css2 but was only supported by Internet Explorer if an .eot font format was used but Safari 3.1 now allows Truetype or Opentype font to be implemented in designs.

Flash accessibility.

Flash has always been a blessing and curse to both developers and users. It can achieve unique interactive experiences for users and bring a site to life but with search engines unable to extract text or links from the file, it has made flash sites often inaccessible and difficult to index. In the last 6 months it was announced by Google and Adobe that the algorithm Google uses is dramatically changing which will allow text and links from flash files to be read and allow sites to be indexed better in search results. Adobe is developing a flash reader for search engines which will allows the files to be read. Another technology which employs Flash and provides developers with more flexibility in terms of typefaces on the web in Sifr. This is a type replacement technology which allows any typeface to be employed in a website. Its fully accessible with all major browsers and can be read by screen readers.

Post to Twitter

The great “work for free” debate…

Wednesday, December 3rd, 2008

Our recent “work for free initiative” has certainly sparked a lively debate among the design community, with the Design Business Association (the DBA) condemning it as ‘damaging to the industry as a whole’.  A little harsh perhaps, but they are of course entitled to their opinion.

As are you…  and whatever that opinion may be, I’d welcome your thoughts added to the “Design Week” website where they first reported the DBA’s response to our bit of Christmas fun!!

Post to Twitter

The Web Design Industry and the Credit Crunch

Tuesday, November 11th, 2008

There’s been so much talk lately about the “credit crunch” that I almost feel obliged to write something on this subject to brighten the mood.

While it’s clear that there IS definately a slow-down in the web industry as a whole, it’s certainly not as dramatic as the effects on other sectors (god help the housebuilders and estate agents).  In general, we’re seeing the same voume of potential new clients and opportunities, but what’s clear is that they have less money to spend.

I would even argue that the current financial situation means there are MORE potential clients, as more businesses ditch the office and move entirely online to reduce costs, or start up new web shops to bolster low retail sales..

That said, businesses in the web design and development industry needs to remain cautious and ensure a long term strategy that will see them get through, and even strive in these tough times.  A strong focus on customer service, and value added services will ensure that clients identify with you rather than a competitor, together with solid processes and methods that do allow you to remain competative (though never cheap!) allowing you to agree any reduced budget.

Have a look at a good article –  Surving the Credit Crunch aimed specifically at the design industry, as well as some good tips to reduce business costs.  Remember that it’s not all doom and gloom!!

Post to Twitter

A busy few weeks for Google

Friday, October 10th, 2008

Having recently celebrated it’s 10th birthday (watch this space for details of NSDesign’s 10th birthday early next  year), Google continues to be busy on the development front, releasing a number of new products and services recently.

Two of my favourites so far – Google Chrome – their new web browser, and Mail Googles, a fun addition to their GMail platform that might save a few people from sending the occasional dodgy email late on a Friday night while under the influence…

Chrome is big news in the web world – 1) Because it’s a new browser from Google, and 2) Because it brings with it the possibility of another browser war, with Google’s rivalry with Microsoft stronger than ever.

We’ll post our own review of Chrome soon, but for now, suffice to say that Google’s first effort into the world of browsers does a decent job, and most importantly, seems to be pretty much standards-compliant (being based on the Webkit engine which powers Apple’s Safari) which should save a few headaches from a design/development point of view.  Read Bruce Lawson’s “On Google Chrome” for a more detailed evaluation and opinion.

A million miles from the “strategic move” that is Chrome, Google also announced Mail Googles.  Had it been April 1st I’d have thought it a joke, but think about it a little deeper, and it’s really not a bad idea!..  We’ve had many a domain order, placed at 3am (you know who you are!) from customers returning from the pub…  Many of which are on the phone next day trying to ask for their money back…  “Can I get a refund for ScottyKingofBeer.com please?  I don’t really remember ordering it…  Maybe we’ll follow Google and introduce something similar…  then again….

Post to Twitter