Saturday, June 16, 2012

Responsive Design

What is Responsive Web Design?

Trends in Web design have a tendency to come and go. Responsive Web design, however, is looking more and more like one of those trends that will one day become an industry standard.
Responsive design is the concept of developing a website design in a way that helps the layout to change according to the user’s computer screen resolution. It affects layout (including menus), image/video size, and now even the amount of text you can view on a page as the browser size is reduced. The results are sites that aim to keep the most important elements on screen and prioritized, no matter the browser size and orientation. Its three most essential elements are:

      Fluid Layouts
      Flexible Images
      Media Queries

Designing a website is a complicated process. Adding a responsive element makes that an even more complicated process – a desktop site is now the same site that will be viewed also on tablets and mobile devices, except it will look much different. This means that when a site is designed to be responsive, it requires two additional designs: one for tablet size resolution (smaller than 980px wide) and another for mobile devices. 

  Starting on the home page: 
 You may feel like there is another page that has a higher importance than the home page, but this was where we started. Here is our finished original wireframe. You can see the mobile page length is quite a bit larger due to the content wrapping over one column. 

Main navigation: 
We created a simple horizontal top navigation that would have a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down we wanted to create a menu that would suit the devices better. This gave us the menu spilt over two columns for the mobile device.

Other header components are aligned right and would just shift along as the page width reduced. Remember when you are styling the navigation to think how it will work as the screen sizes changes. Certain styles, such as using tabs, may be difficult to get to work and look good as the screen width reduces. Footer: Our footer is pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.

Other components: 

 Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviours, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page


Test it straight away: 

 As soon as you have created your first wireframe test it on the relevant device straight away. It’s easy to get the image on a simple web page and take a look at how it looks and feels to scroll down. This will let you know early on if your wireframe is working. Testing in this way gave us clues really early on what was and wasn’t working. If you look at this wireframe you should quickly see our first issue. Adding the tablet and mobile versions to your user testing process will give you a lot of useful feedback too. Now that your wireframes are created, tested, amended and approved it’s time to make them look good for all your screen widths. It isn’t necessary to create visuals for every wireframe. The main objective is to cover all the styles that will be required to create the HTML and CSS. There will be a little bit of a crossover for wireframes and visuals, some styles that will be required for the mobile where there wasn’t a need for an initial wireframe. Styling the page: Think about keeping your styles simpler for your mobile version—what’s great about CSS3 is that you don’t need lots of images to get great styled effects, but these still take a bit of time to load.
  • Thinking about font: Make sure your font sizes are going to be readable on each device. They’ll have to be much larger on the mobile device to ensure readability.
  • The impact of image sizes: The site will need to load in the full size images even if the CSS scales them down, so try to keep image sizes as low as possible. There can be some nifty JavaScript tricks though to make the site run smoother. On this site we initially loaded in the smallest image size, and then used JavaScript to decide if a larger image was then needed.
  • Use advanced CSS: It’s important to get the client behind the idea of using advanced CSS styles, allowing the site styles to degrade as the browser capability does. This lets you keep site loading times low
  • Constant communication is required: The project will always go smoother if the team speak to each other, so from both designer and developer it’s good to discuss problems and solutions as soon as they turn up.

So what does all this mean?

If you are thinking about convincing your client to have their new site designed and developed in a responsive way, firstly you should consider if it really is the right solution for them, then you’ll need to be able to persuade them of the benefits and communicate that it will add more time to the project. But, I do believe that this is how more sites will be developed in the future.

Web View:

Mobile View

In Web view the main menu which I underline in red color, it will be change in mobile point of view. See the Above example of mobile screen. I am not saying every site looks like this; it’s one of the way to present the menu navigation in mobile screen.

 See the Below Examples of Homepages in web and mobile view…..

  Resolution Sizes:

 The Designer’s Role 

If you’re a designer who only designs, meaning you aren’t responsible for the HTML and CSS of the site on which you are working, a lot of this might just go over your head. You may even be wondering why exactly you need to know about Responsive Web Design..

 I’ve always believed that whoever’s designing a website should be the one later breathing life into it, through HTML and CSS. I understand that this is obviously not the case for a lot of projects, and I would respect a person’s abilities should they choose to only put together the design or only write the code.

 It’s important to understand that a website is not one or the other, it’s a marriage of both design and code, each depending on one another to create a seamless experience. To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.

