Posts Tagged: responsive web design

Sites made with Simple Responsive Template

read post

In a short time since Simple Responsive Template was launched, quite a few web designers and site owners used it to build their sites. And we are very happy to see that!

Here are some of the sites built using Simple. Click thumbnails to open sites. If you built a website with Simple, drop us a line in comments to this post and we will feature you.

Smithsonian National Postal Museum. Native Themes in New Deal-Era Murals
See all »

Introduction to OOCSS and Responsive Behavior. Designing a one page site with Simple Responsive Template.

read post

breezi_placeit

Working on web projects I used to run into 2 problems time and again. First problem applies to any web design project: as the project grows bigger, CSS gets messier. There was obviously a need for some kind of better system of writing CSS. Second problem applies to responsive websites. The problem is that solely CSS media queries are not enough to make a website truly responsive. Truly responsive website will not only look, but also behave in a responsive way. That means – if we will simplify things a lot – it will serve different assets to different devices. In this tutorial I would like to show you the solutions to those problems, which I think are awesome: OOCSS (stands for Object Oriented CSS) and Responsive Behavior continue reading….

Simple Responsive Template. New freebie from Prowebdesign.

read post


Simple Responsive Template is a continuation of YAMB (Yet Another Responsive Boilerplate) project. This tutorial on YAMB v.1 will give you a short overview of responsive design concept and idea about why YAMB was created. In this article we will mainly speak about how  to use Simple Responsive Template and how it is different from the YAMB v.1.

How to deal with :hover on touch screen devices

read post

Are you planning a web project? Not sure what mobile strategy is right for you? Read our short educational article that can help you make the right choice. This article is a small case study about dealing with hover effects on touch screens. As you know, :hover behavior doesn’t exist on touch screen devices. So when you… Read more »

CSS3 rounded responsive drop shadows & glows

read post

And by rounded drop shadow we mean this effect:

All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects.

Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead… Read more

Yet another boilerplate for responsive (mobile) web design. YAMB.

read post
A new version of this template – YAMB v.2 – is available. Please use the new version. This version of YAMB is not maintained anymore.
YAMB v.2 tutorial and download page


YAMB   is a small set of tools and best practices that allow web designers to build responsive websites faster.
YAMB includes features that are requested by the clients all the time:

  • Fluid grid.
  • Drop-down menu with possibility of unlimited sub-levels or/and mega subs.
  • For small screens drop-down menu is automatically converted into select box.
  • Responsive image slideshow with captions.