Northland Capital
A decent redesign here, got a little whacky with a lot of changes, but still pretty solid.
- Responsive – Boilerplate-ish
- Concrete5 – Composer, Global Blocks
- Cycle2
- Composer style News, Home Slider, Inventory
- Inventory w/Designer Gallery + FancyBox2 galleries
- Some custom forms (Online Payments, Payment Calculator)
- Twitter feed with Twitter API and some js for display
Change Layout Based on Height
Change layout based on height
@media only screen and (max-height: 600px) {
// something awesome here
}
Change a layout based on width or height
@media only screen and (max-width: 1060px), screen and (max-height: 600px) {
// something awesome here
}
Change a layout based on width and height
@media only screen and (max-width: 1060px) screen and (max-height: 600px) {
// something awesome here
}
SVG Best Practices; Optimization
The best way to use SVG today, mostly taken from here: http://css-tricks.com/using-svg/
As an image
<img src="kiwi.svg" alt="Kiwi standing on oval">
Add Modernizr trick for browser support
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}
As a background image
<a href="/" class="logo"> Kiwi Corp </a>
.logo {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(kiwi.svg);
background-size: 100px 82px;
}
Fallback for background image
.main-header {
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
.no-svg .main-header {
background-image: url(logo.png);
}
Best way is to use SVG code inline and optimized
SVG Optimizer
Base64 Converter
This video runs through it all
WHIRC launch
Ridiculously simple redesign. They pretty much wanted to move their old junky site out of Joomla and into c5. They allowed for a very simple reskin, but overall wanted the same layout. The client likes black with a hint of red, and we integrated a couple of their marketing pieces into their slideshow. I did the slideshow a bit differently, down and dirty, as they are just image blocks. In the admin I styled it to be a bit more manageable as opposed to having them full size. Otherwise this was a really, really simple redo. Not much whirc at all. Get it? Brought to us by Agency 128.
http://www.whirc.com/
Burlington Associates
http://burlingtonassociates.com/
So apparently if you deal with a subject like community land trusts you need the website to keep your attention. These guys wanted a fun, out-of-the-box type of solution that involved horizontal scrolling mixed in with this lithograph art style one of the partners is interested in. Oh and they wanted it to be c5’d and reasonably mobile capable.
While it wasn’t built to be mobile first (I could see some sort of optimization down the road maybe), some things needed to be addressed for touch. For one, they wanted scrolling div/iframe type areas on the main home page spread. I tried a whole mess of things and ended up with this DW Scroll Plugin (http://www.dyn-web.com/code/scroll/). I only have the one license, but I think it may be worth getting the developer license for it. It is nicer to customize I think than jsscroll and actually works pretty well in both screen and touch environments.
It does all sorts of jQuery resizing, sidescrolling, hashchange, cycle, fancybox, embedded pdf zaniness too. HTML5 Boilerplate, CSS3 Trannies, Google webfonts, and probably some other things I’m missing. Kind of a weird, but kind of cool site.
Recent Comments