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.

Our Services

Working 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 programming, ask us for a sample of something you are looking for, so we can show you our skills. We are a small non-corporate company, so you can expect to be treated like a person with real needs because you will be working directly with us, who are the designers.

 

With all the new technology and systems being developed, be sure to use beallbros.com to get the best design that can look good on any screen size with a responsive theme that uses the newest technologies. Web design has been an obsession of ours for about 6 years now.  Not only does Justin Beall and Josh Beall have knowledge in the basic HTML (visit HTML version of BeallBros.com), they is an expert in JAVA programming for specialized applications.  From Ohio, the Beall Brothers are great with anything printable, CSS, and HTML but experts in responsive website design using Drupal 7.x.  @media Queries and viewpoint codes are essential to an effective fully responsive web design.   When you put all of these talents together with unlimited graphics knowledge for Business solutions, you found a one-stop-shop where he or she can get anything.

View HTML Version →

we will methodically create visual communications and problem-solving through the use of type, space, and images.  We will use various methods to create and combine designs, symbols, and images to create a visual representation of ideas and messages.  We have expertise in designing digital web and print media.  Please navigate around our website, view the previous work, read client testimonials, and feel free to contact us with any questions. Discover new business solutions with Logos, business cards, website development , T-Shirts, and more.
 

View Portfolio →

Justin Beall specializes in making client specific applications that can handle anything from basic inputs to calendar scheduling with a form.  If you need a program, he is the one to see.

Who doesn’t love taking pictures or playing photographer?  With the combined experience, we have expert knowledge in photography; however, we do not have some of the higher-tech flash gadgets, we have some nice cameras that can handle any job, and coupled with expert Photoshop knowledge, we can capture any moment with perfection to tell the story forever.

No medium is a challenge for Beall Brothers.  Just like our father, we have been artists from birth.  Being creative in the mediums of oil, acrylic, pencil, charcoal, and pastel, allowed us to explore the new mediums of a computer easily.  Adobe Illustrator and Photoshop are the favorite mediums of our print world, and JAVA, HTML, and PHP are our mediums of the Internet.

New customers, patients or clients are looking for you on the Internet and you would like to be found on the Internet with your website?  Imagine how much we could help your business do more with the web! BealBros.com loves helping clients do more on-line. We develop great websites, build amazing web applications, and help businesses attract more website traffic with our search marketing services through detailed SEO technology.

D-zired Tutorials logo where one can find tutorials in Drupal, Coding, and AdobeIt 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. We offer free high resolution help tutorials to clients, and one can find many of our useful Tutorials that can be found on YouTube Being proficient in Adobe, Drupal, or coding is not something one can do over night; however, with these tutorials, you can get a jump-start and learn many tricks along the way from some professionals.

View Tutorials →

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

From the blog

March 20, 2015

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: