Among the many web applications online there are dozens that capture our attention every day. Then there are others that seem bizzare or strange until you get up close and find the value within. Web Standards Sherpa is an online tool for receiving critique and tips for best practices. You can submit any site for […]
W3C standards have created a beautiful ruleset for web developers to create ubiquitous behavior in website layouts. These rules are much more commonplace and have been adopted by professionals in every area. Unfortunately the one area that is somewhat lagging is browser support. Modern browsers have jumped onto the HTML5 and CSS3 bandwagon as it […]
This article will focus on some handy tools you can use for testing freshly-minted layouts. Modern standards of HTML5 and CSS3 have allowed for greater control over rendering and layout styles. But support for older browsers has been waning in recent years. As a developer you need to decide which browsers are worth supporting and how much effort you’ll put into debugging potential issues.
Detailed and customized input fields have been a great focus of modern web development. The jQuery library along with similar open source projects have provided a framework to build with. It has lead to numerous advances within the field of user interface design. Especially for customizing the typical “default” components in form elements.
In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields. This can provide a tremendous benefit on projects where you need a cleaner, updated interface. It is a fairly straightforward process and shouldn’t take more than 60 minutes to create. Take a peek at my live demo to see what we are making.
With a quick Google search you will find a ton of handy CSS2/CSS3 code snippets. But what about pre-built CSS web interfaces? There are some cool widgets and samples out there, but it can be difficult finding great high-quality releases. I think developers really treasure open source codes for the fact that it saves a lot of time putting together more complicated websites.
In this showcase gallery I have organized 34 outstanding and free CSS code snippets. All of these examples provide some type of website interface element such as forms, buttons, tables, switches, pagination, and other common items. Be sure to check out the gallery listing to get a better idea of what you may be able to use in your own website(s). All items are provided by CSSFlow which you can download for free and include on any number of projects.
Website layouts are not the most difficult part of coding a typical design. But unfortunately there are still not many standards set in stone for creating multiple column-based layouts. These are often put together through various CSS methods, but the most supported designs are using fluid width containers.
In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. Most common websites will utilize 2 or 3 columns at most, so that is what we’ll be focusing on. Along with these ideas you should feel comfortable trying out other CSS codes. There are new standards being written so frequently it can be difficult to gauge the best possible solution.
There are hundreds of brand new mobile responsive website layouts published every month. The trend has swept through the design world and taken web development to a new level. In the past we have written on some other amazing responsive websites and I want to use this gallery as another comparison.
I’ve put together 40 outstanding mobile responsive website screenshots from a widescreen monitor. All of these layouts will reposition based on the device’s window screen. You can accomplish this design style by using CSS3 media queries. Most of these layouts are perfect for inspiration as you can see how the different trends can fold together.
With many social applications the use of threaded comments has become a staple in functionality. Webmasters today are focusing much more on user experience rather than content generation, and because of this there has been a rise in custom animation effects.
Below I’ll be going over a guide to building your own custom jQuery threaded comments from scratch. For the ease of our tutorial we won’t be using any backend system to actually store the data anywhere. This means no MySQL databases or PHP calls to a server – all comments are added in-page and will be lost upon page refresh.