Pencil Project – Free wire framing tool

Posted on April 26, 2012 by Alex Wells

The Pencil Project is a free prototyping / wire framing tool that is available on Windows, Linux and Mac

This useful tool lets you quickly and easily create wire frames for website projects as well as apps and database processes, being available on Windows and Mac means that all members of the creative team / process will be able to view and edit the wire frames.

Make sure you download option 2 so that it runs as a standalone application and not a firefox plugin as when you update firefox it disables the pluign :

http://pencil.evolus.vn/en-US/Downloads/Application.aspx

Blog post by Alex Wells
Working as a Website developer I love nothing more then working waist deep in code, I have specific interests in PHP and WordPress development but mostly working with local businesses to provide them with a website that meets their needs. Contact me if you have a project in mind and would like to get an input from an experienced website developer.

click and drag for text on mac

Posted on April 21, 2012 by Alex Wells

How to set a mac up to ‘click and drag / select’

System Preferences > Universal Access > Mouse & Trackpad > Trackpad Options… > Dragging

http://forums.macrumors.com/showthread.php?t=1201060

having trouble installing Adobe Creative Suite?

Posted on April 18, 2012 by Alex Wells

while trying to update my software i ran into an issue where the installer would not start this link helped solve the issue with the Adobe CS clean up tool!

http://www.adobe.com/support/contact/cscleanertool.html

IT Job Watch

Posted on April 18, 2012 by Alex Wells

This website keeps track of the salary averages for a wide range of IT jobs in the UK, you can use it to see where you fit into the UK’s averages and even limit it down to regions of the UK to see where your next move might be!! – worth a bookmark

http://www.itjobswatch.co.uk/

Z-index IE 7 bug

Posted on April 17, 2012 by Alex Wells

while working on a website i found that my hover over menu would hide behind other elements on the screen, this bug was only with IE 7

the solution is to give the parent element of the drop down a position of relative and a higher z-index value

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

update:

this bug has caused more problems with navigation in IE, dropdowns in IE hover hovers, menu pop downs

How to optimize websites for mobile devices (tablets and mobiles)

Posted on April 12, 2012 by Alex Wells

This post will look at what you can do to optimize your website for mobile visitors, mobile visitors are users who are accessing your website via a mobile device such as a tablet (iPad) or a mobile phone (iPhone). The number of users accessing the web via a mobile device has dramatically increased in recent years mainly due to the improvements in technology that make it possible to do nearly everything you do on a desktop on a mobile device.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

With this rise in mobile visitors set to continue it is more important then ever to ensure you are catering to the mobile market, in this post we will look at what you can do to make mobile visitors enjoy the experience they get while on your website.

Do nothing

The first mobile visitor strategy we will look at is doing nothing, this may sound a strange way to to approach the problem however in some cases it may be the best option, the creators of mobile devices such as Apple with their iPad and iPhone know that the web is full of content that has not been optimized for the smaller screens and have built into their devices the capability to render full size websites and automatically adjust some features to make them more mobile friendly, an example of this on the iPhone is the auto linking of phone numbers – the iPhone will automatically link any numbers so when a user clicks on them they will automatically call the number.

This means that most websites will be usable on mobile devices already the important thing here is to try it out and see how the devices deal with your website, some can work well especially on the tablet devices and may not need any further input but others do not transfer well onto the mobile platform – those that rely on hover over effects that can’t be duplicated on touch screens for example or content that is created using flash (see below)

Remove Flash content

The majority of mobile devices do not support flash this means that a website using it will not display correctly when being viewed on a mobile device, if the content being deployed via flash is not vital to the websites structure or the rest of the page content it may not be a problem however many sites deploy flash to power features such as their navigation with the end result being mobile visitors can’t browse past the home page of your website. The solution? to remove flash content from your website or provide alternatives for devices that do not support flash content, if you are unsure on how to do this contact your website developer for more information. Modern websites make use of JavaScript to achieve the same effects that older website deploy flash to achieve and with the rising popularity of JQuery a JavaScript framework there are large numbers of freely available plugins to achieve the effects without needing to know how to program in JavaScript.

Responsive website design

