Responsive Web Design and the way of the web

Responsive Web Design and the way of the web

 Tuesday, March 4, 2014 |  Views:1,612 |  Posted by: John Marx |  Reading Time: 3 Minutes, 45 Seconds |  Article Tags: 

As desktop computer sales slowdown we are seeing a shift to not only tablets but to smartphones. As more people use a multitude of devices to access the internet we have to find ways of handling these devices in the most efficient manner possible. One can build a website specifically for each type of device or you can build a site that is responsive in nature that will resize to fit the device that it is being viewed on; including landscape and portrait views on the device. This is where responsive web design comes into play.

According to the statistics of eMarketer (January 2014) the percentage of people accessing the web from mobile devices will increase from 73% at the end of 2013 to 79.1% by the end of 2014. The prediction even gets more prevalent in 2017 when the percentage is anticipated to be 90.1% of all visitors on the web using mobile devices.

What exactly constitutes a responsive web design?

The concept of RWD is that your website layout will adapt to the changing media that it is being rendered on. The content will adjust and be presentable and legible. This can be as simple as showing the whole site without scrolling which is what some people want. Others want the pages to resize and be different with each view without having to create separate sites. Along with RWD one needs to take into account not only the screen size but the pixel density to handle the retina type displays that have twice as many pixels per inch than standard screen sizes.

Grid Based Layout

At its most basic a page is dived up into columns so that the information will float into a desired location based on the overall screen size. The number of grids that are used for a website can be as simple as a one or two column grid to the standard twelve column grid most new sites utilize. The grid layout chosen will help define the size of the content on each individual screen layout. As the screen size changes the styling works to add and remove specific class assignments within the webpage. Some information may be hidden altogether, font sizes increased, or different coloring to better match the native theme of the device you may be using.

Image Resizing

One area often missed is the images on the site. For a desktop environment the size may be set to a specific pixel size and looks great. As the screen size gets smaller or changes from landscape to portrait the image may not be the right size to convey the image you want to see. One solution that we use is a flexible image structure that on modern and mobile browsers will make the image resize based on the width of the grid columns the image is being stored in. This method helps produce the best results across a large array of devices.

Showing and Hiding Content

As your screen sizes grow and shrink having all of the information shown is not always desired. Seeing a link at the bottom of a mobile that allows you to see the entire (full) website version is a good option. Many times for a mobile site what the user needs to know is who you are, how to contact you, read your latest product and blog information, a map to get to your location, hours of operation and a contact form to get ahold of you. If you’re showing a product page does a mobile user need to see every specification initially upon loading or would a “More Detail” link that expands the specifications beyond what are the most likely specifications be a better use of the screen real estate for a site visitor?

Conclusion

As with all technology decisions you need to decide what is right for your customers. One approach should not be used for every situation. Each version of a browser that visits your site needs to be thought of. Here at JM2 Webdesigners we will work with you in defining what you want in a responsive design and based on who your target market is we will build the correct solution for you. A responsive design is the first step in building your online presence. Once you have the layout chosen don’t forget about the content (content is king), search engine optimization (SEO), and how to build social media into your overall marketing strategy. Doing one without the others can leave you open to disappointment.

Blog Tags

<a href='mailto:john@jm2marketing.com'>John Marx</a>

CEO / Code Ninja
 Send an email

John Marx

John has been an entrepreneur and pusher of all things “normal”. He was brought up where a handshake is as good as any word and even more important than any legal speak. John believes in giving back and giving people more than they expect. This is the foundation and basis of JM2 Webdesigners & Marketing. The prices will shock you, the amount you get will shock you even more, and the skills his entire team brings will completely amaze. He has built a team of experts that are talented, young, and efficient. Each one has the characteristics of the company in wanting to see a small business grow and each one goes above, and beyond which makes John beyond proud of them.

So why is John considered the “Code Ninja”. It’s isn’t because people fear ninja’s (they should). They will fight until their last breath defending, achieving the mission, and helping (in this case small businesses). John believes in very surgical strikes to help a business grow using agile methods that change rapidly, in ways people don’t expect, and with a relentless passion to achieve greatness.

Blog article comments

No blog comments have been submitted yet. Be the first to leave a comment!

 

 

Comment on blog article

Your Name:
Email Address:
  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
  •