Five years ago today, May 14th, our Studio Manager walked through this turning off Market Place in Henley-on-Thames to work his first day at Signals.

Happy Anniversary Greg!

FIVE CHEERS!

Our Creative Director Richard, who is riding another fundraiser later this year, rode out one lunchtime with Tim who joined Signals only last week. Tim is a software developer and "open source convert" - welcome to Signals Tim!

Another warm welcome here for Ed who also joined last week and brings his love of Palaeoanthropology and punk rock bass skills to the studio mix.

We have a few faces (Anastasia and Maya also joined in the last few months) who have yet to experience a Signals social ... time to get planning. Company bike ride?

You can read about and sponsor Richard's Solent Challenge for Hope & Aid Direct at BMyCharity.

We needed a banner that wasn't made with flash but had the ability to show images in rotation.

Having searched the web and failing to find exactly what we needed I decided to use a programmers' favourite trick: copy, paste and modify something that we'd done in the past to fit the new requirements.

This banner basically loops through two arrays. One has the image and the other has the url that the user clicks when they click the image.

The other thing we had to create is the ad admin tool for the banners so admin users have the ability to add and upload banners or even remove them.

 //user clicks banner 
        jQuery(".click").click(function () {
            window.location = $(this).attr("url");
        });

        
        var myArray = new Array();
        var myUrlArray = new Array();
        var current = 0;

        var count = 0;


        var totalitems = 3;

        myArray[0] = '/images/banner/image1.jpg';
        myArray[1] = '/images/banner/image2.jpg';
        myArray[2] = '/images/banner/image.jpg';


        myUrlArray[0] = '/Home/News';
        myUrlArray[1] = '/Home/NewProducts';
        myUrlArray[2] = '/Help/Tutorial';


        jQuery(document).ready(function () {

            loadProjectTree();

            //Set the first graphic for the banner
            jQuery('.animate').css('background', 'url(' + myArray[0] + ') no-repeat ');
            jQuery('.animateclick').attr("url", '' + myUrlArray[0] + '');
            buttons();
            jQuery('.animate').show();
            jQuery('.selectbox').show();

            //Start at 1 as 0 is the image used onload
            if (++current == myArray.length) {
                current = 1;
            }

            //start the animation
            var intervalId = setInterval(function () {
                if (current > myArray.length - 1) { current = 0; }
                animate(current);
                current = current + 1;

            }, 10000);


            //User clicks 1,2 or 3 button
            $(".select").click(function () {
                //Stop the current countdown;
                clearInterval(intervalId);

                //clear pause
                jQuery('.pause').val('go');

                //get the number of the selected item
                current = Number(jQuery(this).attr('number'));

                //change the image without waiting
                animate(current);

                //change the button selected
                changeSelectedImage();

                //restart the animation
                intervalId = setInterval(function () {
                    current = current + 1;
                    if (current > myArray.length - 1) { current = 0; }
                    animate(current);

                }, 20000);

            });


            //user clicks pause
            $(".pause").click(function () {

                if (jQuery('.pause').val() == 'go') {

                    //Stop the current countdown;
                    clearInterval(intervalId);

                    jQuery('.pause').val('stop');
                    changeSelectedImage();

                } else {

                    jQuery('.pause').val('go');

                    //change the button selected
                    changeSelectedImage();

                    //restart the animation
                    intervalId = setInterval(function () {
                        current = current + 1;
                        if (current > myArray.length - 1) { current = 0; }
                        animate(current);
                    }, 20000);

                }

            });
        });


        //banner array could be equal to one so hide 1,2,3 buttons if the 
        function buttons() {
            if (totalitems <= 1) {
                jQuery('.im0').attr('class', 'hide');
                jQuery('.im1').attr('class', 'hide');
                jQuery('.im2').attr('class', 'hide');
                jQuery('.im3').attr('class', 'hide');
            } else if (totalitems == 2) {
                jQuery('.im2').attr('class', 'hide');
            }

        }

        //when you clicks 1,2 or 3 change button graphic to selected
        function changeSelectedImage() {
            if (jQuery('.pause').val() == 'stop') {
                jQuery('.im0').attr('src', '/images/icons/0.png');
                jQuery('.im1').attr('src', '/images/icons/1.png');
                jQuery('.im2').attr('src', '/images/icons/2.png');
                jQuery('.im3').attr('src', '/images/icons/pauseb.png');
            } else if (current == 0) {
                jQuery('.im0').attr('src', '/images/icons/0b.png');
                jQuery('.im1').attr('src', '/images/icons/1.png');
                jQuery('.im2').attr('src', '/images/icons/2.png');
                jQuery('.im3').attr('src', '/images/icons/pause.png');
            } else if (current == 1) {
                jQuery('.im0').attr('src', '/images/icons/0.png');
                jQuery('.im1').attr('src', '/images/icons/1b.png');
                jQuery('.im2').attr('src', '/images/icons/2.png');
                jQuery('.im3').attr('src', '/images/icons/pause.png');
            } else if (current == 2) {
                jQuery('.im0').attr('src', '/images/icons/0.png');
                jQuery('.im1').attr('src', '/images/icons/1.png');
                jQuery('.im2').attr('src', '/images/icons/2b.png');
                jQuery('.im3').attr('src', '/images/icons/pause.png');
            } else {
                jQuery('.im0').attr('src', '/images/icons/0.png');
                jQuery('.im1').attr('src', '/images/icons/1.png');
                jQuery('.im2').attr('src', '/images/icons/2.png');
                jQuery('.im3').attr('src', '/images/icons/pause.png');
            }

            buttons();
        }


        function animate(number) {

            jQuery('.animate').animate({
                opacity: 0
            }, 0, function () {
                jQuery(this).css('background', 'url(' + myArray[number] + ') no-repeat ');
                jQuery('.animateclick').attr("url", '' + myUrlArray[number] + '');
                // Animation complete.
                jQuery(this).animate({
                    opacity: 1.0
                }, 1000, function () {
                    // Finished
                });
            });
            changeSelectedImage();
        }

