Tag: CSS

A Responsive AisleOne

Posted on Posted in DesignTagged , , , , , , 37 Comments

New year, new design. I’ve been wanting to redesign the site for a few months now with five goals in mind:

  • Strip it down and make it more minimal
  • Improve typography
  • Make it responsive
  • Allow for bigger images
  • Allow for non-image posts

This new design addresses all five.

Because I don’t have very much free time these days, I started with a purchased theme and modified it to my liking. Visually, I simplified it a great deal. Some might think it’s too minimal, maybe even boring, but I think it serves its purpose well. The typography is greatly improved. The entire site is set in Proxima Nova, which at larger sizes is a pleasure read. No more tiny type. The main text is now set at a large size with spacious leading to make reading easier.

Now that mobile devices are a large part of everyday life, I wanted the site to be responsive. Unlike the previous design, this new design presents an optimal viewing experience on a phone, tablet, and desktop browser.

It also allows for more flexibility in terms of post formats. The previous design I was constrained within a 450px column for the images, so it didn’t allow for larger images. With the new design I can post images up to 690px wide. Bigger images means more details. I also want to make more posts that are just text, for example quotes or this post. This single column design presents text only posts in a better way. Videos also work well, so expect to see more video posts in the future.

Overall, I’m pretty happy with this new design, and I think you will be as well. I’ve tested it as much as I could, but I’d love to hear from you folks on what you think and if you see any issues.

Enjoy.

1322px Grid

Posted on Posted in Design, Grid SystemsTagged , , , , , , , 16 Comments

1322-grid

Now that 1366 is quickly becoming the most popular screen width, a 1322px grid with 22px gutters is ideal because you can divide the space into 24, 20, 12, 10, 8, 6, 4 and 3 columns. This easily allows for the rule of thirds, and also leaves you with 22px margins on each side of the grid.

Seems like we’ve finally hit the point where we can work in a nice big canvas. Would be great to have a responsive CSS framework built around this configuration. Anyone up for the challenge?

Here’s a quick PSD I created with the columns.

Dino’s Pizza

Posted on Posted in Design, Grid SystemsTagged , , , , 17 Comments

Dinos pizza site

I recently just finished a simple site for my families pizzeria, Dino’s Pizza. It’s a one-pager that has a responsive layout, accommodating screen widths from 1280px all the down to an iPhone. Fluid site design is the way to go in my opinion, especially now that people are viewing sites on multiple devices. I used the 1140 CSS framework as the base for my code, and then tweaked it from there.

Overall, I’m happy with it. I wanted to do more with animation, but I really didn’t have the time.

Introducing LegiStyles™

Posted on Posted in Apple, Design, Technology, TypographyTagged , , , , , , , 8 Comments

legistyles.jpg

As some of you already know, I use NetNewsWire for all my feed reading duties. It’s an amazing desktop applications that offers a ton of great features including synchronization. One of the great advantages of using NNW is that you can use custom CSS styles on your feeds.

There are a bunch of styles out there that are good but they all kind of look the same and most of them don’t focus on typography and readability. I’m trying to fill this void with what I like to call LegiStyles™, a series of custom NNW styles I’ve created that focus on design and typography. Best of all they’re free.

As of now I have 4 styles available but I plan to add more over time. If you don’t use NNW, I highly recommend it. If you do, head over to the site and download a style or two.

I’ve setup an RSS feed as a way to keep informed on news and updates. For all you Twitter users, follow LegiStyles for updates and also reply with any feedback using @legistyles.

Enjoy.        

Grids In The Real World

Posted on Posted in Design, Grid Systems, TypographyTagged , , , , , , , , 22 Comments

age_grid3.jpg

It’s one thing to write about how useful and important grids are for a design, it’s another thing to utilize them in a real world project. I recently designed this site for my wife’s event company using a grid system that I’ve developed that also incorporates a baseline grid. It’s very similar to the grid in my Designing Grid Systems For Flash article, the only difference being the vertical height. The grid is 946 pixels wide to accommodate 1024×768 screen resolutions with baselines that are 10 pixels apart. Since this isn’t a Flash site, and vertical scrolling is acceptable, the height is taller for the pages with more content. Continue reading “Grids In The Real World” →