As we launch newer projects, it is easy to forget about updating older blogs and websites. In this article I want to present 30 solid ideas you can quickly implement to make your website just that much more user-friendly. Not all of them are based solely on front-end design. I will also discuss popular HTML5 coding techniques which can help web parsers and spiders to categorize your data appropriately.

Not every website will need to be updated, and not with every technique available in this post. These ideas are here to get developers thinking in terms of design and how to make websites look prettier. It’s now easier than ever before to build scalable responsive website layouts which look good on any digital screen, so let’s get to down to sprucing up our sites.

1. UX Testing

I am guilty of not always running tests on my website launches, but whenever possible this is one of my favorite activities. You can learn so much about typical user interactions by studying how they play with your website. User experience studies may be conducted solely through tools like Google Analytics, or using other 3rd party resources.

The potential benefits you can find are enormous. User experience testing is helpful for web developers to learn which areas of their website are annoying, broken, or could be improved. Consider using not only digital tools but also your friends and colleagues. Listening to some real human feedback on your website may provide results you couldn’t get through a computer screen.

Read Also: Useful Web Usability Testing Tools

2. Whitespace

We can think of whitespace as the amount of room between elements in your page. Some users will not mind a cramped layout if they are already accustomed to this. But consider your target audience, and consider how many of them are not as computer literate as the younger generation.

You may determine areas which need extra spacing through split A/B Tests and retaining user feedback. Or just wing it and see what you can come up with!

Also Read: 100+ Clean, Simple and Minimalist Website Designs

3. Web Fonts

Dynamic web fonts allow designers to build webpages without being restricted to the typical font families. This trend has become increasingly popular now that most average Internet users are on a decent DSL/T1/Fiber-Optic connection. Including references to 3rd party font stylesheets will no longer produce major lag in your DL speeds.

Quite possibly the best provider of fonts is through Google Webfonts. You can access the application even if you do not have a Google Account, although there are perks to registering. The full setup process takes only 3 steps and you can have custom Google fonts running on your website within minutes.

4. CSS3 Shadows

When I’m talking about using shadows to improve your layout I am actually referencing two distinct properties. The ever popular box-shadow is really cool for divs and boxes within your layout. Appending this effect onto your container, wrapper, or inner page boxes will provide a slimming 3-D effect to your webpage.

Also Read: 10 Creative Techniques Using CSS3 Box Shadow

But it is also worth considering the CSS3 text-shadow property for typography which jumps off the page. Apple is one of the first companies to heavily implement text shadows all around their layout. You can build a daunting effect by adding text shadows which are opposite the color of your fonts (white shadows for dark text, black shadows for light text).

5. Textures & Repeating Patterns

There are plenty of websites which can get by just using standard color schemes. But to have your website really stand out from the crowd you may consider adding textures and repeating tiles into your background. One of the coolest free webapps is Noise Texture Generator which can run on any browser.

Just choose the BG color and amount of noise you want to use, then this app will create a tiled background image dynamically. If you’re looking for patterns and tiles then I would recommend Subtle Patterns. They have a huge collection of usable textures which you can download for free.

6. CSS3 Gradient Backgrounds

While we’re discussing backgrounds I should bring up the ever-popular CSS3 gradients. These provide web developers with an enormous benefit keeping them out of Adobe Photoshop for web backgrounds. And these gradients can work on more than just the body, applied onto navigation bars and footers and other important areas in your layout.

Recommended Reading: CSS3 Linear, Circular, Elliptical and Repeating Gradients

7. Boostrap

Twitter’s Bootstrap is quite possibly the greatest frontend UI framework for web developers. This includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects. The most common use for Bootstrap is within landing pages for new applications.

But open source developers also utilize Bootstrap when building demo pages for the libraries, plugins, or mini scripts they publish.

I feel that Bootstrap has grown to such a massive extent that it may be applied into any website these days. However developers who find the greatest benefit are using Bootstrap as a quick replacement for rolling out their own UI designs. Consider this frontend library the next time you are launching a webpage with a single concrete purpose: landing page, product demo, mobile app website, etc.

Related:

• Getting Started with Twitter Bootstrap
• Bootstrap 201: Modal Window Plugin

8. HTML5 Kickstart

Most web developers have yet to hear about HTML5 Kickstart created by 99Lime. This is another frontend UI library which focuses more on nice design aesthetics than common HTML5 layouts. But there are code samples for generating both in spades. You can choose from sets of predetermined elements like gradient buttons and dropdown menus. I wouldn’t say this has the same popularity as Bootstrap, but then again what does?

If you have the time and patience I would recommend just giving this library a quick test run. Build a small sandbox layout and see if you enjoy the default feeling off each UI element. Kickstart is certainly not for every project, but it can be a major time-saver when caught in a bind.

9. jQuery UI

Animations and sliders and fading elements are usually running off the jQuery library. This is the most common open source JavaScript library for frontend developers, but it also has a companion library jQuery UI. Developers overlook this, thinking it cannot provide very much in return for the extra KB.

But including the UI library means you can update the easing call for any dynamic page animations. This means you may customize the jQuery animation type for any dropdown menus, fading items, scrolling slideshows, and everything else dynamic.

The jQueryUI website has an easing demo page where you can test out the many variations and see if you like any specific animation types.

Related:

• How to Style jQuery UI Accordion
• Volume Controller with jQuery UI Slider
• Customizing and Theming jQuery UI Datepicker
• Drag and Drop with jQuery UI Sortable

10. Extravagant BG Photos

There are countless websites nowadays which have utilized the fullscreen background image effect. If you can find a high-resolution photo sample which would look good as a background image, then this technique may be worth adding into your layout. Large backgrounds do an excellent job of catching your user’s attention while also implying the genre of your website.

If you’re looking for a quick solution check out the jQuery Backstretch plugin. This only requires a single line of code for your new backgrounds to scale properly and responsively using any resolution. But for developers who are against JavaScript methods I recommend the CSS3 fullpage image technique posted on CSS-Tricks.

11. Menu Icons

To draw more attention from visitors it may be worthwhile to include a small icon set in your webpage. Standard menu links are often enough to function properly and help users navigate between pages. However I am often impressed to see customized icons designed for each menu link. You can find tons of free icon sets which would look perfect in your top navigation, sidebar, or footer area.

12. Updated Color Scheme

I do not actually mean changing your overall color scheme design, but more like appending new colors into it. After running the same layout for months after months it is nice to update smaller areas and catch repeat visitors by surprise. Some items of interest may include anchor links, headers, backgrounds, and toolbars. Consider using online tools such as Color Scheme Designer to improve your trajectory.

Recommended Reading: Basics Behind Color Theory for Web Designer

13. Enhanced Browser Support

It is difficult to build a website which is fully supported by all the major legacy browsers. Although very few people are running Internet Explorer 6 it still shows up in a few of my Google Analytics reports. Developers who are looking for ideas may consider doing a small trial of browser tests.

The more important mainstream browsers include the latest release of IE9, Mozilla Firefox, Opera, Chrome, Safari, and possibly Camino/SeaMonkey. But Internet Explorer 6-8 are also still widely used among businesses and older computer labs. You may run quick rendering tests using the IETester software. Similarly IE8 has a developers tool mode where you can switch into older rendering engines for debugging.

14. Fitted Typography

You may find that your old layouts are still utilizing text styles efficiently, but this isn’t always the case. I feel that large typography will fit into layouts a lot easier. Not to mention it is easier to read and will take up more space on larger screen resolutions.

The idea of "fitted typography" is styling text so that it fits snug in your website. You can go through a few pages and update these styles in 10-15 minutes.

Recommended Reading: Showcase of Web Designs with Beautiful Typography

15. Social Media Sharing

By now I am sure most developers are familiar with the sharing badges used in popular social networking websites. Facebook, Twitter, Reddit, Pinterest, Dzone, and many other external networks provide codes you can embed into your website. Then visitors may share your link onto these networks without needing to leave your website.

On some blogs or web magazines you’ll notice these badges will follow you scrolling down the page. This is an excellent technique since you can often have them hovering just outside the body area where they are not blocking any important content. I also recommend browsing our post on social media toolbars which can have a similar effect.

16. User Discussion

