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

LockerPulse is Bigger, Faster, Stronger

Filed in: Design,HTML5,LockerPulse,Responsive Design

In the end of May we launched a revamped LockerPulse with a fresh new look and a bunch of improvements. New features and improvements include better fantasy player tracking, video highlights, additional soccer coverage, improved site speed, and the list continues. You can visit the LockerPulse Product Blog for the complete list of improvements and features.

LockerPulse Homepage - More Sports. Less Time.

On the design side of things we also implemented HTML5 and responsive design to take advantage of the most up to date techniques to build the new and improved LockerPulse. We ran into new and unique obstacles on our way to the final design, but in the end we came out with a fully responsive design that works across all devices with a modern browser. For details how we used HTML5 and responsive design please see Making HTML5 and Responsive Design Work for Web Apps Like LockerPulse post that goes through everything in in depth details. For more information you can also check out my post about HTML5 and responsive design when we redesigned the Pure Adapt site.

Adam also guest posted on the popular design site SpeckyBoy.com explaining “Why We Chose HTML5 Over Native Apps“.

I personally think responsive design is the bomb diggity because it just makes sense to be able to build one site that works across different devices. Like the HTML5 slogan says “I’ve seen the FUTURE It’s in my BROWSER”. They even have t-shirts for it and Adam and I both have one.

HTML5 t-shirts

Go check out the new LockerPulse for yourself and feel the power!

07/20/2012 Comments (0)

Facebook Timeline Changes Profile Image Size

Filed in: Design,Facebook

While I was on the Detailed Image Facebook page I noticed that our profile image was larger and it didn’t align with our cover image anymore. Yep, Facebook made a change to the profile image size and I confirmed the changes with a quick Google search when I found this post “Facebook Timeline Profile image size changes to 160x160px“.

This is the quote from Facebook:

On April 26, we will be updating the size of the profile picture on all Pages. We are letting you know about this small change in advance so that you can update your profile picture on April 26. The new profile picture will be 160 x 160 pixels and will sit at 23 pixels from the left and 210 pixels from the top of the Page.

Facebook’s timeline profile image has gone to a larger 160x160px from 125x125px. The change will have the biggest effect on those who designed their profile image to align with their cover photo, it can throw things off quite a bit. I took a before and after screen shot to show what the larger profile image did to our cover photo.

Facebook Profile Image Size Change

It’s not really evident at first but you can see part of our tag line was covered up by the larger profile image and the profile image background didn’t align with our cover photo any more. The change was a minor effect to us, but I’m sure there are some pages where the effects were much more dramatic.

If you’re looking for a Facebook profile image/cover photo design template the post to I linked to above has a downloadable version.

I fixed our profile image/cover photo already, but this is just one small example of the ever-changing web environment that we have to constantly keep up with and be flexible to adapt to. To add to this point we also recently found out that the API we were using for LockerPulse is going to be discontinue and Adam is already on top of that working on a solution. Pure Adapt being a small flexible company has surely become one of our top competitive advantages.

04/28/2012 Comments (0)

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 – HTML5

Filed in: Design,HTML5,Web Design

HTML5 Logo

In a previous post I wrote about the CSS3 we used in the new Pure Adapt site and now I want to post about new HTML5 elements we used.

The HTML5 elements that we used are relatively easy to understand since they were in a way already being used. For example instead of naming to containing div id=”footer” HTML5 now has a dedicated tag for the footer. Simple as that. Here are the new elements we used in the redesign.

<header> – For an introduction of a document or section, could include navigation

<nav> – For a section of navigation

<section> – For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<footer> – For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

Definitions via w3schools.com

The elements we used are pretty straight forward, but HTML5 has much more exciting new elements to offer like the <video> tag where a link to the source can add a video to your webpage without embedding video code. Now for more information on HTML5 please visit one of my go-to sites for development, w3schools.com.

I’ve talked about the CSS3 and HTML5 that we used in the redesign, but there’s one more post about the design of Pure Adapt site featuring responsive design techniques coming. New Pure Adapt Site Design – Responsive Design post is coming soon.

11/16/2011 Comments (1)

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)

New Pure Adapt Site and Job Offering

Filed in: Design,Design Inspiration,Entrepreneur

Pure Adapt has a newly redesigned website and it’s first official job offering. It’s an exciting time as we embark in our search for the next Pure Adapt employee.

Redesign
The Pure Adapt website has never really come into play for our business, but with a new job offering our site needed a revamp to present to our potential candidates. With the recent release of HTML5 and CSS3 we had to push these new standards and features into our redesign.  Another thing that is relatively new that we incorporated into our design was a responsive design that adjusts accordingly to your screen size.  Try it out yourself, go to PureAdapt.com and resize your browser screen and watch how the site changes. Coming soon I will have more detailed posts about HTML5, CSS3, and responsive design techniques used in the website redesign. Overall everything came out fantastic as the sum of the parts from each one of the owners came together to build a better and complete Pure Adapt website.

2011 Pure Adapt Site Design

Job Offering
Now to the job that we’re offering. This will be one of Pure Adapt’s most important hires. He or she will be number five and I’ve always said this is our most important hire. The position that we are offering is the Sales, Marketing, and Customer Support Specialist for DetailedImage.com. This hire is going to be vital to our company as Detailed Image is growing beyond what our current staff can handle. We offer a great opportunity to work with an up and coming company with benefits and flexibility. If you’re in the Upstate New York area and interested check out career page at PureAdapt.com/careers/ for more details.

Again these are exciting times as we grow and continue to hit new levels every day. Stay tuned for more about the redesign of PureAdapt.com.

09/26/2011 Comments (0)

    Flickr Image Link

    X