The biggest limitation of mobile devices is the small screen size, this means that websites need to make the most of the screen real estate that is on offer, the best way of doing this is to upgrade your website so that is is responsive simply put what this will do is let your website adjust its layout automatically to the different screen sizes your visitors are using to view the website. To learn more about responsive website design check out this blog post.

Other options

To create a truly mobile device optimized experience there is other options that may need your needs better however they will both require creating a separate version of your website which may not be the most efficient method as it will require separate updates.

Native App

This option will involve creating a native application for all of the device operating systems you wish to target, the native app will then be distributed via the devices authorized software store – for example the Apple App Store. Creating a native application will give you access to the devices features such as the camera and GPS that the other options will not, the downside being for each device platform you wish to target you will need to produce a separate native app. For example if you wanted to target Apple, Blackberry, Windows and Android you would need to create 4 different native apps.

Web App

An alternative to creating native apps for each mobile platform is to create a single web app, this would mean that apart from only needing to create a single app in the start when you update the content of your app you will only have one app to update. A web app is essentially a website that uses a JavaScript frame work such as JQuery Mobile to give the appearance it is running as a native app. What this means is users can add the app to their home screens and unlike websites the app can run in full screen making it look just like a native app. To learn more about web apps check out this blog post.

What to do next?

The next step is to review your site looking at it on the mobile platforms you wish to target and decide on which route to take, if your website works well and does not contain flash content you may not need to do anything but if you want the best performance and access to the GPS and camera you will need to go down the native app route. The majority of websites that need to do something will end up creating a responsive website as this is the most effective option from both an end users view point as it scales to fit different screen sizes but also for the owner of the website as it will be cheaper to implement then the other options but also because there will only be a single ‘system’ to update.

If you are still unsure what to do or would like to get some help with your specific project please feel free to contact me or leave a comment below

output / echo data from PHP before page is done loading

Posted on April 4, 2012 by Alex Wells

While working on a website i needed to output data while the page was still loading, in my example i wanted to loop until a random number was created that did not have a folder in a directory with the same name, to test the loop i set it to loop if the random number did not have a folder – essentially creating an endless loop – what i wanted it to do was to output the random number it created and then generate another and so on.

this is my example code:

do
{
$number =rand();
$number .= date('ymdhs');
$number .= rand();
echo $number;
echo '
';
ob_flush();
flush();
}
while ( is_dir('uploads/'.$number) ==false)

the section of code that outputs the data is:

1 2	ob_flush(); flush();

the source for this information is: http://www.icemelon.com/tutorials/20/Output_While_Script_is_Still_Running.htm

How to add an iPhone icon to your website

Posted on April 2, 2012 by Alex Wells

In this post we will look at adding an icon to your website for use on the iPhone / iPad, these icons will be shown when users add a link to your website to their devices home page and makes the short cut look more like an app which means it fits in nicely with the rest of the apps the user has on the device.

The first thing you will need to do is create the icon, this needs to be 57px by 57px and 72dpi make sure you save the image as a png the image below is the iPhone icon for this website, feel free to save it and design your icon over the top of it:

One thing to note is the icon will have its shine and rounded corners added automatically by the iPhone so you dont need to add these when creating the icon.

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later). Apple

next you need to upload the icon to your website and insert the following code into the head of the site

The link can be relative if required,

and thats it you now have an icon that will be added to the home page of iOS devices

if you need help with adding the code or creating the icons for your website please feel free to get in touch

Jquery mobile splash screen

Posted on April 1, 2012 by Alex Wells

Jquery mobile has made the creation of web apps much easier as we can now use the web development framework to create mobile web apps, in this post i am going to outline whats required of a splash screen.

the first thing is the size the image needs to be 320px by 460px and at 72dp, my example is index mode and saved as a png file

The above image should already be the right dimensions and file format for you to use as a template simply import it into Photoshop and design your loading screen over the top of it.

With your new splash screen created add the following code to the head of your web app:

1	<link rel="apple-touch-startup-image" href="http://www.rscnet.co.uk/app1/startup.png">

replacing the link with the location of your own slash page, make sure its a direct link and not a relative one as it will not work – more information regarding the direct link is available here