Jump to content

Convert non responsive website into responsive

ashraful122

By ashraful122
in Gig Advice

Recommended Posts

ashraful122 Newbie

ashraful122

Posted
Posted

As businesses grow, so do the expectations of consumers. Today, 58 percent of Americans own a smartphone and use it daily to access the internet. Consider the facts:
• 74 percent of mobile users will leave unresponsive sites. Nearly a fourth of all internet users access the Internet solely through mobile devices (Tweet This Stat).

• More mobile users than ever before are using their devices to make purchases. Investing in a responsive site ensures that you don’t miss out on the growing mobile market.
Before transitioning your static site into a fully functional responsive website, it’s important to understand the key features of responsiveness and what this means for site coding.
Transitioning into Responsive Design

For site owners like you, this means you no longer have to create a separate site for mobile users. Now, to transition to a responsive design, you must:

  1. Choose a Framework. As you can imagine, switching to responsiveness takes a lot of work. Fortunately, frameworks such as Twitter Bootstrap and Foundation can do the heavy lifting for you. Instead of starting from scratch, these frameworks allow you to modify and upgrade your existing site’s code (Tweet These Tools).

  2. Convert the code. Be sure to review everything you need to know about converting fixed width. You’ll want to add meta tags such as width=device-width, initial-scale=1, and maximum-scale=1. Furthermore, when moving from fixed layout to responsive design, establish “break points” that will trigger CSS style rules. The more you identify components suitable for replacement, the easier it will be to convert your site’s code. Take it in bite-sized chunks by moving one page at a time.

  3. Review your site. Test your converted site on multiple devices to ensure that everything is responding accordingly. Try visiting your site on an iPhone, tablet, and other devices with varying screen size. The more you test your responsive site, the better the user experience will be in the end. Also remember to invest in responsive video, as embedded videos from sites like YouTube have fixed sizes. Another consideration to check is whether or not you have printer-friendly styles.

CSS3, HTML5, and Media Queries

Web designers rely on CSS3 and HTML5 markup languages to transform files into functional web designs. Most modern browsers support these standards, but media queries must be considered with regard to responsiveness.

Media queries enable designers to change the CSS based on browser window size, screen size, or the particular device in use. Combining fluid grids with media designs makes it possible for designers to effectively create responsive websites without sacrificing quality user experiences.

When using CSS, add this code into the <head> section:
<meta name=“viewport” content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1″ />

This code ensures that your site renders correctly on the browsing device. Furthermore, utilize “@media” to set CSS for corresponding screen widths. This will determine how your site appears on various devices.

Options do exist for the creation of separate websites built exclusively for mobile devices, but opting for responsive design is ultimately more convenient and more efficient. For example, content development is only needed for one site instead of different versions. Responsive design also requires only one back end infrastructure. A singular responsive design reduces the costs of designs for mobile devices and desktops as well.

For media queries, it’s probably best to ignore the cliché device dimensions of 320px = iPhone portrait, 480px = iPhone landscape, etc. Instead, since the web is so inherently fluent, determine breakpoints based on the content of your site. By treating your layout as an enhancement of your site’s content, you create an interface that looks nice on every screen. This creates a focus on major and minor breakpoints, which results in a more functional site.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...