May Roundup

Posted by: Alex on May 31, 2014

A monthly roundup at guwii, by Alex – I’ve got a lot of small tips and bits to compile that aren’t quite worthy of their own posts, so here we go.

Proper apostrophes and punctuation

Use proper punctuations and linguistic symbols. eg: “”‘’— instead of ""''- To use proper punctuation symbols on Mac use the following shortcuts:

Speech Marks: ALT + [ =
Speech Mark Close: ALT + Shift + [ =
Single quote open: ALT + ] =
Single quote close: ALT + Shift + ] =
Proper em-dash: ALT + Shift + - =

Cursor Control with Keyboard

Control cursor position with your mouse in text! Most people are pretty clued up on using the cursor keys instead of the mouse to control the cursor when editing text. However, you can go one step further and require even less hand movement, no need to move your hand all the way to the cursor keys if you get used to doing the following:

ctrl + b – back
ctrl + d – delete
ctrl + f – forward
ctrl + a – start of line
ctrl + e – end of line
ctrl + k – delete until end

Check emails and passwords

Check those details for rogue spaces at the end/beginning before sending login details to your clients, it will save a lot of confusion when they say the password doesn’t work!

Use placeholders on your inputs!

<input type="text" placeholder="Your example text here!">

Code Style Guide

This is the best code style guide I’ve come across, read it, follow it, and stick to it!

Photoshop Resizing

Don’t use the resize option in Photoshops save for web, especially for PNG’s. Use the standard image resize before getting to the save for web pop-up. You’ll notice a big quality difference!

Save Photoshop Crop to shortcut

The “trim” tool in Photoshop is great for cropping a transparent image down to the very smallest dimensions it can be. I suggest saving this to a keyboard shortcut as it’s such a useful tool!

Tab Order / Sequence for web forms

Try and remember to set taborders for inputs, it helps for more granular control over uses flow.

<input type="text" tabindex="1">
<input type="text" tabindex="2">

Sites Redesigned

Check out these cool sites that have been independently redesigned, some are a lot better than the original!

Good UI Tips

General tips for Good UI / UX

And don’t forget.

Write the code, change the world. 