Michael-Li.com

Michael Li Picture
See my vision and experience my life as a young entrepreneur wtih ambition to learn and experience this wonderful world.
M.Li

Pure Adapt Site – Responsive Design

Filed in: CSS3,Design,Web Design,Web Development

Responsive design is picking up steam and it makes a lot of sense to me. Responsive design is designing a website to be flexible and adjust to the many, many devices and screen resolutions that are out there nowadays. From a pure efficiency point of view you don’t have to design a mobile site or app on top of your normal site now. Instead you have a site designed to respond to the size of your screen with a user friendly experience, which is done with some new CSS3 techniques. Now think about going to your website from a 1080p monitor to your iPhone with a continued user friendly experience without the problems a static website may pose with the change in resolution.

Check out the two Pure Adapt website screen shots below for examples of the same site in two different resolutions:

1440×900

Pure Adapt Responsive Design 1440x900

960×640

Pure Adapt Responsive Design 960x640

You can also just visit PureAdapt.com and see it in action by simply visiting the site and resizing your browser to see the site change on the fly.

How is this done? I’ll go through some of the key components to designing a responsive website below:

  • Percentages – Using percentages is the key to making a responsive design, because it keeps elements flexible. For example setting the width of a div to 90%, the actual width is different when your window is 1440px wide compared to 960px. The same div would be 1296px on the 1440px window and 864px on the 960px window. As the window size decreases this div will also decrease in size.
  • Images – To make an image fluid all you have to do is set the max-width to 100%. This works in most modern browsers where it recognizes the original size of the image and it won’t oversize it and distort it. Older versions of Internet Explorer unfortunately do not support max-width. The style to make all html images fluid is pretty straight forward:

    img{
    max-width: 100%;
    }

    For more information on fluid images see Unstoppable Robot Ninja’s Fluid Images post

  • Float – Floats are important in a responsive design because as the screen size goes down you’ll need to stack your elements on top of one another to keep a user friendly flow. If you had a set of elements floated left it should stack in order of your html, but you’ll probably have to use CSS Media Queries (more info below) to adjust margins and padding.
  • Media Queries – This new CSS3 technique is extremely helpful in keeping a user friendly interface as you decrease in screen size. It offers the ability to make specific adjustments based on your screen size which makes it a very powerful technique. It’s like using if statements on your style sheet for screen sizes, like if less than 800px div id=”nav” is 150px instead of 200px. Here are a couple examples of media queries:

    @media screen and (max-width: 800px){ /* Screen sizes less than 800px */

    #nav{
    width:150px;
    }

    }

    @media screen and (max-width: 1024px) and (min-width: 800px){ /* Screen sizes 801px – 1023px */

    #nav{
    width:200px;
    }

    }

Those are some of keys to creating a responsive design. To see responsive designs in action check out PureAdapt.com, SmashingMagazine.com, UnstoppableRobotNinja.com and Alistapart.com example site.

Now for more information on responsive design visit Smashing Magazine’s Responsive Web Design Guidelines and Tutorials and A list apart’s Responsive Web Design article.

03/20/2012 Comments (4)

New Pure Adapt Site Design – CSS3

Filed in: CSS3,Design,Web Design,Web Development

Web design has reached the next level with the recent releases of CSS3 and HTML 5, so in the redesign of the Pure Adapt website we worked in some new design styles and techniques. In this post I’m going to specifically go over CSS3 styling that we used in the new design.

CSS3 Transitions are effects that allow you to change the style of an element gradually to another style. This is a great new property that adds animation without having to use Javascript or Flash. We used this in our top navigation so when you hover over one of the navigation icons it gradually drops the name of the link. see CSS3 transition property tutorial

CSS3 Transitions

CSS3 Transitions

CSS3 Border Radius property lets you create rounded corners without having to use photo editing software to create rounded corners and piecing it together in HTML. We used this property throughout the entire site. see CSS3 border-radius property

CSS3 Border Radius

CSS3 Box Shadow property adds a shadow to elements like your div. We used this property right on homepage so when you hover over our featured sites there’s a light glow around the image. It’s not a shadow, but it’s done with the box-shadow property. see CSS3 box-shadow property

CSS3 Box-Shadow

CSS3 Media Queries have been around, but with CSS3 you have much more control. Now you can assign different style sheets depending on the screen resolution, which is extremely helpful with the amount of devices that websites are viewed from. This feature was put into good use helping us create a responsive designed website, so as the resolution changes it’ll adjust to a better viewable layout. There’s more to responsive design than just media queries but that’s for another post. see CSS3 media queries tutorial

Those are examples on how we used CSS3 in the redesign of the Pure Adapt site and that’s only small sample of all the great stuff the CSS3 has to offer. Visit PureAdapt.com to see the complete redesign. Also note that CSS3 doesn’t work across all browsers. Working properties may vary across browsers, but most modern browsers have adopted CSS3. For more details on CSS3 visit w3schools.com for CSS3 tutorials and much more, it’s great web design resource.

10/10/2011 Comments (3)

LockerPulse Chrome App & Backgrounds

Filed in: Apps,Design,Entrepreneur,Web Development

Exciting happenings at LockerPulse. The LockerPulse Chrome App recently launched with the Chrome Web Store opening. Credit to Adam for making the LockerPulse Chrome App happen and to be part of the Google Chrome Web Store launch. For more details on the LockerPulse App launch check out Adam’s post.This is just the beginning of LockerPulse and there’s lots more to come.

LockerPulse now also offers the ability to change your background or upload your own background for premium members. Give your LockerPulse aesthetic brilliance by customizing your background. Check out my Frank Gore background. Looks pretty dang sweet doesn’t it. This is a very simple way to customize your LockerPulse. Quick tip, you can easily find great backgrounds from your favorite teams official website.

For a free LockerPulse account follow my promo link. Don’t miss out it’s for a limited of time only.

My LockerPulse Background

My LockerPulse Background Frank Gore

12/11/2010 Comments (0)

Design of 24 Ways

Filed in: Design Inspiration,Web Design,Web Development

Design Inspiration

24 Ways To Impress Your Friends inspiration stems from it’s unique calendar styled navigational layout. The hover effects throughout the layout gives it an interactive feeling while layers and transparency effects add a level complexity. When you put all that together you get cool functional user experience.

The navigation stands out to me the most and makes me rethink the possibilities of a site navigation.

Not only is the design inspirational, the site is all about web design and development. Since 2005 the site has been featuring 24 posts about design and development from different writers during the holidays.

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

24 Ways to Impress Your Friends

The navigation makes the design and only posting during Christmas makes for a very creative unique website. Check the site out now at http://24ways.org/.

10/12/2010 Comments (0)

New Detailed Image Homepage

Filed in: E-Commerce,Web Design,Web Development

The new and improved Detailed Image homepage has arrived. It wasn’t too long ago since our last homepage design but after taking a few steps backwards in that design we started a new homepage to return to our roots as an ecommerce site with a design that is up to par with the rest of the site.

Old Detailed Image Homepage

Hover over the image below to see some of the key features in the design

New Detailed Image Homepage 1

Using the CSS image swap I posted about back in February you can hover over the above image to see some of the key design features we implemented. Some highlights of the new design include CSS3 @font-face and drop shadows which was nice because we had the opportunity to try CSS3. Ultimately the new design should convert better with the focus on selling products then content.

08/6/2010 Comments (0)

Icons Galore at IconFinder.com

Filed in: Web Design,Web Development

I found this fantastic icon library at IconFinder.com.  This is a very useful site for web designers like myself.  Targeting web designers and developers IconFinder provides an easy to use icon search engine with high quality icons.

Search includes auto-suggest.

IconFinder.com Screenshot 1

Easy to navigate results and you can filter by size and licenses. Both PNG and ICO formats are available as well.

IconFinder.com Screenshot 2

The site is wonderfully designed and it functions fantastically. The bottom line is it provides an efficient way to find high quality icons which is useful to almost any web designer. Another tool added to my web designer arsenal.

07/23/2010 Comments (4)

    Flickr Image Link

    X