Building a Custom Responsive Template for Your Website!

Responsive Design Website

As website design continues to evolve, a fantastic form of development has come into play. Responsive design is a method of developing a site that is completely flexible regardless of device. Rather than detecting a specific browser type or device type, the website automatically orientates itself based on the screen size of the device. A combination of reformatting and re-optimizing the site as a whole give a practical flexibility beyond imagination.

Responsive design, while more costly to develop, is the wisest development investment if you’re dealing with a consumer or audience-base that is active on mobile devices or need to make purchases on the go. Impulse purchases are obvious, but this is equally critical for commodity content such as blogs or news outlets.

Here is a great article showcasing some fantastic responsive design sites.

What About Small Business and Mobile Web?

Mobile browsing—from tablets to smartphones—is growing at an unprecedented rate. The consumer’s passion for immediate gratification of their informational needs requires effectively delivering your product (physical or intellectual) via the mobile web.

What about small business or a non-profit organization? Is mobile friendly good enough? Should an organization discuss a mobile optimized version? Will investing in a responsive design site bring a measurable return?

Excellent questions with answers only you can provide. Every situation will be different, but give serious thought of what percentage of your site visitors are on mobile devices? Google Analytics will tell you. What does your current site look like? Pull out your smart phone and find out.

If your eyes just flickered over to your smartphone and you don’t know the answer…. I guess you already know the answer.

Retina Ready 

Without getting too technical, basically it means that Retina display devices show more pixels per square inch, resulting in sharper images. A device pixel is the smallest physical unit in a display; there are also different types of pixels, bitmap, CSS etc.

WHY SHOULD YOU BECOME RETINA READY?

When we look at our screens, sometimes we can see the individual pixels. Try taking a look at something like a CSS rounded corner or a really blurry image that’s being blown up. You can see the little tiny squares or dots that are trying to make up the element. Pixels are extremely small, but to a trained eye, like a designer’s, we can just sort of tell. We know when we see pixelation and we know when images and elements are just straight up ugly. 

The problem wasn’t a huge deal until things like responsive design and the need to fit one thing into several browser sizes came along. Before, you just dealt with it because your browser, whichever you were on, was going to show exactly what you asked it to show. Now with responsive design and the workings of tablets and other devices, I can pinch an image to make it smaller or double tap my screen to increase the size of the page.

On websites that are not retina ready, pages will look awfully pixelated and blurry in their normal state as well as when page sizes are increased. Retina ready websites, along with the devices, allow you to see more pixels per square inch. Therefore, your trained eye sees a very smooth, high quality image or element and no distortion. Becoming retina ready is done with some CSS and Javascript. However, for images, they are created at least double the size that they’ll be shown online.

BENEFITS OF RETINA READY WEBSITES

1. Sharper images: As we’ve already talked about, the entire idea of the retina ready technology is to give us sharper images. The idea behind retina ready is to create something that would look as sharp as it would in print. Colors are vivid and bright because you get more pixels per inch on retina ready devices. It’s essentially like high definition for your laptop, phone or tablet. 

2. Better aesthetics for responsive: Again, we’ve touched on the idea that you get better picture quality. What some may not know is that creating retina ready website allows for sharper fonts. When we sometimes zoom into webpages on websites, we end up stretching out some fonts that aren’t able to be stretched. Many of these fonts aren’t to be used in such a way and give us the same pixeled look we may get from some images.

Retina ready websites help smooth over fonts. There are also some fonts that are prepared for retina ready sites and will maintain their image quality when zoomed in (or even out) on retina devices.

3. Designing with even more detail: I believe minimalism has become widely popular because it’s a simple concept to understand and design for. The idea is to remain as clean as possible and rid yourself of the fluff. Every so often, there are subtle details thrown into these types of themes, as well as others that are sometimes hard to see on regular screens. Retina devices are not only helpful in their high quality image projection but also in the brightness of their screen.

4. 30 million people think your site is ugly: Your web site is suffering right this minute if you are not retina ready. Over 30 million users have purchased these Apple devices that have this sharper screen feature. When they view your site, images are pixelated, fonts are tough to read and overall there’s probably a bad aesthetic. If you know your audience is probably the same audience that has these devices, it may be time to go ahead and prepare your site to become retina ready.

TUTORIALS AND RESOURCES

Retina.js

Retina.js is a JavaScript script that checks your server to see if you have high resolution pictures available on your website. For example, if you originally have picture.jpg available, to make it retina ready, they will look for that picture that you uploaded that’s twice the size, and should be named accordingly. This takes care of much of the issue with high-res pictures.