This is the second article in the series on responsive web design ideas and tips. In this post I’d like to mention a couple of specific and simple ideas for creating compelling responsive websites and landing pages.

Backgrounds

Here is a an example of using a combination of background images and background colors or gradients on a page:

(And here is a preview link to the above example, if you’d like to check it out in a browser.) Let's talk about how this is done.

In this example, we added this image as the background for the page, with the background option set to "cover". With the "cover" option the area is completely covered with the background image, and some parts of that image may not be visible, depending on how the dimensions of the image compare to those of the covered area.

Next, we applied a semi-transparent white background to the page content sections, with the opacity set to about 80% - to create enough light-colored cover for the dark text to be readable, while still showing some of the background image:

For a more dramatic effect, and to create more separation between the content segments, you can apply different colored backgrounds to your page sections. You can also set a small margin between page sections - a bit of visible background image between page sections creates a cool scrolling effect:

Custom fonts

Custom topography is an easy way to contribute to a more attractive design and brand identity. Certain custom fonts can also make your text more readable.

Google Fonts library offers a wide variety of font options that can be easily added to your site. Check out this list of recommended Google web fonts.  Here is an article on how to integrate Google fonts into your SignalMind responsive website builder account.

Backgrounds on page headings

As I mentioned in the previous article, a good way to make your page content compact and responsive on the mobile devices is by using accordion-style navigation. Often, on the smart phone version it makes sense to create a "button" look for the page headings (whether they are collapsible or not), to give your site a bit of an app-like feel.  Yet, button-looking headers can look awkward on the larger screens. Instead, on larger screens you can leave the headers without any background (and, perhaps, give it a slight bottom border):
 

Spice it up with images

Below are a few simple low-budget ideas on how to use images to make your site or a landing page more elegant and engaging:

• Add images/icons to your navigation menu items:
  
  
• Add images/icons to your action buttons:
  
  
  
  
• Add a rounded effect with CSS:
  
  
  
  
• Add images as header backgrounds to the mobile version of the site:
  
  

Integrate an iconic font into your site to quickly add icons without involving a graphic designer. Another big benefit of the iconic font images is that they are vector-based, meaning that they scale to any size, look gorgeous on retina displays, and their color can be easily customized. 

(See how you can use vector icons with SignalMind responsive website builder).

To be continued - check soon for more responsive web design ideas and tips!