If you are running a CMS like WordPress or Drupal then you have the ability to include comment forms by default. However when creating static webpages you would need to setup your own database system to mimic this functionality. But with the rise in open source technology developers may now implement better solutions such as Disqus.

Using this method you are not constantly dealing with cleaning up spam and junk from the discussion area. Users who do not already have a Disqus account may quickly connect using popular social networking profiles, or signup right from your page. Even WordPress users who are sick of Akismet may switch using the Disqus Comment System plugin.

Recommended Reading: Top 3rd Party Commenting Systems – Reviewed

17. Widen the Footer Area

Most smaller website layouts will be very conservative with the bottom footer section. This may include some basic copyright info and a few main page links. But modern web design trends support the idea of big footers with lots of meta links.

These are commonly seen in startups and big company websites with lots of additional information. Certainly don’t try forcing this into a layout where it doesn’t belong, however it is worth some contemplation if opening up a bigger footer area may improve your website experience.

18. Responsify Images

Dynamic fluid and responsive webpage images have become a trend in themselves. It’s now almost ludicrous to still have your images set at fixed widths, breaking out of the container wrapper as windows are resized. The most common technique is to apply width: 100% using CSS on all img elements.

But you may also consider some other open source methods which may prove useful in a bind. ResponsiveImg is one such jQuery plugin with a very small file size. Just include this into your page and run the single-line code targeting all images on the page. This is an excellent addition to mobile layouts which are still using desktop-based content.

19. Menu Accessibility

I wouldn’t say this is something you should constantly be trying to update in your layouts but it is something that developers and designers do not get right the first time around. I feel it is worth looking back at your navigation systems and brainstorming if there are any better ways to implement sub-menu links.

Sidebars and content areas will often hold accordion menus since there is enough room vertically. But think about horizontal navigation bars with dropdown menus or sliding sub-menus. As long as your menu links are quick and easy to access, there shouldn’t be any problems among your userbase.

Recommended Reading: Coding A Graceful Breadcrumb Navigation Menu In CSS3

20. Semantic Microformats/Microdata

Microformats and the newer Microdata specification are used to extend metadata inside your HTML code. These attributes provide extra information about your content and how it relates to other content on the page. And ultimately these results help Google determine your website’s rank for individual keywords, and within other engines such as Image and Video search.

The most notably supported documented version of Microdata is called Schema.org. Their website provides all the information you will need to go back and edit your HTML content with semantic schema markup. This Schema syntax is backed and supported by all the major search engines, and will likely evolve into the future of semantic metadata design.

21. Rearranging Nav Links

For some websites, running on fixed content navigation may not be a real problem. But I have found in some larger business websites or portfolios that certain navigation links are given too much precedence. And similarly there are some items which can rarely be found! Take the time to browse your website and behave as if you were any other visitor.

Consider which links you are most interested in, and possibly any links which you’d like to see added. These may include a brief history of your website, information about the team, contact details, privacy concerns, press releases, etc. It may also help to gather user feedback and see if there are correlations between their wishes and demand for new or updated pages.

22. Back to Top Link

If your website publishes very long pages of content then this is a must-have element in your layout. The scrolling Back to Top links can be found almost everywhere these days. Users don’t think to hit the Home key and it can be annoying scrolling all the way back up. The best location for this link is floating alongside your container, or seated right in the footer as we have implemented on Hongkiat.

23. Customize code/pre Tags

When first creating a website stylesheet many developers will overlook the typical page elements. Headers and paragraphs are very common, but what about pre tags or inline code tags? These are used to encapsulate preformatted source code syntax like you would see in a text/NFO file. Some websites have no need for these elements, but it is still considered good practice to have them styled just in case.

24. Adding Image Width/Height Attributes

Now this task could easily take a while, depending on how many images you would have to go through. But if you find images in your website without a defined width/height it may be worth updating them.

Typically images lacking these attributes will display as a 1×1 px square before loading in full. This will cause your webpages and scrollbar to jump as new images are loaded. Again this won’t be helpful for everybody, but it is worth noting as a quick fixer in some cases. And there are still CSS techniques for responsive images using fixed attributes.

25. JavaScript Notifications

Any developer who has worked in JavaScript knows about the typical dialog boxes. You can setup an alert box which offers the user an OK button, just displaying information. But there are also confirmation alerts with yes/no buttons along with the prompt box which asks for user input.

All of these may be customized using alertify.js. This is a very small open source library for designing your own frontend alert boxes. It is very quick to setup and easy to customize if you need to match your own CSS styles.

26. Responsive Media Queries

This may not seem like a quick bit of code to add, however it really doesn’t take much time at all. Responsive queries can be added into your existing stylesheet or added into a new responsive.css document. Either way you can quickly setup recurring styles to handle various display sizes from monitors, tablets, and smartphones.

Responsive queries do not always need to fully responsify your layout. Sometimes these may just hide bits of content, such as your elongated sidebar or larger footer. You could then display a fully responsive mini footer which is originally hidden in the desktop layout. You can learn more about media queries in our collection of responsive web tutorials.

27. Affiliate Links

There will always be similar websites online building content related to your field. There are very rarely new ideas being created; most of them are offshoots and parodies from existing content. But instead of turning the web into a competition why not create a friendly atmosphere? If you have the extra space in your layout send out a few e-mails to related websites in your niche (search Google) asking to affiliate.

You can exchange links and help bring each other traffic. This opens doors for new users to find your website a lot quicker, and to see that you are included within the community of other websites as well. Plus gaining backlinks from websites with authority in Google can only help your domain’s credibility.

28. Icon-Based Fonts

Recently I was reading an article on 24ways which discussed icon fonts and data attributes. This got me thinking about the future of web design and how HTML/CSS has dramatically affected frontend coding. Icon-based fonts are perfect for a number of reasons including navigation menus, ordered/unordered lists, and even basic page content.

Many of these fonts can be quickly added into your website using @font-face. This means you don’t need to rely on a 3rd party service like Typekit for hosting your fonts. It also means a more semantic design style rather than just using PNG icons.

29. Image Box Shadows

If you want to keep visitors on your page longer then you need to offer some real quality content. This may already be the case for your website, however if your styles are bland then people will look elsewhere. Atmosphere and aesthetics are huge in good web design.

I recommend building a quick image class which wraps a border around your page images. This may include a small box shadow along with borders and padding, too. Anything to help your images jump off the screen and stand out in the paragraphs of text.

Recommended Reading: 10 Creative Techniques Using CSS3 Box Shadow

30. Alternate Stylesheets

Consider all the various media styles you have to include when building a single website layout. This would have to look good on desktop monitors, laptops, tablets and possibly even smartphones. And don’t forget projection and print media, which is not always supported.

If you have a large audience who uses these obscure types of media, I recommend styling your own alternate stylesheets. These can be labeled based on the media type such as print.css, or added into your existing stylesheets. If there is enough demand then your visitors will be eternally grateful. And it honestly doesn’t take a whole lot of time to edit your default website layout for common printers.

Final Thoughts

Creative designers and especially frontend web developers will hopefully find some useful techniques among this list. Most of these ideas shouldn’t take more than 1-2 hours to implement, while many can be be accomplished in as little as 15-30 minutes.

Reevaluating your website layouts and updating with new trends from time-to-time is often a good idea especially with newer releases of CSS3 properties which allow native browser shadows, animations, and rounded corners. This is an excellent collection of ideas worth a glance if you are in need of some quick updates.

Additionally if you have questions or ideas about the article feel free to share with us in the post discussion area.

iOS and Android are two distinct mobile operating systems. Those who like to play with new operating systems and customize their phone rather than let the phone manufacturer call all the shots may prefer Android. Those who prefer a more stable, simpler and user-friendly mobile OS may prefer iOS.

(Image Source: waresupplier.com)

If you were an Android user and is now switching to iOS instead, this is the post for you. Here are 10 questions that you might think of asking and the quick answers to those concerns. If you are new to the world of smartphones and you want to try iOS first, you might also be able to learn a new thing or two here.

Recommended Reading: Apple’s IOS6: 9 New Features You Should Know

Here are the quick links to each section:

1. Syncing Mail, Contacts, Calendars
2. Transferring Existing Photos to iPhone
3. Sharing Photos/Files With Android Users
4. Backup & Restore iPhone Data
5. Syncing Browser Bookmarks
6. iPhone Security – Finding Missing iDevice
7. Customize Ringtones
8. Battery Life – What You need To Know
9. Cables & Connectivity
10. Troubleshooting & More

