CSS Positioning is becoming an absolute must in the “new web”.  With Jquery animations and complex designs becoming more and more popular it’s a necessity to master this CSS property.

Elements are positioned using 4 directional properties.. top, left, right and bottom.  They each work differently according to the set positioning type.

There are three basic properties to getting positioning to work, and we’ll talk about each.

• Choose the right type of Position of the Situation
• The Coordinates (top, left, right, bottom)
• The z-index to overlap elements (optional)

Choose the right type of Position of the Situation

There are 4 types of positioning, lets break them down.

Position: static is the default position type to all CSS elements.   The Static elements are always positioned according to normal float and margin properties of CSS.

Position: fixed is when an element is positioned relative to the entire browser window.  These types of elements will not move even when the browser window is scrolled horizontally and vertically.

Example: http://www.digimantra.com/

#fixed_div {
position:fixed;
top:150px;
left:0;
}

Position: relative is pretty self-explanatory, its relative to its current position.  Relative positioning is commonly used to set a new coordinate origin for an element.  Example, if you were to add left:10px and top:10px to an element, that element would then move up and to the left 10px but still preserving the empty space of 10px on the bottom and right.  This allows you to overlap elements for a more complex design.    Relative positioning is also used to set the base position of its absolutely positioned child elements, we’ll get to that later.

Position: absolute is pretty useless on its own, but a element with absolute positioning can be placed anywhere on the canvas within an X and Y coordinate.   By default each element has a base position of 0,0 in the top left corner of your browser view port (html).  The positioned absolute element will be removed from the normal flow of the document completely and all white space will be removed with it, unlike its “cousin” relative positioning.

The Coordinates (top, left, right, bottom)

Pretty easy here, the coordinates are the X and Y position on the canvas.  You can specify them from the CSS properties top, left, right or bottom.   All by default will be set to 0.  Relative will be the X and Y “relative” to its current position.  Absolute will be the X and Y according to its relative positioned parent.  Fixed will be the X and Y according to the Browsers view port.  And finally Static does not take X and Y coordinates, they will be ignored all together.

The z-index to overlap elements (optional)

Complex designs sometimes all for elements to overlap, sometimes referred to as layers by designers (in reference to the layers commonly used in the Abobe application Photoshop).  Think of the Z-Index property like stacking layers of paper.  You have 10 pieces of paper on top of each other, if you were to give each one a z-index the top would be 9 and the very bottom 0 and each piece a sequential number in between.    This is pretty easy to grasp, but the only issue you’ll run into is with Internet Explorer.    Unlike more modern browser that treats each element as its own “z-index parent” where you can place and element inside a #header div over an element in a #content div effortlessly, IE is a little stricter when it comes to indexing.  So best practice is to make the parent element have a higher z-index than the element you are trying to overlap.  You won’t find much documentation on this bug, but definitely one I’ve ran into from time to time, especially when working with CSS drop down menus.

So how’s this all come together?  How do I decrease my build time?

I’m glad you asked.  This is where everything clicked for me in web design.  Combining relative positioned elements with absolute positioned elements is the quickest and most efficient way to lay out static areas.    By static areas I don’t mean non-PHP areas,  I mean areas on a website with a fixed height that doesn’t change with content such as headers, footers, and for the purpose of this example a constrained fixed layout.

You can see by setting the container DIV to position relative I’ve now set a new origin for the inner absolutely positioned elements.  I think the diagram speaks for itself.  All the inner children of the relatively positioned parent now move and overlap each other within that contained area.   Have questions or comments?  Please ask!

On average, sites built in WordPress will rank better on Google.   Its rare that a CMS comes fully functional for SEO, and WordPress has been doing it for years.  “Out-of-the-Box” WordPress comes with the ability to change linking structures, title tags, keywords, descriptions, and the linking structure automatically detects duplicate page names in order to prevent Google from indexing sites twice!    On top of the default functionality, plug-ins like “All in One SEO” make per page optimization a breeze!

9. The Blogging Software is top of the line

Hands down, no questions asked, WordPress has been and will continue to be the best blogging application out there.  The simplistic nature of the interface with complex functionality makes WordPress easy to pick up and learn but also doesn’t skip out on impressive functionality like Images in posts, Recent Posts, Recent Comments, Top talked about posts, and the list goes on!  If you’re an avid  blogger or trying to write blogs for SEO there is literally no excuse to not be using the WordPress platform.

