Tuesday, January 1, 2013

8 ways to responsive design

With all of the hype surrounding responsive design it's easy to be caught up in the frenzy. One thing is for certain, there are many ways to accomplish the same technique. Here is what I find works the best.

  1. Don’t reinvent the wheel – Responsive design has been around for a while. There are many tutorials and blogs explaining the entire process, but more importantly, you can pay under $50 and download a template.


  2. The grid – Great responsive design revolves around a grid inside a container. So, whether it’s 9, 12 or 16, understand the grid and how it works.

  3. .container .one.columns { width: 40px; }
    .container .two.columns { width: 100px; }
    .container .three.columns { width: 160px; }
    .container .four.columns { width: 220px; }

  4. Adaptive design – The best responsive design uses an adaptive format that will perfectly re-scale the entire page when it starts to fall outside of the browser.

  5. Adaptive Design: images re-scale to fit

    Responsive Design: images fall below to fit

  6. Media queries – Well written CSS inside of media queries can turn a responsive design into an adaptive design and make your site ‘pixel-perfect’ on every screen.

  7. @media only screen and (max-width: 479px) {
    .text {
    padding-left:10px;
    }
    .text h2 {
    font-size:14px;
    line-height:18px;
    }
    .text p {
    font-size:11px;
    line-height:15px;
    }
    }

  8. Design for everything – Some say first design for mobile, others say for desktops. Honestly, it doesn't matter as long as it looks and works well in all mediums.


  9. Typography matters – With the CSS3 @fontface and media queries, it is easier than ever to bring magazine style typography to life in any browser.

  10. @font-face {
    font-family: "Segoe UI Light";
    src: url("SegoeUI-Light.eot");
    src: local("☺"),
    url("SegoeUI-Light.woff") format("woff"),
    url("SegoeUI-Light.ttf") format("truetype"),
    url("SegoeUI-Light.svg#SegoeUI-Light") format("svg");
    }

  11. Know your limits – By understanding your audience, you can better assess how to minimize your limitations. Do you need your mobile pages to load extremely fast or have a high quality image cover 1400 pixels…or both?


  12. Be progressive – As you begin to code more and more designs be sure to look back at your past work and see how much you have improved.


Sunday, December 30, 2012

UX Design Process

In newer mediums like user experience design there is always room to improve the process. Here is one I have been perfecting for 5+ years.


1. New project

a. Gain insight of user needs & motivations

b. Review similar projects & design ideas

c. Understand functionality & purpose


2. Sitemap

a. Organize the information



3. Sketches & wireframes

a. Create b/w sketches centered on the layout

b. Focus on the index & inner pages



4. Mockups

a. Create color comps centered on imagery

b. Focus on the index & inner pages



5. Prototypes

a. Describe the functionality & usability

b. Focus on the index & inner pages



6. Compile content

a. Write out the content into a word document

a. Assign content to pages based on the sitemap



7. Front-end development

a. Initialize build out into HTML CSS & Jquery

b. Add the content to each page



8. Back-end development

a. Provide the prototypes for direction

b. Supply the front-end development



9. Usability testing

a. Investigate usability issues

b. Work with developers to resolve problems