I’ll remind you again: this article is for designers. In the coming paragraphs, I’ll discuss exactly how, as designers, we should change the way we design to better fit the process of responsive web design.

 Even if you’re not designing for Responsive Web Design, you should be designing with some sort of grid system. As the modern, educated designer you are, you should already have an understanding of what it means to use a grid, so I’ll skip the frilly bits.

 One of the pillars of Responsive Web Design is the Fluid Grid. Essentially, it means that your grid, which was traditionally measured in pixels, should now be thought of in terms of percent of the total page width. The actual calculated width of each column in a responsive web site changes every time the browser window changes size, and cannot be guaranteed to be the same across different devices. This is why you must use a grid when designing for Responsive Web Design. It is a necessity, not a nicety. You cannot create a responsive web site without a grid-based design; it’s simply out of the question, it wouldn’t work. Knowing that your design won’t have the exact same pixel measure for each column as in your design comp, there are a few other measures you should take to insure that your grid scales without issue.

  Try to refrain from using textured borders in your columns, like this:

 These kinds of things would be difficult for your developers to use in a responsive web site, because they wouldn’t scale well horizontally. If you make the column wider or thinner, the textured borders would struggle.

  Horizontal gradients are another no-go.

If you do have a textured background in a column, make sure it is one that can be tiled easily. Do:use grain, grunge, whatever. Don’t: use a photograph, illustration, or otherwise un-tillable image.

 Here’s an example: imagine that you’re designing a website that looks like this (I’m sure you’ve worked with similar layouts before):

 The crucial part of this example is the identification of groups of elements that must stay together for anylayout. For example, all the navigation links must stay together, because otherwise they would make no sense. This is a module, a section of information that can be moved around amongst the other modules without losing its meaning.

 Building your site with these modules in mind makes it easy to imagine how your layout will adapt for different viewport sizes. For instance:

 See how although the modules are in different places, they still display the same information as the original, just in a form more easily digested by mobile devices or other, differently-sized browsers. There isn’t anything you will have to change in your layout to make this modularity work, it’s just a different way to look at the same image. Hopefully though, this new perspective will help you make more informed decisions as you work on your future design projects.


“Having a web site developed with responsive design is more costly up front. You can typically plan on about 25% cost increase over regular web site. The reason being is that it takes more planning in the development phase – in essence you are designing the site 3 times. Think of it this way, small = phone, medium = tablet, and large = traditional laptop/desktop. The beauty of it is that you can target your messaging based on the device the viewer is using and manage it without having to worry about how it will look – that has been done already. You also are able to present ALL of the content in your web site without limiting navigation or pages. It is going to present the page depending on the device, with a mobile web site you are limited in pages (sticking to the top 5 – 7 page rule). Like with anything choosing the right solution depends on your needs/wants. Responsive is not the perfect solution for all web sites but a good majority would benefit from it. It will save you time and money because you are not designing for MANY platforms –android, blackberry, ipad, iphone etc etc. what happens when a new device comes out? Responsive design takes the stress away knowing you have a web site that is working at its optimal level on all devices. And its sexy.”


Like so much on the internet, Responsive Web Design is evolutionary, not revolutionary. It’s simply the natural next step for the web, not a complete rethinking of everything. As designers, we must continually adapt our workflows, and this time is no different. Responsive Web Design is the future, or at least, it will be when developers and designers alike embrace it. As web designers and developers, we are the only ones with the power to see this wonderful new standard come to fruition. Make it happen, for you, for me, for the internet at large!
Sunday, April 24, 2011

Image Zooming With jQuery

jqZoom is a jQuery plugin which enables images to be zoomed.
This is an easy-to-implement plugin which is very handy, specially, in e-commerce projects & galleries.

How it works?

This jQuery zoom plugin simply requires that "jqzoom" class to be added to images other that including the JS file and calling the main function once. And that’s it.
You can also configure it to mention the width-height of the zoom div and its position.

Requirements: jQuery
Compatibility: All Major Browsers