How Websites are Talking Back: Responsive Web Design

One site fits all.

Owing to a six-speed shift into mobile phone marketing and app development, it makes sense that websites should not only match their desktop Yoda but their mobile protégés as well.

Enter Responsive Web Design.

Responsive Web Design is exactly what it sounds like: it’s the design of websites which actively respond to browsers on both desktops and mobile devices. In other words, whether you’re surfing from your desk or iPhone, responsive websites will acknowledge both and adjust accordingly.

So, an Apple user can flip his or her phone, a desktop user can browse, and an iPad user can tap and swipe. However your website is being viewed, it’s the format that changes – the content doesn’t.

This fluidity applies to images, too. These will automatically fit the required format so that text doesn’t box them out of frame.

The elegance of responsive web design is that, outside of the dimension- and pixel-fill, you won’t see any difference. Whether formats or layouts are flexible or fixed, your site will fit them all.

Elegance and function.

Responsive Web Design

For those of you who are web geeks, the engine beneath responsive web design looks like CSS but with a fluted feature. Columns and sub-columns within the CSS allow for multiple grid systems, plus the addition of customized coding.

Responsive web design requires a pocketful of tokens due to the time, support, performance and content required, but it’s a worthy investment. After all, the web is going mobile. Shouldn’t you?

Let everyone see you.

Should websites be fluid? We think so.

Is your site responsive? Does your web developer know how to animate your site to achieve responsive functionality? If you’re scratching your head about either of these questions, contact HyperDo to learn more.

Christopher Wendt

Christopher has over 15 years of experience building & scaling multiple businesses scanning various industries. At this time, he is currently offering private consulting to business owners.

View All Posts
By |2019-05-28T03:02:18+00:00August 7th, 2012|Categories: The Blog|Tags: , , |0 Comments
[gravityform id="2" title="false" description="true" ajax="true"]
<div class='gf_browser_unknown gform_wrapper' id='gform_wrapper_2' ><div id='gf_2' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_2' id='gform_2' action='/2012/08/07/responsive-web-design/#gf_2'> <div class='gform_heading'> <span class='gform_description'></span> </div> <div class='gform_body'><ul id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below'><li id='field_2_1' class='gfield unlabeled gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label gfield_label_before_complex' >Name<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name' id='input_2_1'> <span id='input_2_1_3_container' class='name_first' > <input type='text' name='input_1.3' id='input_2_1_3' value='' aria-label='First name' aria-required="true" aria-invalid="false" placeholder='First Name'/> <label for='input_2_1_3' >First</label> </span> <span id='input_2_1_6_container' class='name_last' > <input type='text' name='input_1.6' id='input_2_1_6' value='' aria-label='Last name' aria-required="true" aria-invalid="false" placeholder='Last Name'/> <label for='input_2_1_6' >Last</label> </span> </div></li><li id='field_2_2' class='gfield unlabeled full-width field_sublabel_below field_description_below gfield_visibility_visible' ><label class='gfield_label' for='input_2_2' >Email</label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_2_2' type='text' value='' class='medium' placeholder='Email' aria-invalid="false" /> </div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' value='Submit' onclick='if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; jQuery("#gform_2").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=2&amp;title=&amp;description=1&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='2' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_2' value='WyJbXSIsIjhhNGMxZDc1YjI2ZTRmZGQyN2JjYjhjYmJkMTYyYTg4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_2' id='gform_ajax_frame_2' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 2, 'https://www.hyperdo.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://www.hyperdo.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;}, 50);}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [2, current_page]);} );} );</script><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 2) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [2, 1]) } ); </script>