Responsive CSS design – Web Design Tips

For designers, the most difficult and interesting aspect of responsive web design has been the flexible nature of it. We’ve constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design, or as I like to call it, ‘Getting’ Flexy’.

Responsive CSS for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop version.Now the number of people who are using the tablets and mobiles to browse the web are increasing. Hence a web page layout should be adaptable for all the view port of the device in which the visitor views the webpage.Some of the tips and tricks for the designers to keep in mind when they design a responsive webpages are given below. This will be a prefect resource for responsive web design tutorial in web.
responsive-css-design-tips

First, the basics

Responsive web design, as introduced has three core principles:

  • Flexible grids: percentage-based fluid columns of content.
  • Media queries: a magical tool to change your CSS based on the browser’s current state.
  • Flexible media: content such as images and video should scale with the browser’s dimensions.

You’ll notice that two of those ingredients have the phrase ‘flexible’. This is the key differentiation of responsive web design versus other web design approaches. Let’s look at how to become flexible.

Never use maximum-scale

Occasionally, in an attempt to override an orientation bug in iOS, web developers will add maximum-scale=1 to their meta name=”viewport” tag. Don’t do this. The unfortunate result is that users are unable zoom the page (using a pinch-zoom gesture). This is a bad practice and a huge accessibility concern. If you want your site to be ‘flexy’, it has to be zoom-able.

Do this: you win the internet!

<meta name="viewport" content="width=device-width, initial-scale=1">

This will inform the browser to set the window width to the device’s width without overriding any user needs. Then in your CSS, add this brand new at-rule:

/* You'll need prefixes. @-ms-viewport, @-o-viewport, etc... */
@viewport {
width: device-width;
}

This is an in-progress W3C spec written to move this viewport information over to CSS. IE10 and Opera browsers support this. Go ahead and start rolling this into production sites.

Responsive Images:

Making the height and the width of the images to auto is best for responsive webpages (should be used).

Also make sure always using a compressed image. Because images of 5mb or above are produced when captured from Digital cams. It will take time to load in mobile internet. Hence make sure you compress the image before you use it in the website.

Some of the sites found in the web

http://www.imageoptimizer.net

http://jpeg-optimizer.com/

Mobile Navigation Menu:

Navigation menu for mobile should be redesigned when the page is viewed in a smaller width.You could see how the menu is re aligned in this demo, when the width is reduced. Some responsive mobile navigation menus are available in internet.

http://webdesignerwall.com/demo/mobile-nav/

Relative Positioning Of Elements:

Every element in the html is relative to another.Thus it is much flexible when the browser width gets changed. In the this demo header and side menu positions are relative. That gives the flexibility for the menus to get aligned below the header when the width is reduced.

Relative Font Size & Usage Of Percentage:

Instead of using px for the font sizes em is used .Thus the font size reduces relatively when the font size of the header or some other html element reduces. Percentages should be used instead of px.

Example: instead of setting as 1000px , 100% or 90% should be set based on the requirement. Thus the website scales based on the width. The most common example is font-size, if you wanted to set a heading font-size (20px) based on your body font-size (10px) in em units.

Don’t use px units, use em units

The px vs em debate is a long one but em units have proven themselves useful in responsive web design. Using em units should be familiar to most web developers, but worth reviewing. An em unit is a relative unit of measurement based on the parent element.

Keep it relative: typography

Setting your type in em units enables you to use the power of CSS to build a scale-able typographic system that grows with the viewport.

body { font: 100%/1.5 serif; /* 16px */  }
h1 {  font-size: 2em; /* 32px */ }

@media (min-width: 600px) {
body { font: 112.5%; /* 18px */  }
h1 {    /* Do nothing! I'll automatically be 36px */ }
}

Based on personal experience, this will save you hours per project versus going through and updating pixel values. Also, it has an accessibility benefit when a user adjusts their font size.

Keep it relative: white-space

Additionally, using em units for padding and margin helps create a vertical base for your design. At larger screen dimensions you can insert more white-space into your design in a healthy, consistent manner without too much labour.

#hero { margin-bottom: 1em; }

@media (min-width: 600px) {
#hero { margin-bottom: 2em; }
}

Using em units will help you preserve a balanced system of relative proportions. For a more advanced approach on relative sizing,

Min-Width & Max-Width with CSS Media Queries:

Min-width and Max-width should be mentioned in the CSS along with the width.Thus imposing a constraint for the widths are better suited for scale-ability for its width.media queries should be added with the min-width or max-width as condition to display certain elements.

Media queries are so important for a responsive css design.

@media screen and (max-width:320px)
{
    .ad_bar{ display: none }
}

In the above code we are making the ads to disappear when the display device width is below 320px. By this we way we provide a better readability of the content in mobile devices.

max-width min-width
‘Desktop down’ ‘Mobile first’
Start large, dig down Start small, build up
Good for legacy sites Future friendly

Go forth and be flexy!

