Scraps

Responsive tip

Reusing the same CSS classes in a responsive design can be real pain, especially when labeling the classes with a descriptive name e.g. .gridview20percent

My method is to use specific classes for desktop and mobile/tablet view. This way we can assign a div in a grid view with 2 classes, desktop-span{n} and mobile-span{n}. For example, a grid layout could have 3 columns at 33% on desktop view, we assign the class .desktop-span33 to each div. On the mobile however we want to create 2 columns at 50%, followed by 1 column at 100%. This is easy to do now with our mobile specific classes. So we assign .mobile-span50 to our first 2 divs and then mobile-span100 to our last div. So now we have 2 separate layouts with very little code in our HTML.

If you want to create more than 2 breakpoints in your CSS you could always create a third class tablet-span or similar. If you wanted to hide some content on your smaller mobile view then use .mobile-span0 and .desktop-span0 on your larger view.

2013-02-18

#rwd, #responsive, #web design,

Really nice! Loving the colour scheme! http://mitchwd.com/

mobi1canobi:

http://dribbble.com/shots/884637-mitchwd-com/attachments/95783

2013-02-11

Sublime! Visit Site ⬏

For coding I’ve been using Notepad++ (Windows) and Coda (Mac OS) for some time now, today I’ve discovered Sublime Text 2 (and I know 3 is in Beta) and it’s fantastic! The UI is spot on, minimap is a great idea plus I like split editing, with HTML in one pane and CSS in the other. There seems to be lots of cool shortcuts and tricks to make life easier. +1 for Sublime!

2013-02-04

#web design, #tool,

Site of the Week: WhitePage

Visit Site

This is a promo site for a new project collaboration tool. Check out the Dribbble shots for a sneek peek of the tool’s clean design. I’m interested in the seeing it in action.

#whitepage, #web design, #tool,

Site of the Week - Snowbird

This site has been on the web for awhile but I am setting it as my Site of the Week. It was developed by the excellent http://rallyinteractive.com/

http://www.snowbird.com

2013-01-30

#site of the week, #rally,

Flexible Foundations by Trent Walton Visit Site ⬏

Trent Walton has an excellent blog post on responsive design and the importance of having a flexible foundation. He provides two examples of responsive design and demonstrates the bloated CSS that results from one method. I would advise like he does to go with option 2!

“the entire thing scales from one media query to the next with a single font size change. Everything subsequently utilizes a relative unit so it scales proportionally no matter what.”

2013-01-29

#rwd, #responsive, #trent walton, #design,

Site of the Week: LayerVault

The LayerVault site is super nice! The website is a promo for the LayerVault OS app which is a tool for delivering design iterations to your design team and clients. Nice design combined with slick & subtle animations make this my site of the week. Check it out…

https://layervault.com/

2013-01-25

#layervault, #web design, #site of the week,

Lick of paint!

Wow, I didn’t know Tumblr themes were so easy to code. This is my first attempt anyway so there’s bound to be issues somewhere. I’ve made it responsive, so should be cool on your smartphone device.

#paint job,

The Next Web - now responsive Visit Site ⬏

The Next Web team have done a fantastic job on their new website. Not only has it now got a clean, sharp design but it’s also responsive and looks excellent on my iPhone 3G.

2012-11-12

#TNW, #RWD,

Nice simple and clear UX

mobi1canobi: