Designing A Fully Responsive WebSite

×

Error message

Warning: filemtime(): stat failed for sites/all/themes/consilium/scss/header.scss in Superhero_scss->outputFile() (line 89 of /home/jbros/public_html/sites/all/themes/superhero/includes/superhero_scss.php).

When I first heard of responsive website design, I thought it seemed useless to the world of internet, that is, until I began using it.  I still think smart phones are fast enough to view a site any way it is displayed; however, it is convenient how you can make things not display or load on multiple devices.  On mobile devices, we I do not have the site's headers showing so it takes less load time and looks more mobile device friendly.responsive site design on a mobile device; I learned the tricks in using the @media queries to display things differently per the screen size.  In a responsive website, one can use different colors or fonts depending on the screen width or device using these codes, but a site is not really responsive until it uses images and sections that become based on percent and a column foundation for site layouts instead of exact pixels.  It is cool because one can completely change the CSS for any different screen pixel size.  Not only are the responsive @media queries fun, the base of the actual layout is convenient in designing sections for a content management system like Drupal 7.xDrupal logo for responsive blogbecause one can stack things in any brick like pattern desired.

 

Drupal 7.x Omega theme column layout of responsive themeDrupal has many themes, but OmegaResponsive Drupal Theme Omega logo is the one we like to use for the responsive qualities seen on our site and others.  By using the Theme.info file, one can add or remove Regions and Zones.  In your site, clear Caches under Configuration/Performance to make these changes appear.  This image displays how the columns layout for one to apply zones and regions to.  This is a 12 column base that will adjust, respond to the screen size of the user’s device and stack things according to the theme, or the @media query. You can use display:none codes to only have what you want display on devices so a phone will only see the shoping section of pages or something.

 

Since Drupal 7.x uses Views to make Blocks out of Content, it is easy to make regions that span your desired amount of columns in the Omega theme.  One can make a Content Type, add Content, set up a View, and assign the results to any region they set up.  This is tricky because the responsive theme does not allow much tolerance in the order they appear in, and all Regions become 1 column width on the smallest screen size, but there are more complex codes to get around that.

 

A responsive website would not be complete without fun JQuery that allows for cool transitions.  We do not directly know how to write JQuery, but there are great online resources for the codes and how to apply them to the site.  For Drupal 7.x, it is complex, yet simple, and we use the Isotope module for some useful image displays and sorting properties.  View our tutorials for step-by-step instructions.  With all this combined, a responsive site becomes very useful on all devices.

 

Showing how responsive themes work on multiple devices and screen sizesWith this all said, this image may make sense now.  The desktop, laptop, and tablet all relatively display the same way; however, the images would shrink slightly to fit the percentages in a responsive way, or the JQuery would float things around.  If you look at the mobile device, you can see that all the columns turn into one column, so this helps illustrate how a responsive theme stacks content and columns.

 

 

Add new comment

Full HTML

  • Shortcodes usage

  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA

Enter the characters shown in the image.

About Beall Brothers

Based in Ohio, Beall Brothers is a combined team from two artistic, creative men that have the combined skills to accomplish anything from graphic design to fully responsve website designs that are optimized to be found on the web because anything is possible, and we do not limit imagination or dreams, and we never ignoring any fine details.Logo for Devel Solutions for fully responsive website designs, programming, and enterprise solutionsLogo for D-zired Design where one can find fully responsive website designs and graphics

This Site Is SSL Secured

Get in touch

 Beall Brothers

 Josh: 330.749.7302

 Justin: 330.466.3028

 support@beallbros.com

Check Out Our Tutorials

It has taken us a long time to learn what we know, and this wealth of knowledge was acquired through the process of trial and error; however, this process takes too long. We offer free high resolution help tutorials to clients, so you can do it right the first time, and one can find many videos in our tutorials selection or on You Tube D-zired Tutorials Logo where one can learn Drupal 7.x and Adobe for responsive site designLearn to design and build gracefully responsive Drupal 7.x websites that include commerce and all the other functions found on BeallBros.com

Connect With Us

Engine Optimization

Figure out how to use new SEO technologies to make your new responsive site searchable and more easily found on major engines like Google, Bing, or Yahoo.

Sign up to our newsletter: