Mike Valstar

A New Design

Posted on October 16, 2012 - 12:57 PM

A lot has changed on the web in the 11 months I’ve had this particular revision of my website.

11 months ago, nobody cared about “retina” graphics for your website, only the iPhone 4 supported them and it was not a big deal, but now we have iPads with a resolution larger then my 27” monitor and new MacBook Pros with a massive 2880x1800 resolution.

The classic 960px grid format that was popular for several years has made way for the newer responsive versions that support 400px all the way up to 1200px or larger. Elastic designs that were popular 10 years ago are coming back due to CSS3 and HTML5.

The browser wars are back, Chrome is silently releasing a new version every 6 weeks, Firefox the same. Opera continues to chug along, and finally old versions of IE are being dropped by the majority of the web including Google (also IE8). This allows us as web programmers/designers to start supporting HTML5 features on our sites without having to provide backward compatible hacks.

Lastly, and who would have thought, Twitter would come out with one of the most widely used CSS frameworks ever; used by everyone when you need a quick and dirty site, all the way up to major websites. The creators have recently left the project, but with its popularity and where the 2 have moved to the project should continue going strong.

I decided to update the look/feel of my website to reflect these changes on the web, and this is my starting point. Here’s the tools I use and some other cool links:

Coding Tools

When I’m building a website I use a number of tools to help me through the process...

Coda

Coda is a great website tool, it provides me with everything I need as an editor and includes a bunch of tools that come in handy with many clients, especially the “publish” tool which allows you to keep track of your changes within the app and 1 button publish them. Its great for quick fixes on sites where all you have is FTP or SFTP access.

Node.js

Over the last year or 2 Node has become my preferred language for any new projects, or even as components of existing projects. It’s flexible, fast and the hosting options for Node are finally starting to become numerous and cheap.

MongoDB

Although my background is mostly in SQL based databases (mostly mySQL), I’ve been starting to delve more and more into key value storage engines like Mongo and have found them to be pretty reliable for smaller projects. I’m not 100% sure I would want to use it on larger projects just yet (mainly due to needed reporting), but I could definitely see it happening soon.

Design Tools

Pixelmator

Pixelmator has become my image editor of choice for the mac and at only $15 is absolutely amazing. Although photoshop is the standard for image editing, at $20 per month, it’s a little more then I want to spend on a tool I use perhaps 2 or 3 times a month.

LESS

I have moved to LESS for all of my CSS needs these days, it allows for far better commenting and structuring of my CSS files. The parser tool is native to Node and there are great tools for compiling if you don’t use Node.

CSSRefresh

A recent find for me but this tool is absolutely amazing when tweaking a design, no more refreshing the page constantly. Just drop in the code or use the bookmarklet and the page will auto refresh on css changes.

CSS/HTML / JS

Twitter Bootstrap

Twitter Bootstrap (soon to be Bootstrap only) is a great set of tools to get a website started, by no means should it be used for large production websites without heavy modification but it’s great for a blog or documentation website and absolutely amazing for company-internal websites. For my larger projects I usually use Bootstrap as a great reference for both LESS syntax reference and some great CSS techniques.

Font Awesome (and more)

Bootstrap is great and has spawned a large amount of add-on items, Font Awesome and Font Awesome More is one of them, it replaces the image map that bootstrap uses for icons and replaces them with a font that allows you to scale the images to any size... they look way better on hi-dpi (retina) displays over the images used by Bootstrap.

Retina Graphics JS

Retina graphics are large, not just a little bit larger but HUGE, they have by definition 4x more pixels, and this generally leads to a 3-4x increase in size on disk. As a web host if spending a couple dollars a month in bandwidth to provide a better experience to the user is what it takes, I’ll do it; But for users on 3G or on slower internet connections who don’t have retina displays serving them the high res images only degrades their experience. For this case I generally use some javascript and some custom attributes to serve up the proper images to each user. I have not implemented this on the current design yet, and plan to do so in a future update (one where I make a proper image uploader, see below)

Retina Graphics CSS

For this particular site I’m only using one CSS based background image (for now), and to add these all you need is a media query:

@media only screen and (-webkit-min-device-pixel-ratio: 2){}

Note: for the media query I’m using a pixel ratio of 2, some sites will recommend 1.5 for this variable to get some higher density android devices(and future windows devices)... however because a conversion to 0.75x of an image requires some interpolation I find this will cause the image to come out blurry in some cases depending on the device/browser/image combo. For these I plan on adding separate media queries as needed so that I can properly rescale the images with a more expensive conversion. (browsers opt for speed on image rescaling over quality to keep the user experience snappy)

Tablet / Phone Ready

The new design is mobile ready now using the Bootstrap responsive set. However the current set of images used on the site are not set to degrade properly for mobile and still use the large versions. I plan on remedying this when I build the Retina image replacement system below.

Additional Stuff

Disqus

for the comment system I’ve chosen to go with Disqus, it’s popular across the web now and allows me to skip the headache of SPAM protection and a login system for frequent commenters... I don’t think i need to say much more on that.

jQuery CDN

Wherever possible I’ll use a CDN for javascript libraries, especially jQuery. A CDN allows for many users to not have to re-download jQuery on every site they visit, and saves them to save 32kb (or about 0.1-0.5 seconds depending on connection).

Still Missing

Retina Image Replacement

Currently missing from the new design as noted above is Retina image replacement and phone image replacement. I intend to implement this soon, however at the same time I wanted to move the image hosting for the blog to Amazon S3, or possibly a similar service (anyone have recommendations?). Currently I just upload the images manually, and this is pretty tedious and will not be sustainable on my small VPS with limited storage space. I plan on making sure my solution does the following:

• Upload largest quality image possible
• Rescale to all needed sizes for blog
• Provide a gallery
• Replace images with @2x for retina displays
• Replace with low res for mobile
• Provide fallbacks for users that disable javascript or have custom/interesting user agent strings

The Design on Github

You can download all of my changes off Github here: https://github.com/mikevalstar/mikevalstarcom/zipball/Redesign2.0