There you have it: a flash-free rotating banner. You can customise this further or just use it as it is. Hope it helps you out! Select the CODE tag to see more of our free code blog posts.

Our case studies all follow a specific template designed within InDesign to reflect our branding. It's always a good idea before starting any design for print/web in InDesign to consider whether this layout will be used on other occasions - if this is the case I would recommend creating a template. Although it may initially take slightly longer to set-up you reap the benefits later when it's just a case of flowing in text, placing graphics and clicking on the correct paragraph and character styles.

Tips for templates

Master Pages
Try to utilise as much as possible the creation of master pages. This is so useful for anything that appears in the same place throughout your document. It could be a logo that needs to be placed in a specific area of your page, headers and footers, page numbers, margins and column widths, guide lines, left and right pages etc.

Layers
Creating different layers for text and graphics helps when you need to reposition a graphic on your page but don't want to move the text at the same time. You could also create a layer for your logo and then lock this layer to prevent any shift in position.

Paragraph Styles
You should always think about the text hierarchy of your document before you create your character and paragraph styles. For example you will find that any standard document usually includes a title style, table of contents, headings, body text, bullet lists etc. These can all be assigned a style in InDesign which saves you time as you only have to set it up once, and any further amendments e.g. changes to font size, leading, colour etc can be changed at one central point - no need to change every paragraph throughout your document. Text assigned to a particular style will update automatically throughout your document.

Character Styles
I use these when I want to add an extra attribute to text that has already been assigned a paragraph style e.g. to make bold or italicised text. So any amendments you make to your paragraph style (font size, leading etc) do not affect your bold, italic, and colourized text.

Colour Swatches
Our case study templates contain very few swatch colours - red, greys and black. A good tip when carrying out a final check before export is to select ‘all unused' on the swatches drop down menu. This highlights to me any stray colours that might be hidden within the document from eps files containing spot colours that I have forgotten to convert. I would then go back to the original file and convert these to CMYK (print) or RGB (web).

Final Checks
After the artwork has been signed off I use the Preflight panel to double check that all images, overset text and links are correct.

Export to PDF
I have set up a custom PDF preset for all case studies (RGB mode for web display) - this is easily done. Go to File - Adobe PDF Presets - Smallest File Size. When you save the file an ‘Export Adobe PDF' window appears go to compression and change compression of colour images to suit your needs. I have found that sometimes images appear very blurred using just the smallest file size. If you tweak the image compression slightly it doesn't impact too much on your end file size. You can save this by selecting the ‘Save Preset...' (bottom-left of your window). If a study case requires printing I usually export to PDF/X1a preset then open acrobat to check on how the document separates by going to - Tools - Output Preview. This also provides me with a good indication of how the colours will appear using U.S. Web Coated (SWOP) v2 profile.

Though these are guidlines for Signals case studies, there are tips here that might be useful to any budding InDesign-er!

You can see lots of Signals case studies in the How We Help area of our website.

CODE: Making a comeback this Spring as Gianna reveals her jQuery secrets for a customised banner.

STUDIO: For the first time, Signals opens its doors to photographers in a BLOGUE exclusive virtual tour.

FRESH LOOK: Signals can give your sales force the edge.

Creating our own internal Wiki has been a new and exciting challenge for Signals. The hope is that instead of racing about trying to find the one and only person in the company who seems to hold that crucial piece of knowledge in his/her head (and then finding out they are in a meeting in Edinburgh or have fallen down a random pothole), you can just look it up on the Wiki and ta da! There it is. Crisis averted. No time wasted.

That's the dream and we've made a great start, heading into 2012 with the beginnings of a Wiki that is already proving very useful. Not just for technical development challenges and project processes but for the everyday, much simpler and often overlooked conundrums like "how do I scan from the office printer?"