8.  Its Free

The saying “Nothing in Life Comes Free” is definitely disproved with the existence of WordPress.  WordPress literally cost nothing, and with a skilled web designer you could buy a premium template and have a custom website up in literally a day.  We at Round Robin do it for as little as $400!   A prepared client could have their up in as little as a day or two!

7. Matt Mullenweg and the WordPress Community

Normally if you were to change a huge chunk of a website or any CMS you’d have to hire a professional programmer to spend countless hours and potentially thousands of your dollars to add some functionality to the site such as calendars, related pages, Accordions, Lightboxes, or anything of that nature.    WordPress is backed by the industry, and that means you have 10s of thousands of developers at your hands for free in most cases. Matt Mullenweg, the founder and owner of WordPress, has made WordPress open source and free to everyone.  That means people are constantly updating and expanding the WordPress platform.  There are literally millions of plugins that add different functionality to WordPress.    Most are free and some of the premium plugins cost as little as $40.

6. Its Simple as Pie, and just as tasty!

I started using WordPress years ago because of its simplicity.  I can literally ask the client “Do you know how to use Microsoft Office?” and if their response is anything short of “not at all”,  i know they’ll be just fine using WordPress.  WordPress was made to be basic just like any other simple publishing tool.  The similarities of WordPress and Microsoft Office are countless, and because of its great planning and years of experience, anything that isn’t familiar will quickly become that due to its great Interface Design and usability.   I fell in love with WordPress from day one as a designer/developer and its just as captivating for the user and average blogger.

5. 110% Customizable

Literally everything in WordPress can be customized and put in the control of the user.  With the release of the long anticipated WordPress 3.0 it is now truly the best CMS ever made.  The new Custom Post Types let you add multi-editable regions to each page.  Now you’re no longer restricted to one content area.   That combined with the widgets, that have been the anchor of WordPress for years, there is absolutely no reason that anything isn’t possible with WordPress in this day and age.

4. You can’t beat its Security

With Millions of WordPress blogs and sites online today you can imagine that Security is of top concern for the WordPress team.  You can rest assure that your data and website will be completely safe with WordPress.  If you keep up to date with WordPress and keep it in order, it’ll take care of you.  As it is true that no website is 100% secure, WordPress has always and will always make Security its top priority.

3. Multiple Sites, One Database, One installation

Also with the release of WordPress 3.0 you can install multiple sites on one installation of WordPress.  You can edit every site you own from one central location.  This has been around for a few years, but up until now it was a little tricky.  The WordPress team really over did themselves on this release, its truly a master piece.   Right before the release of 3.0 I sat down with Mark Jaquith, WordPress’s Lead Developer and he explained to me that Combining WordPress MU (Multi-Site) and WordPress was the teams top priority and they spent countless man hours to get it perfect, and believe me it is.

2. Its Social.  WordPress has lots of Friends.

In the age of Social Networking getting the word out about your business has never been easier.  WordPress syncs pretty effortlessly with all social networking accounts.    It has a plugin to auto-post all blogs to Facebook, Digg, Twitter, or whatever else you need.  And if your Network isn’t supported every WordPress installation automatically has an RSS feed that most Social Networking sites will except.

1. The Pros Use it, And We Recommend It Heavily

If Lebron James told you that his Nike’s were the best shoe on earth and they made him play better, jump higher, and run faster you’d probably listen to him.   With over 15 Million WordPress Sites in existence (Over 1%, that’s a lot in the web world) it is the most used CMS system out there.   Its quickly making people forget what Joomla is, and people are reconsidering Drupal everyday.

Check out some WordPress site’s we’ve built lately…

Tossed.com
cash4iPhones.com
EpicBootCamp.com Fitness Blog

With more blogs than every going up on a daily basis bloggers now need to consider a better way to make their information stand apart from the rest. In the year 2010, in the age of digital media were the average human has the attention plan for a 5 year old, the easiest way to spruce up a blog post and grab someones attention is images. Videos would be even better, but for today we’ll focus on images.