1. Syncing Mail, Contacts, Calendars

Android is hassle free with it came with syncing mail, contacts and calendars as it was managed with a Google account. It is similar to the iPhone as all you have to do is log in to your Google Account twice through a few settings. Read all about how to do it here.

2. Transferring Existing Photos to iPhone

Transferring any sort of media to your Android device was as easy as transferring something to a portable flash drive, however with the iPhone it is slightly more challenging as you have to download and install iTunes to sync music and pictures.

The first step of transferring your Android pictures, videos and music files to your iPhone would be to transfer them to your desktop PC via USB cable or wireless with an app like AirDroid.

Once it’s there, you’ll have to launch iTunes to transfer all of it to your iPhone.

Using the new iTunes 11 is not that hard; syncing music is merely a drag-and-drop action of songs from your iTunes library on your computer to your device.

As for pictures, you’ll have to click on your device on iTunes and select the Photos tab. Check ‘Sync Photos from’ and select the folder with all the pictures you want synced to your device. You can choose to select the entire folder of pictures with subfolders or just select a few subfolders.

3. Sharing Photos/Files With Android Users

The iPhone is not friendly with other mobile platforms, so sharing email attachments, photos or music files can be a pain. The best way to do it is to use Bump.

Bump allows you to share contacts, email attachments, photos, videos and even music files. It also works cross-platform which means you can share files with Android users if they have the Android version of Bump.

4. Backup & Restore iPhone Data

The good thing about the iPhone is that with iTunes, you can securely backup your iPhone data to your computer and to iCloud. We suggest you backup with both methods and with our complete guide, you can do it properly without hassle.

5. Syncing Browser Bookmarks

On any iDevice, our number one choice for web browsing would be Google Chrome as it has much more features than the pre-installed Safari.

Good news is, if you use Google Chrome on your desktop and previous Android device, all your bookmarks and history will be synced to Google Chrome on your iPhone as well. It will automatically sync once you’ve signed in with your Gmail account.

6. iPhone Security – Finding Missing iDevice

When you first set up your iDevice, there is the option to enable the Find My iPhone app by Apple. The app lets you locate your iDevice including your MacBook on a map, remotely lock your device, erase all data on it, or display a personalized message on the device.

Aside from this app, there are other apps you can download on your device that can help you find your missing iDevice.

7. Customize Ringtones

Using custom ringtones on the iPhone is not easy as you have to go through iTunes (again) and there is a unique ringtone file format that you have to use. Moreover, you cannot use custom notification sounds for individual apps unlike in Android. To customize your iPhone’s ringtone or SMS tone, check our previous article for complete instructions.

8. Battery Life – What You need To Know

If you’re coming from Android, chances are you could’ve used your device throughout your day with messaging, social networking, web surfing and occasional calls. However, you should know that the iPhone does not have the greatest battery life.

However, there are a few common ways to conserve battery power like disabling auto brightness and using a lower brightness setting, using less 3G and more Wi-Fi as 3G/LTE drains the battery really quickly and of course turning off Locations, Bluetooth and 3G/Wi-Fi when not in active use.

Settings for Wi-Fi, Bluetooth and Brightness can be found on the first page of Settings. As for 3G settings, it’s under Settings > General > Cellular.

9. Cables & Connectivity

If you previously own an Android device, getting the charging cable is as easy as going to any electronic store. The MicroUSB cable is used for digital cameras, cellphones and MP3 players, as by the top 14 mobile phone manufacturers in the world. But not Apple. You can only get the charging cable from Apple stores.

So, you’ll probably have to bring your Lightning cable around or buy an Apple Lightning cable converter to charge your iPhone 5 or iPad Mini (with help from older charging cables) or connect to previously owned 30-pin accessories.

There are also very few speaker docks from other manufacturers that support the Lightning cable since the old 30-pin connector supported every iDevice like the iPods, iPad and iPhone.

10. Troubleshooting & More

In this final section, we’ll cover basic but essential things to help you fully utilize and enjoy your iPhone.

How To Enable Lockscreen Security

