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.
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 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!