An image can enhance the blog in a number of ways ranging from providing a visual point of interest, grabbing attention, or simply to draw the readers eyes down to the first few lines to get them reading. Never underestimate the power of visuals whether it be on the web or in a simple PowerPoint presentation for your office. In this day and age, specially people of my generation, we have been over stimulated and bombarded with flashy advertising and gimmicks our entire lives so plain text just doesn’t cut it.

Below is the few simple steps to the easiest way to include images into a post…

Access to your functions.php file of your theme

Open up your theme’s function.php file and add this script.  This script will give you the ability to post both the latest image as a developer and a shortcode as a user.

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment
               &post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '
 
<div class="postimage">'.$fullimage.'</div>
 
 
';
}
add_shortcode("postimage", "sc_postimage");

Display the image, as a user

To display an image on the back-end system of wordpress its pretty simple.   The code above has created a shortcode for the user to place.   Simple place the following code where you want it to show up on the visual editor.

[postimage]

Display the image, as a developer

Displaying an image in a pre-defined spot on the template as a developer is just as easy. Simple place this snip-it of code anywhere in the theme’s template you wish the latest image to show.

 echo sc_postimage($atts, $content = null);

Customize the code

By default this code displays the image in whatever size you have WordPress set as “thumbnail”. You can change the size to large and medium by changing the variable “size” in the array below.

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));

Questions?

Feel Free to Comment, I’ll get back to you!

iPhone Mecca will sell all of the refurbished iPhones they have as well as the latest accessories from the worlds most reputable iPhone accessory manufacturers.  The site will showcase accessories ranging from cases to speakers and everything in between!

The site will be built using the e-commerce solution Magento.  This custom designed ecommerce site will be developed in valid XHTML/CSS and is expected to rollout over the next few months!  Check back later for its launch date!

I say eventually because let’s face it no matter how much we’d love to have an Industry Standard browser community it won’t happen anytime soon.  Even with the recent preview of Internet Explorer 9, it seems like Microsoft is coming around to play with the rest of us. Internet Explorer 9’s release will most likely put Microsoft back in the web browser game.   According to the preview, it will surpass Firefox in a lot of ways.

The plain fact is percentages and statistics of the web users.   15% of the world still uses IE6, an 8 year old product of Microsoft which does not support HTML5 and CSS3.   On top of that we’re forgetting the rest of the people that will take years to upgrade their browsers from IE7 and IE8.

There are three HUGE browsers that make up over 50% of the users in the world that do not support HTML5 and CSS3.  Until the percentage of users still using CSS2 and HTML4 enabled browsers lessens, I don’t see HTML5 or CSS3 becoming a web design standard until at least 2013 if not later.

Prediction…  I think we’re going to see a lot more JavaScript being used to degrade HTML5/CSS3 websites into something viewable for IE6-8.   You see this currently in the industry with the PNGFix for IE6 and countless other IE6 hacks that are slowly not being used anymore as more and more website developers refuse to support an 8 year old browser.

In short, I personally am not investing all my time into learning the new HTML5 and CSS3 technologies simply because it’s not needed yet.  I’ll step up my HTML5/CSS3 knowledge when I can safely use it for all my users.

Although on the flip side almost all major internet companies are backing the new HTML5 which is a first for our industry… Steve Jobs (Apple) and Google have been publicly endorsing HTML5 for months.

Light CMS by Element Fusion, LLC

http://www.speaklight.com

Content Organization…

This website does an extraordinary job at organizing its content in a appealing and stimulating manner. The homepage uses a common, but successful block by block layout, multiple features that are called out in blocks.

Pricing Page…

This pricing page is a great example of very well designed webage.  It’s simple but invigorating.   You understand what you are getting with your product.   All too often when it comes to selling a product a lot of companies like to say entirely too much, example IBM’s website.  IBM is one of the world’s largest computer distributors, and fails terrible when it comes to their online presence.  Their website is unorganized, poorly designed, and it’s hard to pretty much find any specific item.

Call to Action…

When you visit this site your immediate user response is to watch that video, and sign up.   The orange is a high contrast color that makes you immediately see that button first.  This wasn’t done on accident, Element Fusion knows exactly what the object of this site is and exactly how to get users to do what they want.

A large part of web design project is not only making the website look pretty, but through understanding how users act and surf the web you can actually make someone more likely to go to one section of the website based on position, design, and content rather than another.  This is a PERFECT example of website usability in the works.

Even when you leave the homepage, those call to action buttons remain at the very top in plain sight.

Synopsis

This professional website design is one of the best examples online of how you can turn what some may view as a simple web design, into one complex marketing tool.  This website has been so well though that I cannot find one thing to improve on.  I see reason behind every button placement, behind every color, and every block of content.  I give it 5 Stars in my book.

…And There Was One

I was born and raised in a small town in Northern Pennsylvania.  I never really understood what the internet was until I was 14ish.  I heard kids talk about it on the playground but my family didn’t own a PC until I was out of grade school.   My first PC during middle school; I specially remember it was a Gateway with 7MB of HD space…  SEVEN!

I immediately got into HTML 3 and was building table based sites.  I was actively involved in the early blogging communities which eventually lead to me learning HTML.   During high school I was enrolled in a Technical school to learn Computer Science.   I dabbled in some COBOL, C++, Visual Basic, and Java stuff but kept my sole interest in the web.  Even at an early age I understood how profitable the internet was, and knew the importance of what it would become in the following years.

The Quest

In 2004, my quest to become a web designer had begun.  I took what little knowledge I had of the industry and the world and drove 3hrs south to Pittsburgh, Pennsylvania.    I attended one of the countries only and best web design schools, the Art Institute of Pittsburgh at the time.   6 years ago a web design degree was relatively unheard of.  Most people were graphic designers that became web designers, which is a whole separate issue and plagues the web design community.

For 2 years I studied, did the college thing, but through personal anguish was forced to leave Pennsylvania.  I continued my studies in Fort Lauderdale, FL, and that is where my talent actually began to flourish…

The Rise

For 2 more years I learned everything I possibly could about the web.  Here is a short list of what I dabbled in…

Alas I settled with Standards development.   Standards, is an industry term to basically describe website front-end development, CSS/XHTML/and JavaScript.  These languages make up the visual aspect of a website.  Some would argue the most important.

I graduated school and now work full-time at PaperStreet Web Design, a primarily lawyer niched web design company, as well as here at Round Robin.

Now with over 7 years of learning and loving all things web design related (Almost half the time the UI based web has been around – 15 years) and with 4 years of professional experience working with actual clients,  I am proud to say that I have reached a professional level I am happy with.  I have risen at the young age of 23, and have no plans of stopping.

Recap

• 7 years learning web design
• 4 years working professionally
• 2 years as lead website standards developer
• Over 50 projects completed.

The Future

I am a firm believer in your life being what you make it.   So my plans you ask?  I want to continue to grow and develop with the web, that’s for sure.   With the introduction of the new HTML5 and CSS3 languages, a lot of possibilities will open and there is a lot more to learn.

The possibility of moving back to Pennsylvania is always evident.  Philadelphia?

And of course being more active in the web design community.  Maybe get my name out there?

The new site not only has a modern design but is using the latest web technologies, JavaScript libraries, and web standards.  This new site is W3C validated, has a cool animated sorting Portfolio and showcases a stunning blog.

Over the past year I’ve struggled with conveying what RoundRobin means to me.  I started off w/ an illustrated Robin, and have now ended up with an entire new branding scheme.   So what does RoundRobin mean?  Although there are multiple meanings lets define it in the way that makes the most sense…

Round-Robin: Describes  a document authored by numerous individuals as a group (as found in a petition).

I like to think of RoundRobin as community of individuals that make this company.  Although I personally handle much of the design and development in the company, I often find myself reaching out to others in the website industry for advice, inspiration or even help on some projects.  I have a close network of 3D artists, SEO specialists, and Advanced Flash/Actionscript Gurus that keep this company doing cutting-edge website development and internet marketing.

Every successful project is a collaboration between designers, developers, and of course clients! All projects here are in a Round-Robin style, every website development project is a community involvement.

Thank you everyone for this years success!  Shout-outs to Jacob Right from Epic BootCamp, Tiffany Tobol from Web Chique Marketing, Zack Ensign from Zen-Sign Interactive, and all the people at PaperStreet Web Design.  Here’s to another good year in Web Design!