Unlike Android’s many ways to unlock your phone, iOS has only 2 ways to secure your device. You might see more people using 4-digit passcodes because it’s easier to key in. But for added security, you can use a combination of letters, numbers, symbols and special characters as your lockscreen password.

Here’s how to enable it.

To enable lockscreen security, go to Settings and tap on General, then tap on Passcode Lock.

Now, determine if you want a 4-digit or a complicated combination of characters as your passcode. If you want a 4-digit passcode, then turn on Simple Passcode; if not, turn it off and tap on Turn Passcode On.

Set your passcode with the on-screen number pad or keyboard. Once you’ve keyed it in twice, your iPhone is secured with the Passcode.

You can then tweak the settings in ‘Require Passcode‘ whether you want the passcode to be entered every time the screen is unlocked or only after it has been locked for a preset amount of time, e.g. if you set it at 1 min, if you lock and unlock your phone under a minute, the phone will not ask for a passcode.

You can also choose to enable Erase Data which clears all the data from your device if there are more than 10 failed passcode tries (we advise against this if you have a child at home who has access to your phone).

How To Restart An Unresponsive iDevice

If you happen to download a poorly made app, which caused your iOS device to become unresponsive, you can do a force restart to make it work again. To do this, all you have to do is hold down the home and power button at the same time. Hold it until the Apple logo appears on screen then let go. Your device will start up.

How To Take Screenshots

Taking a screenshot on iDevices is easy. All you have to do is hold the power button on the top and quickly press the home button in the middle. Your screen will flash white confirming that you’ve taken the screenshot, which is saved into your Photos app.

Sharing Via Email

You can also send photos and videos in your phone via email but take note that the iPhone will lower the quality of your files so that the attachment is not too big. This is useful at times, for a speedier attachment, but if you want the photos of the best quality and resolution then take these steps.

Tap on Edit and select either one or more picture files. Now tap on Share and select Copy.

Then go to the Mail app. When you compose a new mail, select Paste on the body of the email. This way all the high resolution photos and videos will be attached. You can then add your usual text and send it away.

If you had fun playing the smartphone controlled, multiplayer game with Chrome Super Sync, you should check out this new 3D maze game also by Google Chrome! With some of Google’s advance wizardry in programming, they can turn your favourite website into a 3D maze where you navigate a ball to its goal. The best part is you control the ball with your smartphone or tablet, tilting it as a way to steer the ball.

The game also features really nice music and will take up a lot of your time because it’s (frustratingly) fun to play. Here’s how to start playing Google Chrome Maze.

Recommended Reading: 30 Inspiring WebGL (Chrome) Experiments

Syncing Your Smartphone

To begin, go to the Chrome Maze website with your desktop browser and click on the Start button.

It’ll then show you an intro sequence to get you familiar with how the game is played. Once the intro is over, you’ll have to select a method to connect your smartphone or tablet. One way would be to scan a QR code with an app on your mobile device which will redirect you to a website on your mobile web browser. However, the easiest way we found was to Type or email link.

It will provide you with a 6-digit code when you click on that option.

You then go to g.co/maze on the Chrome web browser on your mobile device to enter this 6-digit code and tap on Connect to sync it. Choose your stage (website) through your mobile device or your desktop browser. Tap on Play to select the website.

Tilt Controls On Chrome Maze

The game is simple, you have a time limit and 3 lives to navigate to the end of the maze while collecting points along the way.

You control the ball with your smartphone. So the first step is to ‘calibrate’ your smartphone. Do this by holding your smartphone in landscape mode while looking at your desktop browser.

You now have to tilt your phone to align the dots on the bottom left corner of your desktop browser.

Once it’s aligned, it will notify you saying this is your neutral position. Tilting your mobile device forward, will make the ball move forward and so forth.

You can now explore the entire maze and try to reach the end before your time or lives run out. Have fun!

Game Limitations

While running the game on a laptop, we could hear the laptop fans being turned up to very high speeds. This means that the game is using a lot of processing power due to the fact it’s creating this 3D graphics in real-time. So folks with older PC’s might have some ‘lag’ or graphic issues while playing the game. Apart from that, it’s just pure fun. Do share this fun game with all your friends to enjoy.