8 Web Design Tricks That Will Knock Your Socks Off


Advertisements

When searching Google and browsing the Internet, you will see website designs from the latest and greatest cutting edge ideas down to the elementary ones. Here are a few tips and tricks to separate your page from the pack and to gain and maintain reader interest in your pages and keep them coming back.

User-Friendly Navigation: Three-Click Model

User-Friendly Navigation

User-Friendly Navigation

Image via Flickr by eirikso

Visitors to your page want to quickly be able to access information or they will leave to try the next page on the list, so create the navigation so any page can be accessed in three clicks or less.

Embed Elastic Videos

Embed Elastic Videos

Embed Elastic Videos

Image via Flickr by tetradtx

When embedding videos, design them to be elastic, so they will fit into the browser window whether your user is using an ultrabook, tablet or phone, the video embed will expand to the full width of the boundary.

Keep Objects Within Boundaries: Min-Max Width

Keep Objects Within Boundaries

Keep Objects Within Boundaries

Image via Flickr by “Caveman Chuck” Coker

This property allows you to set the max width of an object to keep it within any boundaries. You can design objects to be responsive and auto-size to the maximum width of the boundary.

Relative Values Make Your Website Flexible

Keep Objects Within Boundaries

Keep Objects Within Boundaries

Image via Flickr by danorth1

One way to design your website is by setting all the elements and boundaries to layout in a set pixel area, but the more visually appealing way is to set the layout relative to the screen size. Relative margins, relative font size and relative padding all look much more appealing when they are flexible relative to how the user is viewing your page. Also, think on lines of making your website mobile friendly. Though a smartphone like a Galaxy s3 features a bigger screen than regular smartphones, you would still not be able to get the full visual experience if you don’t think of mobile devices when you design.

 

Wrap Unbreaking Text to Avoid Breaking the Boundary

Wrap Unbreaking Text to Avoid Breaking the Boundary

Wrap Unbreaking Text to Avoid Breaking the Boundary

Image via Flickr by erika g.

If you have long web addresses or other text that does not break run past the boundaries of an object, use the word-wrap property to break the text into multiple lines and stay within the boundary.

Use a Seamless Image for a Seamless Background

Use a Seamless Image for a Seamless Background

Use a Seamless Image for a Seamless Background

Image via Flickr by webtreats

If you use a large image for the background of your page, chances are it will tile on many users’ monitors, so to get around this and to also minimize the size of your website, use a seamless image. These do not show borders or boundaries when they are tiled and make for a perfect singular background no matter how large or small the screen is. This will ensure that a user has the same experience playing games on a pc or notebook as they will have on a tablet.

Site Maps Are Integral to Your Site

Site Maps Are Integral to Your Site

Site Maps Are Integral to Your Site

Image via Flickr by Grapejuice Girl

Users want to quickly find information on your website and a site map is the quickest and easiest way for someone to see where they can find what they are looking for. It is also a great tool to have your pages show up on search engines.

Visual Depth Draws Viewers In

Visual Depth Draws Viewers In

Visual Depth Draws Viewers In

Image via Flickr by paul bica

Although very simple and common, adding depth to your pages is a nice touch that makes your pages more visually appealing. Adding drop shadows, ribbons that wrap around borders and perspective are a few ways to achieve this.

When designing your next page try adding a few of these tricks to take the design to the next level and keep your readers coming back for more.

Sources

http://www.webdevelopersnotes.com/tips/webdesign/index.php3

http://www.onextrapixel.com/2011/06/20/creating-depth-in-web-design-5-design-tricks/

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

schatman

schatman

Shaun Chatman is a well published author on many authority sites. He lives in Dunedin, FL, and spends his free time playing with his kids or reading up on the latest tech news and devices.
schatman
schatman
Advertisements