Saturday, July 27, 2013

Business Benefits Of Responsive Design


As we all know by now, mobile is the new black, pink and whatever other color you can think of. Mobile is not going away anytime soon and it is increasingly becoming integrated into our lives. In fact, studies show that mobile web browsing will outpace traditional desktop browsing within 2-3 years. Some studies say even sooner.
For business owners and marketers, this shift can seem daunting as it ads in a huge layer of complexity and perceived cost. What approach do you take? Where do you start, and when?

The when part is really up to you, but for the how piece of the puzzle, I would look no further than Responsive Design.

Here are few reasons why you should consider updating your company site to utilize Responsive Design.

1. You Will Save Money

Before the practice of Responsive Design was widely adopted (it still isn’t, really), if companies wanted to have an optimal mobile experience of their website a separate set of templates or a device-specific app had to be designed and developed.

As you might guess, this can get quite costly. One site for iPhone, one site for iPad, another for Android etc. Then, what happens when a new device comes out? Make another website or app specific to that device? I’m guessing most business owners don’t want to spend that kind of cash just to keep up.

The beauty of Responsive Design is in the fact that it enables your site to fit perfectly in any screen size. One website, all devices. That means that your website only has to be developed once, significantly reducing the cost.

2. You Will Save Time

The fact that you can have the ability to design and build your site in one project will also free up your time. Less meetings, less approvals and less wondering if you’re just going to have to do this process all over again once a new device comes on the market.

3. You Can Beat Your Competition

Since Responsive Design is still in its infancy, there is a strong chance that your competition is not implementing it. Redesigning your website to fit optimally in all devices would take your competition by surprise. Visitors will get a much better experience on your site than on your competitors, and will likely take more action.

4. Your Site Will Be Relevant Longer

When adopting Responsive Design, your site will stand the test of time for longer. You wont be playing ‘catch up’ all the time. Your website will be future friendly, as they say.

5. Your Conversions Will Increase

When people visit your site, they are typically more likely to take action if they have a good experience. This means, giving them what they want with the least amount of ‘friction’. Using Responsive Design, you can greatly reduce the amount of friction involved and give your users a great experience—thus, increasing conversions.

6. You’ll Stress Less

All of the above reasons will help you sleep better at night knowing that your site is actually working at it’s optimal level on all devices. This will give you peace of mind when it comes to your online presence.

Tuesday, July 9, 2013

vertical-align: middle not working

I had three buttons in a single div with uncommon height. I was asked to vertical align the buttons to the middle of parent div. After long time of googling and putting my head into PC, I got the solution:

HTML
<div class="wrapper">
            <div class="block" style="border: solid 1px red;">The red box's height can be dynamic too ;)</div>
            <div class="block" style="border: solid 1px green;">The green box's height is dynamic<br>fdfd</div>
            <div class="block" style="border: solid 1px green;">The green box's height is dynamic</div>
        </div>

CSS
.wrapper {
                border: 2px solid #007EFD;
                display: inline-block;
                white-space: nowrap;
            }
            .block {
                color: #000000;
                display: inline-block;
                font: 12px/1.5 Arial,sans-serif;
                margin: 5px 2px;
                padding: 5px 5px 5px;
                text-align: center;
                vertical-align: middle;
                white-space: normal;
                width: 180px;
            }

Output