Posted by: Peter Andrease

Posted on: September 11, 2012 9:06 am

-

Sliders can be a good way of showing multiple news stories while saving space but done incorrectly they can be an eyesore. Heavy animations or overuse of graphics can really make damage the rest of the content on the page.

Sliders have been around in web design for a long time, first it was flash animation sliders and then jquery sliders. Done right users will enjoy cycling through a slider to find a story. Done wrong a user will be overwhelmed with information and leave or find themselves clicked into a page they did not intend to be thus getting frustrated and eventually leaving.

Slider

Do:

  • Use a slider if you think you’re desperate to get more news near the top of the page and don’t want to lose space on the page.
  • Use a slider if you’ve got relevant information you think a user will want to cycle through, not just because everyone else is one.
  • Use a discreet transition, recommended is a fade or simple slide effect. Unless you are a selling your jquery or animation skills don’t overkill it.
  • Use pagination or arrows. It’s good to show the user how far they are through the slider, how many stories are left. Try to have numbered pagination if they’re stories or if they’re less text heavy then bullet points will suffice. Arrows can look nice too but I recommend using them when the slider is hovered over, if you’ve already got a click here button in the slider, pagination bullet points at the bottom and a left and right arrow the user has 3 calls to action in a small space. Try to keep in minimal.

3d Slider

Don’t:

  • Have too many irrelevant slides, users can get distracted easily.
  • Use blinking illustrations and flashing text when you’ve already got an animated banner – this is a headache for the user.
  • Use click here or read more buttons in your slider, use buttons to your advantage by helping let the user know what they’re clicking on. If they skimmed the story, suddenly seeing a read more is not going to help, but if it says watch video or view experiment then that’s more effective.

Posted by: Peter Andrease

Posted on: July 31, 2012 3:25 pm

-

Photoshop is a program that can take a lifetime to learn. You’ll be doing one way for years and then may discover there’s actually a quicker way or more cleaner way do it. I’m going to go through a few keyboard shortcuts and some ways I like to work in such a great program.

The color range tool

So we all know the different types of selection tools:

  • Marquee
  • Lasso
  • Polygonal Lasso
  • Magnetic Lasso
  • Quick Selection and magic wand
  • Pen tool

You might not have heard of the Color range tool but it’s a good one to know in the right situation. Find it on the menu ‘Select’. Block colours that are scattered around an image can be quickly selected with the click of the button – rather than having to go around the image and click on each instance of the colour.

 

Some useful Photoshop Windows Keyboard Shortcuts

 

  • Transform: Ctrl + T
  • Hue/Saturation: Ctrl + U
  • New layer: Ctrl + Shift + N
  • Duplicate Layer: Ctrl  + J
  • Save: Ctrl + S
  • Copy all layers in a selection: Ctrl + Shift + A
  • Preferences: Ctrl + K
  • Change Document: Ctrl + Tab
  • Fill layer with background colour: Alt + Del

Posted by: Peter Andrease

Posted on: July 17, 2012 4:16 pm

-

When you’ve got a big project lined up its important to get the foundations down before you get to excited with jumping into the design or getting it live. You’re faced with a massive process that requires you to get it down as early as you can if you want to stop scope creep or complications later on in the design or the build or even after the site is live. Let’s begin.

Notes/sketches/resources

Hopefully you’ve had a lot of meetings and guidance from the all they key players in process. There might even be more along the line but the important thing here is to get as much information as you can about the purpose of the site, the audience and who’s signing it off! The third one is probably going to be the most important. Write or sketch down all your ideas about the site. Get as much down as you can as you can always refer back to them later. Once these are all down start with a wireframe.

It is important to start with a wireframe in a big design process. Here is a quick wireframe sketch below:

wireframe

This is a very basic one but you get the idea.

Posted by: Shofiur Rahman

Posted on: July 11, 2012 4:13 pm

-

Every day hackers are discovering new exploits and hacking techniques. We can defend some categories of attacks in our PHP script.

Abusing register_globals

It is a setting in php.ini that controls the auto population of variables with the same name as form elements or cookies. If register_globals set to on then it may bring a disaster for your website.

Since PHP 4.2.0, the default value for register_globals is off. But often web hosts will re-enable register_globals to provide compatibility with older scripts. We can get clear concept of register_globals on or off with the following example.

Suppose username is a form element. With register_globals ‘off’, the only way to get the value of this form element using $_POST or $_GET array, depending on form action method. On the other hand, when register_globals is ‘on’, the username field value is accessible using $_POST, $_GET and $username as well.

If you are not able to disable register_globals in php.ini, you can turn it off use an .htaccess file.

php_flag register_globals off

SQL Injection Attacks

SQL injection attacks are simply the inclusion of malicious SQL statements in the place of what should normally be inoffensive data. SQL injection preys on a lack of input scrubbing and data validation.

SQL injection is fairly avoidable with an insignificant preparation and thorough coding practices. If magic_quotes_gpc is enabled, PHP automatically escapes any escape characters (e.g. apostrophes). Unluckily, this activities is applied to all GET, POST and Cookie variables in spite of whether they are going to used in a SQL statement or not. Most of the time it can be annoying. To make sure the data is escaped only when we need it to be, we can turn off magic_quotes_gpc in php.ini, and use addslashes() on all data that is being passed to MySQL. The addslashes() function will automatically escape any unsafe characters so our input will not choke MySQL.

Cross-Site Scripting

Cross-Site Scripting abbreviated XSS, cross-site scripting is the abuse of unfiltered dynamic output, where the invader has the skill to add or change the page’s generated markup. Most commonly, this means the addition of a small bit of JavaScript to the output of a page, which then does something ominous, such as trick another user into revealing their login credentials or credit card information, or possibly divulging cookie or session information for immediate account compromise.

Posted by: Peter Andrease

Posted on: July 10, 2012 4:16 pm

-

Last week I talked you through the benefits of using Less.css in your next web project. If you missed part one click here to read it first. I’ll be rounding up the tutorial with info on “Nested Rules” and “Functions & Operations.”

Nested Rules
Nested rules allow you to specify child selectors to keep your stylesheet smaller and easy to navigate. It also forces you to keep your stylesheet much more organised. See below how it works:

Functions & Operations
With Functions and operations you can add and subtract numbers in your stylesheet. It’s complicated but can save you a lot of time and dramatically reduce the size of your less stylesheet. This just touches on what’s possible with functions and operations in the less css. See below:

As you can see less.css is a very useful css language and a lot of people are using it now. After a small learning curve you’ll find yourself using it often, it saves time and makes your css much more easy to go through when re-visiting.

Posted by: Peter Andrease

Posted on: June 13, 2012 8:14 am

-
  1. Open up photoshop. The latest edition is CS6 but most of the points in this tutorial will work back to CS4. When picking your document size I usually design in 960px width, so I’ll usually create it at 960 setup guides for the edges of the page and then add extra padding to either side, maybe an extra 100px each side.
  2. Set up your guides if you haven’t already. There’s an action I like that creates a 960 grid in multiples of 12, 16 and 24. You can find it here. It does help speed up the whole process.
  3. Now you’ve got your canvas, you’re ready to start designing. Hopefully you’ve got some idea of what you or the client wants. It’s a good to have content, branding, images and a spec before you start. I usually sketch out a wireframe of the site I’m going to design first and refer back to it while I’m working in photoshop. Pencil and paper is much faster for jotting down new ideas and designs so it’s good to have one to hand.
  4. I’ve got into the habit of picking my fonts first and I think it’s good to be in that habit. As you’re designing for the web you need to make sure you’re using web safe fonts, check my article here. There’s some great alternatives to Arial and Georgia so don’t feel like you’re stuck with these.
  5. Next I’ll probably pick my colour pallete. My favourite place for this is kuler. Its simply brilliant for colour matching. If you’ve got a colour already then kuler will match it or if you’re looking for a new colour pallete then there’s literally thousands to choose from.

Posted by: Ben Austin

Posted on: May 25, 2012 3:37 pm

-

The internet is a dynamic domain, a lot of SEO companies and SEO consultants know that there are changes happening in the world of search, one example of such change are the constant algorithm update by the different search engine companies. These constant updates are geared towards improving the search engine results page it is because of this that search engine optimisation strategies must also change or adapt to the changing algorithm. However, it is not only the algorithm that is being constantly upgraded, there are other internet technologies that are also being improved, like the improvements done on a web browser, you might have already noticed that there are several updates made available for your web browser several versions have already overwritten the previous or original installed version. In order to conform with the changing times, the W3C also have incorporated its own change specifically in the lingua franca of the internet, the Hypertext Markup Language. The new version of HTML is now in version 5, from its simple beginnings HTML evolved to be the standard language for the web and this language has gone several changes or updates already and now it is in version 5. Tying up all these changes the question is can HTML 5 have an effect in search engine optimisation?

