Have you heard?

The Office for National Statistics (ONS) has today released the latest UK internet usage stats. At a stroke, these latest figures have dispelled the myth that Britain's internet use has plateaued. In the last quarter 300,000 people went online for the first time, hinting that there may be some way to go before the UK reaches web saturation point. ONS data also confirms what anyone who uses public transport has long suspected - that more people are using smartphones to access the internet than ever before.

As sales of internet-enabled phones continue to rise, many of us are getting used to carrying the world in our pocket. Soon we will reach a point where smartphones, rather than computers, become the primary device used to connect to the internet.

The impact of this change is already being felt - as companies are increasingly being forced to redesign their websites for use via mobile phones. They are realising that what works well on a desktop or laptop can often be very frustrating on the small screen of a smartphone. The pressure is on to build simpler, smaller websites with fast download times and fewer clicks needed.

It's the web's equivalent of the move seen in the music industry three decades ago. As record labels switched from LPs to CDs, album artwork became simpler and cleaner to cope with the new, smaller format. (And the purists amongst us all moaned that the new format would diminish the impact of the beautiful cover art!)

The rapid growth of smartphone use is leading many of us to view instant, on-the-go internet access as the norm - and forcing businesses to radically rethink and redesign their websites as they try to keep up.

Have you checked how your website looks on a smartphone?

New desks, new logo, new business cards- it's all in with the new at Webstars lately!  Anyone would think we're undergoing some kind of re-brand or something.

Since we last updated the blog, there's been quite the transformation taking place in and around the office.  First we got a beautiful new logo to update our rather outdated one.  Then, some pucker looking business cards found their way to us, and a few days later some bloke came along to install new desks sporting 'on brand' purple dividers.  These naturally caused quite a stir.

Yep, this hungry little caterpillar is well on its way to butterfly-dom.  We're working on our image, building the new brand and sinking our teeth into some pretty exciting projects including a Facebook App for O2, a re-brand and site design for Nutkhut, the performing arts company, and a new e-commerce site for the well established dance footwear company, Bloch, a foot-tappingly impressive 80 years in the business!

It's not just new business and shiny business cards.  We have also changed up the office chair warmers.  After the departure of James and Adam, the Webstars team are delighted to have taken on board not two, but three new excellent members of staff.

Chris Youd is our new Head of Project Management.  Nandita Lovage has joined us as Project Executive, and recently, we also welcome Tom Mortimer, Project Manager, the newest addition to the project management team.

So I'd say we're pretty much ready to spread our wings and emerge renewed- onwards with the updated website!

I’ve been meaning to get this post up for a little while now.  Maybe a part of me was subconsciously putting it off to save face- no, come to think of it, I was trying to literally save you the pain of witnessing our ridiculous faces.

Too late now though (plus something tells me it's more of a schadenfreude-type emotion you're beginning to feel as you scan the pic...)



I don’t know if you’ve heard of the ‘Big Book’ but this year, Webstars’ project managers’ mugs are all over it.

All shiny and serious-looking in its hardback glory, the ‘Big Book’ is the annual “woah, you’re cool”  to the design and advertising world, celebrating the industry’s 2011 Campaign Big Awards winners, and this year it happened to be sponsored  by our friends from down the corridor, Cogs Agency.*  

And they just so happened to have selected the Webstars' PMs as ideal candidates to pull silly faces for their sponsorship ad- spose they saw something in us.

No sooner had they turned on the camera, than we were already warming up, contorting our face muscles into all sorts of fancy formations- and hey presto- the stars of their double page spread were born.

As I’m sure you’ll agree, we all meet the brief perfectly.

Guess that’s the natural glow of odd looking folk "Talented People" with "Great Careers."

(err...yeah...that's us)

--------
*yes, that's us on their site too in case you were wondering, and indeed some of these images we're using here on our own site- we're everywhere.

Have you ever ended up coming across a URL in a webpage only to find out it was not clickable? It can be really annoying to have to copy and paste the URL from the webpage into the browser's address bar.

Bookmarklet: Make Links Clickable
Drag the above link to your bookmark bar

Example page: Demo
Javascript raw source: View

How was the bookmarklet made?

A bookmarklet is basically a normal bookmark that has a javascript function passed on to the browser through the 'javascript:' protocol instead of simply a URL.

To make an "installable" bookmarklet, create a link with the javascript function in the href attribute of the <a> tag and instruct your users to drag the link to the bookmark bar.

Example:

HTML Source <a href="javascript:alert('Document has ' + document.getElementsByTagName('a').length + ' links');">Count links in document</a> Output Count links in document

After writing my javascript function for the bookmarklet in a separate file (as so - snippet.js) I used a php function to create the one-line javascript function by striping out all new line characters ( , ) and all tabs ( ) with the help of str_replace.

The resulting javascript function can be called on click by surrounding it with () and calling the newly encapsulated function with another ().
Javascript Source ( function() { /* ... */ } )();

Final Code
PHP Source <a class="bookmarklet" href="javascript:(<?php echo str_replace(array(" ", " "), '', file_get_contents('javascript/snippet.js')); ?>)()">Make Links Clickable</a>

*Note be sure to end all javascript expressions with a semi colon (;) as the bookmarklet has to be one line of code. This includes function constructors.

How was the link finder made?

To find all links in a document (not counting all the ones that are already inside an <a> tag) you must first get all the raw text from the HTML. The browser holds this raw text in so called TextNodes.

In order to get all the text nodes from the DOM, we start from the top (document.body) and make our way down the DOM tree, saving all nodes that are text nodes (child.nodeType == 3) and walking down recursively to nodes that are not text. Be sure to not go down nodes that do not allow <a> tags in them such as <textarea>, <script>, etc.

Having all the nodes, you can now parse them, finding "http://", "https://" or "www." to create a clickable link. For more information please check out the raw javascript.

That is it! I hope you find the bookmarklet useful. If you have any problems or questions feel free to send me a message to bogdan@webstarsltd.com.

Well hello, world.  

A pretty hectic time to launch this, the new Webstars site, what with the simultaneous launch of a new website for the Office of Gordon and Sarah Brown.  Adam (one of our PMs) is sat next to me and frankly I worry for his health, such has been his unflagging dedication to getting this project finished.

And flawlessly, too - Jez (our MD) has just waded in to question whether the use of a single arrow or a double chevron is the best way to draw users' attention to a particular link. That's the kind of detail that can set off an massive argument intelligent discussion in our office. 

So but anyway, I'm meant to be talking about our new site, never mind a former prime minister's.  

You've made it to the blog, so you've probably already seen everything else, but there's a few little niceties that I'd like to draw your attention to: the static footer so that you can always easily contact us, the way the links follow your mouse on the project thumbnails of the work page, and the lovely way the big arrows on the homepage slide in when you resize your browser window.  

We hope you like it as much as we enjoyed putting it together.