Responsive website design is a design practice which aims at designing web pages with a layout that works on all devices. It involves several techniques such as responsive images, grid layouts, fluid layouts, media queries and more. The Responsive Web Design - Introduction is a useful resource for learning about Responsive Web Design. Following are some frequently asked questions about responsive website design:
- What is the difference between mobile website design and responsive website design
Mobile website design means design of websites for mobile devices only. Responsive website design means designing websites for all devices including tablet, mobile, desktop etc. Mobile website design usually means using special frameworks only for mobile devices. Mobile websites do not always look good on desktops but Responsive websites looks good on all devices.
- What is the difference between view-port and screen size
view-port is viewing area of website. If you resize browser window then the view-port changes screen size is size of the device screen
- So how do we apply view-port to resize
view-port is same as browser window, but without the toolbars and buttons. It is just the area where the website shows. Screen size is physical size of device window. When we say IPhone has 5 inch screen, it means screen size of IPhone is 5 inch. view-port is actual area where the website shows in the browser. When we resize browser window, the area where the website shows also resizes.
- What is the key role of Graphics in Website design
In Website design, before HTML 5 and CSS 3 we had to use tools like Flash and Photoshop, but now we can use HTML 5, JavaScript and CCS 3 for creating good looking affects for websites. For example we can create graphs, charts, animation effects, games and more using just HTML 5, JavaScript and CSS 3
- So HTML 5 and CCS 3 can create images
It depends on the type of images you need. But for most images you need a graphics tool like Photoshop or Gimp. Gimp is free and open source. You can also create graphs and charts with HTML 5 and CCS 3 and also animations and games.
- Should I use Dreamweaver or Notepad++ for HTML 5 and CSS 3 ?
You may start with simple tools like Notepad++, then use more advanced tools like Dreamweaver or Gimp. It is usually better to first understand the concept using a simple tool.