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
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
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
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
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
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
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
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
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.