May Roundup
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.
Eg:
<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