The Possible Effects of HTML5 with SEO

Of course many SEO companies and SEO consultants would like to know if there would be effects in terms of ranking if HTML 5 is used. The answer is yes and these are the following:

1. HTML 5 has its own Flash-like animation capabilities without actually using Flash, which means that the animations embedded using HTML5 will be crawlable by the search engine spiders unlike when a website is built entirely out of Flash.

2. HTML 5 was designed with mobile devices in mind, thus HTML5 makes it’s the language of choice when developing websites for all platforms which means that if you are trying to capture both your desktop and mobile audience HTML 5 is the way to go.

3. Content category is easily identified using the article and section element, now you can highlight your article in every page which makes it easier for web crawlers navigate through your website and making it easier for search engine spiders to gather data about your website, provided proper link building and content development is applied.

4. Search engines can easily identify your footer and header because of the fact that HTML5 resembles PHP like codes which means that footer and header could be properly defined.

5. Highlight your navigation by using the nav element. The nav element makes your navigation bar or collection of links to be easily seen by the search engine spiders, thus if the navigation bars are easily seen by the search engine spiders can easily navigate your site.

6. The structure of HTML 5 is similar to XML thus the website created through HTML5 is SEO friendly.

Conclusion

Since HTML 5 is going to be geared as the standard language of choice for website development it follows that search engine algorithms will also put emphasis on the SEO-friendly features of the Hyperlink Markup Language version 5.

 

Posted by: Peter Andrease

Posted on: May 25, 2012 2:17 pm

-

Open Flash and on Layer 1 create or insert your desired image. Now right click on Layer 1 and select ‘Insert Layer’. Right click on the new layer and select Mask. This will now lock both the layers to show the mask effect, simply click on both the padlock icons in the layer to unlock them again.

You can now add the object you want to mask or show on the area of your image. For instance, if you have a square on Layer 1 and add a circle object above the square on the mask layer then you will see the circle shape over the square image.

The object you use for the mat needs to be a shape or broken apart object, imported images or movies for instance cannot become masks.

If you want to create a more exact mask, then use the Pen Tool to select around an object or create a new shape. You can even open Illustrator and create a shape there then simply drag or copy and paste into your scene.

Once you have your mask created you can now animate it the way you like. So for instance, if I wanted the circle to move across my square I would go to say Frame 25 and select Insert Frame on both layers. Now on my Mask Layer, at Frame 25, right click and select ‘Insert Keyframe’, now select anywhere within frame 0 – 25 and select ‘Create Motion Tween’.

Now simply select Frame 1 and ensure the circle is on the far left of the page, then go to Frame 25 and ensure the circle is on the far right of the page and test your movie.

Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Posted by: Peter Andrease

Posted on: May 15, 2012 4:22 pm

-

Media queries have appeared in web development quite recently and are a brilliant way of making a site looks good across all devices. Whether the site is being viewed on a television, desktop, computer, tablet or telephone it will dynamically change to be best suited to the screen size.

The difference between a phone which can be only 320px wide and a large monitor which could be 2000 pixels wide is huge and paying attention to this will enhance the user experience.

Most of the big sites use responsive web design and media queries to specify the width across the different devices. Websites like Amazon are accessed on phones and tablets daily and thus it is essential for them to be able to provide a mobile friendly version.

Media queries will add development to your scope but for a little extra time, it can make a lot of difference.

So to add media queries to a site you’ll need to add them at the end of the stylesheet so it overrides all the other styles specifically for each device.

So what would you use it for?

  • Change a 3 column site into 1 column for a mobile screen.
  • Loading higher resolution images for bigger screens
  • Line-height and font sizes.

So if you’re ready to add it put this html in the head section of the site.

This will make the site be zoomed into 100% rather than it fitting the whole page to the screen.

The next code snippet is a good grounding to get started your different screen resolutions. Add it to the end of your css sheet and start coding!

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 550px) {}
@media screen and (max-width: 400px) {}

768px x 1024px is the resolution of an ipad
320px x 480px is the usual resolution of android and iphones (portrait and landscape)

A great place to check to see how the site looks is here.

Some examples I like, make sure you resize the window to see the media queries take effect:

Authors
Categories
Archives
Blogroll