Your web audience has changed their behavior. According to a recent survey, Americans access websites with their smartphones 28% more often than on their desktops – and this trend shows no sign of slowing down.
With the increased proliferation of smart phones, tablets, and other devices capable of browsing the Internet, there’s no excuse for having a website that only displays correctly on a standard browser. By not doing so, you are missing out on a large number of prospects who browse on mobile devices. Designing a responsive site that supports an optimal view from the device it is viewed on has become a necessity.
Converting to a Responsive Site Design
The good news is that most websites can be easily converted from non-responsive to responsive – but not all can. It depends on where and how your priority information is displayed. Some current designs cannot be directly converted to a one-size-fits-all, mobile-friendly design. But that’s okay, we’ll help you get started.
The first step in your redesign is to rethink your priority information, and from this determine clear and concise design requirements. Take a look at mobile browsers and check on their universally compatible components. From here, you can decide whether you should manually convert your website or use a framework.
A framework is a common set of concepts, practices, and criteria for designing a responsive website. Frameworks make conversion easier for designers because they use a common coding structure that can be reused instead of designed from scratch.
Bootstrap and Foundation
Currently, the market is flooded with various frameworks for mobile website conversion; however the most popular are Bootstrap and Foundation. Bootstrap was designed by Twitter and uses a fully functional grid system with four different standard sizes. It uses standard styling for forms, buttons, images, headings, and navigation systems. Its main properties are CSS customization and jQuery-driven components, which include drop-down menus, tooltips, popovers, alerts, image carousels, and accordion-style panels. Bootstrap is one of the most popular frameworks, among others.
Currently, the market is flooded with various frameworks for mobile website conversion; however the most popular are Bootstrap and Foundation. Bootstrap was designed by Twitter and uses a fully functional grid system with four different standard sizes. It uses standard styling for forms, buttons, images, headings, and navigation systems. Its main properties are CSS customization and jQuery-driven components, which include drop-down menus, tooltips, popovers, alerts, image carousels, and accordion-style panels. Bootstrap is one of the most popular frameworks, among others.
Foundation is a framework that gives you less to work with, but more flexibility. Foundation wants you to build your sites in mobile first so that it can easily adapt to larger screens.
Bootstrap's desktop support includes Chrome, Safari, Firefox, Opera, and IE8+. For mobile browser support, Chrome on iOS and Android, and Safari (iOS only).
Foundation's desktop support includes Chrome, Firefox, Safari, and IE9+. For mobile browser support, iOS (iPhone), iOS (iPad), Android Phone 2, 4, Android Tablet 2, 4, and Windowns 7+.
The main difference between Bootstrap and Foundation is that while Bootstrap tries to give you everything you’ll need for your responsive website, Foundation just gives you a foundation to build upon. Bootstrap has a larger community support while Foundation will require you to do more on your own. However, Foundation does give you more control over your site, allowing you to carefully plan your CSS.
When converting your non-responsive sites to responsive sites, have you redesigned from scratch, or used Bootstrap, Foundation, or something else entirely? Let us know what path you took and how it turned out.
