Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints? What is the general guideline? I'm going to share my view on setting breakpoints.
Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox script with Prototype and script.aculo.us. It's smooth animation and sleek aesthetics were an instant hit in the web design community and it was used on a multitude of different projects.
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.
If you follow Web Designer Wall, then you have noticed the PSD2HTML banner ad on the sidebar. PSD2HTML is not only my long time supporter, but they are also one of the most recognized vendors in PSD slicing services. Today I'm happy to partner with PSD2HTML to give away PSD to HTML slicing services to you. We are giving away 5 prizes (worth $200 each). To win one of the prizes, leave a comment to this post. The giveaway ends on May 31, 2012.
Update: the contest is closed and the winners are: David, André, Andrew, Donna, and John.
Although WordPress has made it very easy to create a custom WordPress theme, but it still takes time to learn and build it. So I've created a Base theme based on the free Basic theme from Themify. I've stripped out the framework and the extra functions that you might not need. It includes only the basic styling, responsive design, custom menus, and widgetized sidebar. This Base theme is intended to let you build your custom themes using it as a foundation. The main goal is to save your time and simplify the work flow. It is great for non-coders and quick client works.
One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery.