Innovating Email List Marketing
Fresh news from Marketfish.
Round vs. Square – Visually Pleasing Browsers and Users Alike
0 Comments | Posted by Jonathan in Get Schooled
April | 13 | 2010
TweetSexy websites and flexible applications come from a place of successful user experience design as well as creative & unique approaches to solving real problems with interface design. One of the problems specifically tied to interface design is that of beauty vs. functional weight. By weight I mean the megabytes of data needed to transfer from the originating server to your device in order to render the applications usefulness and beauty. Equilibrium is key when placing the disparate pieces in the balance to be weighed.
One way that you can accomplish both function and form is by utilizing CSS to style, color and position elements of your application or website. Some of the best known CSS masters, such as Dan Cederholm of Simplebits, know exactly how effective clean style can increase the usability and simple beauty of an application. More to the point instead of using images to round corners (IE6 – IE8 still need images to pull of rounded corners effectively) you can simply add a few lines to your CSS and define the size of the radius on your rounded corners.
Example A:
10px rounded corner box using the -moz & -webkit border-radius function
The Example CSS:
<style>
.exampleBox {
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#3F3F3F;
color:#FFFFFF;
display:block;
font-weight:bold;
height:20px;
margin:0 0 12px;
padding:20px;
width:540px;
}
</style>
The Example HTML:
<html>
<span class="exampleBox">10px rounded corner box using the -moz & -webkit border-radius function</span>
</html>
By allowing the HTML to do the work of rounding corners reduces the need for images and thus reducing the size of your application. With many more style enhancements coming in CSS3 designers can rest assured that beauty and function can and will live happily ever after…so long as you are not running on IE6 – IE8.
To make sure your browsing experience is optimal and beautiful download one of the following free browsers. That’s right, they won’t cost you a thing and they may even open your eyes to a whole new world of surfing(water not required).
BROWSERS (from left to right): Chrome, Firefox, Safari
For more on standards for web design, development & browser compatibilities:
