There many articles which explain how to choose responsive design breakpoints but most of them are are very lengthy and don’t offer a quick answer so I decided to give my take on this. You can also view a live project that’s using the breakpoints used in this article: http://level5ia.com/ios/mystery-room/us/home/
Now that CSS3 is widely supported in modern browsers, adding a professional touch to the websites is straight forward. I’ll use as an example a button link where we will add CSS3 effects as we progress.
Using latest CSS3 coding techniques such as Media Queries we are able to build websites that adapt based on users resolution.
If you already have experience in building navigation for websites, probably you already know that using floats for links gives you more flexibility for customization.
However, the down-side is that when the design requires, we cannot center the navigation automatically as you add more links. Of course, we can specify margin: auto for the ul element, but than, we need to assign the width, which is very inconvenient when, for example, we need to add an extra link and we need to adjust the ul width again.
In next posting, you will see that the solution is easy and you will find other situations where you can apply the same technique.
Maybe you have noticed that majority of the drop-down menus on the web, are aligned to the left of their containing parent. Using Jquery, we will position the dropdown in the middle of the parent, dynamically centered, no matter how long the parent’s link width gets. Since the dropdowns are positioned absolutely, the CSS margin: auto won’t help in our case.
In the following article, I will explain a method to make it easy for you or for your clients, to float multiple images left, in Wordpress.
The method is useful if you want to float images left, on sections such as team bio, where the member will have his/her image left and a bio text aside right.
The alternative, dirty way to do it, would be using tables, but the code is bulky, harder to maintain, page loads slower and definitely not the easiest way to do it. Read on for the good method.
The websites with a clean code are also easier to maintain, saving time to the developer and money to the client, that’s why I find extremely important to write the (X)HTML and CSS efficiently.
While there are more website layouts types: fixed-width, fluid (liquid), elastic, hybrid, it is important to choose the layout which suits best for the website target audience.
The most popular is fixed-width layout, which allows to take the design and preserve the appearance to the pixel, that’s why me and most coders out there choose it.