Your Desktop Site Will Look the Same!

I often receive requests from potential customers on making their website ‘mobile friendly’ or ‘mobile responsive. ‘Mobile responsive’ means the webpage reacts to the size of the device its being displayed on. In other words, a mobile responsive web page viewed from a tablet will look differently when viewed from a mobile phone. That’s because the two devices are extremely variant in size, and as a result, your web page should work to suit.

Responsive web design is an approach to web development aimed at crafting sites to provide an optimal viewing and interaction experience; easy reading and navigation with a minimum of re-sizing or panning, across a wide range of devices (from desktop computers to mobile phones).

Responsive Web Development

Multiple columns won’t fit on a mobile phone. They’re usually collapsed into one column; one flowing after the other. Also on mobile devices, horizontal navigational menus become hidden and is shown by toggling on a menu button. The mobile menu button becomes fixed to the same location so that when site visitors scroll down on the page, the menu button is always visible. That way, they won’t have to scroll back up to the top of the page to access the navigation.

Each of these changes are necessary to maintain usability and aesthetics from a mobile device. These are the types of changes which my clients can expect when they ask me to make their site mobile responsive.

However, many of hesitant as they’re afraid of the impact on the existing desktop version of the site. I can assure you; the look, theme and functionality of your desktop site will not change in any way. The changes which I make are using CSS styling code only and will only apply on mobile devices and smaller browser windows. The desktop site remains exactly the same.

Take a look at your site using a mobile device. Are you happy with the look and function? If yes, wonderful! Your web developer did a great job. If not, contact me and I’ll make it awesome!

Blog Code Snippets

Vertically Align Anything with Just 3 Lines of CSS Code

Have you to vertically align an element and it just won’t work.

vertical-align: middle; claims to do the trick but it won’t apply to every situation.

.element {
position: relative;
top: 50%;
transform: translateY(-50%);

That’s all you need! It works straight out of the box, even in Internet Explorer 9.