With everyone contributing their wisdom and experience to the database it is becoming a truly powerful tool; an ever changing, up to the minute encyclopaedia of Signals knowledge. In our never ending quest for efficiency we feel pretty chuffed that our working practices are well on the way to being so STREAMLINED and frankly SENSATIONAL.

So, to Wiki or not to Wiki? Here is the answer: To Wiki...definitely!

The Signals Wiki reflects the values that are at the core of our business. Whether you're looking for greater efficiency, easier ways to do business, a more effective sales force, or better communications within and beyond your enterprise, we have the experience, technology and creative skills to deliver it for you. Find out more HERE.

We often get asked to create iPhone apps when what is really required is a smartphone app. But what is a smartphone? And how can we, as a company that makes applications, write for such a broad platform? Can we use Flash? Not on iPhone, but yes on Android... but wait! Even that's not quite true; we can create iPhone apps using Flash and then convert it through Flex... So, what is a smartphone app? What does it look like? What is it written in? And what features can you use?

World English Dictionary (taken from Dictionary.com)
smartphone (ˈsmɑːtˌfəʊN)

- n
computing a mobile telephone with computer features that may enable it to interact with computerized systems, send e-mails, and access the web

Well... that's not much help!
Perhaps Wikipedia will explain?

"A smartphone is a high-end mobile phone built on a mobile computing platform, with more advanced computing ability and connectivity than a contemporary feature phone."

More advanced computing ability? Not very helpful either...

So it appears that there is no minimum specification for a smartphone. It might have a camera, could have GPS, might have a hardware keyboard, or even a multipoint touch screen. It could have a large display with HD graphics or possibly a small screen with limited graphic processing power. It could be running iOS, Android, Windows, or Blackberry OS.

This is our challenge. It also one of the reason why I love my job! The goal posts don't just move, they change shape and size!

CASE STUDY

iPhones: success in your pocket

Signals created a hugely successful app for a major international manufaturer to maximise the efficiency of its highly mobile direct and indirect sales channels.

Every Friday we have a delivery of cupcakes to the Signals Studio from Cakes Galore by Rosie. Carrot or chocolate today, yum.

It's a good job there are cakes in the house because today we have a very special occasion to celebrate: our Creative Director has been with Signals Ltd for fifteen years! Cue party streamers, balloon drops, hip hip hoorays and plenty of gold watch jibes.

Congratulations boss :)

No matter how simple or complex the website, portal, cloud application or mobile app you are building, the process for designing & planning the user experience should be as straightforward as possible. If the tools you are using to put your ideas down are time consuming and cumbersome, it clouds your thought process; you spend longer trying to make something look like something than actually being productive and thinking about the navigation, the content flow, the information hierarchy.

A wireframe is a plan for your project, your client will want it - to be sure everything is covered. Your technical team will want it - to be sure what is being asked is achievable and makes sense. By adding interactivity to your wireframe you can create a compelling prototype that allows your client to ‘try it before you build it'.

Currently, I switch between PowerPoint and InDesign, depending on the level of detail I need to achieve.

PowerPoint is great if I have a lot of content to sort out because you can share and exchange the file with the client and add links within the content - the downside is that things don't look great (without spending an eternity drawing individual elements to represent e.g. scrollbars, nav bars etc.)

InDesign is overkill but allows you to make pristine artwork on a larger canvas - ideal for mapping out an iPad app with menu hierarchies. The PDF output is ideal for emailing and getting comments; again you can hyperlink the content to simulate the user experience. The downside to InDesign is that it is print artworking software, and requires a good level of competency to get you through.

So what is out there to help you wireframe your project - plenty!

Free Online Wireframe Tools

There are a number of free online tools to help you out there, some start off as limited versions, and others are the full thing but have limitations.

Pencil Project :: This Firefox plugin is simple to use, has some good templates available and gives you the flexibility to export to HTML, image formats and much more. Get it here http://www.evolus.vn/Pencil/Downloads.html

Freemium / Premium Wireframe Software

Again, there are plenty of subscription services out there with powerful tools to help assist rapid wireframe creation...try these...

Axure  :: An online service with a host of drag and drop functions, templates etc - very powerful. (http://www.axure.com/)

Mockflow :: Online and Offline, basic Free version and Premium version, real time collaboration productivity tools, template components and icons. (http://www.mockflow.com/)

And the winner is...

PowerMockup :: A wireframe kit for...POWERPOINT
Yes, you guessed it, i've gone 360 degrees and chosen a wireframe tool that sits inside PowerPoint. It's simple to use and has proven to be invaluable thus far. The only downside is that I can't publish to HTML to create a prototype, but by simply sending the file to the client, it can be run in slide show mode and prototyped on your desktop. Easy. It's not expensive either. (http://www.powermockup.com)