Responsive Design Guru

What is a framework?

 A software framework, in computer programming, is an abstraction in which common code providing generic functionality can be selectively overridden or specialized by user code providing specific functionality. Frameworks are a special case of software libraries in that they are reusable abstractions of code wrapped in a well-defined Application programming interface (API), yet they contain some key distinguishing features that separate them from normal libraries.

A framework helps us about using the "already created", a metaphore can be like,

Examples:

"a camera" is the program, and you decided to create a notebook. You don't need to recreate the camera everytime, you just use the earth framework (for example to a technology store) take the camera and integrate it to your notebook.

Advantages:

Disadvantages:

How many types of framework are there?

There are basically 2 types to differentiate: backend and frontend this distinction is drawn depending on whether the framework is for the presentation layer or the application/ logical layer.

It’s important to understand that frameworks are a conceptual notion: a pre-prepared standard kit from which to work. The concept of a framework can be applied to different processes carried out on the web: the programmer’s layer which connects the database to the site content and uses PHP language, and the designer’s layer, where that content must be presented in HTML documents with defined CSS style sheets so it can ultimately be viewed in a browser.

They can be backend (a set of files with libraries to access databases, template structures, session management) or frontend. We’re going to focus on frontend frameworks.

Front-end Frameworks (or CSS Frameworks)

Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.)

The usual components are:

Best Responsive CSS Frameworks for Web Design So Far are below:

CSS Based Frameworks:

Material Design Based Framework:

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

Test it straight away:
As soon as you have created your first wire frame 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 wire frame is working. Testing in this way gave us clues really early on what was and wasn’t working. If you look at this wire frame 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 wire frames 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 wire frame. 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 wire frames and visuals, some styles that will be required for the mobile where there wasn’t a need for an initial wire frame. 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: 
 

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: 

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

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:

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:

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 split 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 behaviors, 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