These are just the basics on the path towards fluid width nirvana. It’s important to remember that we’re all learning and it’s OK to make mistakes. I encourage you, if you haven’t already, to take the plunge and build out your own responsive design. The day when most websites sit on a flexible frame and are universally accessible by any device is hopefully fast approaching. Help the web become a better place.

If you have any more suggestions to be added , feel free to comment below.
view demo

 

Posted by: Dhiraj kumar

Cool inset Text Effect with CSS3 Text-Shadow

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow.

Introduction

I played around with trying to hack box-shadow into background-image in the same way that you can add linear gradients to text, but to no avail.

Well, in any case, I finally was able to get something to work, and yes, it is pretty killer.


insetText

That’s it right there. But, let’s take a look at how and why this works.

First let’s start with defining our class and setting our font. We have styled our div and our body and now we want this text to look like it is stamped into to page.

The CSS

.insetText {
        font-family: Lucida Grande;
}

The next step we want to take is to set the background-color of the text to the color that we want the inset to be. So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
}

Next, we are going to use the background-clip CSS3 property to create a clipping mask using the text to mask the background. Now if you are a designer, you probably already know how a clipping mask works. The color black is transparent to the background and the color white is opaque. Thus, the image behind the mask will show through on only the black parts and the white parts will ‘clip’ it. Remember that, because it’s important.

Remember, CSS3 is not standard yet and may not be supported in older browsers. For now, it’s best to use the standard AND browser specific properties for any CSS3, so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}

Now, I know. It doesn’t look like that did anything, whatsoever. We are back where we started, right? Wrong, in truth, the background color has been clipped behind the text, so it only shows through where the text is. The problem is that the browser default CSS is to make text black. So, now we simply use color to make the text transparent.

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
}

Now we’re getting somewhere. We have taken transparent text and used it to clip it’s grey background. Here is where the magic happens. We will use the text-shadow property with rgba colors. Since the text is transparent, the entire shadow, even what is normally hidden by the text in front of it, will show. If we offset the shadow vertically, it will appear as if it is on the inside of the text. And if we blur the edges, it should actually appear like an inset shadow, since the darker clipped background fading into the white shadow right? And the shadow that falls outside of the clipping mask should appear to glow slightly, since that it’s closer in color to the contrasting background! So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,1.0) 0px 3px 3px;
}

Yeah, that looks pretty good, right? I just don’t like how the inside of the text in now white. It looks kind of unnatural, and it really takes away from the outer glow that gives it the inset look. So let’s revise our shadow color by dropping it’s opacity or ‘a’ value to 0.5. Like so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Perfect! Now we have a completely CSS based inset text effect! We can now add this class to any text element on our websites, without having to open Photoshop or Illustrator, create the document, design the effect, save the image, upload the image, and then place the image in our markup where it will slow down our load time. You would add this to your markup like so…

<h1>This is inset text</h1>

This solution is great for headings. The smaller you make your text the smaller you will need to make your text-shadow.

NOTE: This method is currently only supported by Webkit browser like Google Chrome and Apple Safari.

Thanks for reading, and I hope this helped!

view demo

Posted by: Dhiraj kumar

Cool Typography Effects With CSS3 and jQuery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilities.

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

We’ll be using jquery.DG_lettering.js in order to style single letters of the words we’ll be having in our big headlines.

typography-effects-with-css-jquery

THE HTML

The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:

<div id="letter-container" class="letter-container">
    <h2><a href="#">Sun</a></h2>
</div>

Then we’ll call the jquery.DG_lettering.js plugin, so that every letter gets wrapped in a span.

This example looks crazy: we’ll create a text shadow that “elevates” the letters. We’ll also create a pseudo element which has a superhero as background.

THE CSS

.letter-container h2 a:before{
    content: '';
    position: absolute;
    z-index: 0;
    width: 525px;
    height: 616px;
    background: transparent url(superhero.png) no-repeat center center;
    background-size: 40%;
    top: 0px;
    left: 50%;
    margin-left: -277px;
    transition: all 0.3s ease-in-out;
}

On hover, we will animate the background size to make the superhero larger:

.letter-container h2 a:hover:before{
    background-size: 100%;
}

The span will have the text-shadow that “elevates” the letters and on hover, we will move the letter down by adding a padding and changing the shadow:

.letter-container h2 a span{
    color: #ff3de6;
    float:left;
    position: relative;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      2px 15px 5px rgba(0, 0, 0, 0.2), 
      1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
    color: #e929d0;
    padding-top: 10px;
    text-shadow:  
      0px -1px 3px #cb4aba, 
      0 4px 3px #934589, 
      1px 1px 10px rgba(0, 0, 0, 0.2);
}

And that’s it! I hope you enjoyed creating some crazy typography effects with CSS3 and jQuery!

view demo

That’s it!

I hope you enjoyed this article and if you have questions, comments, or suggestions, let me know! Thanks for reading.

Posted by: Dhiraj kumar