1
Responsive Web Designing with
HTML5 and CSS3
2
Table of Contents
How smart phones helped responsive web designs evolve?...................................................
3
How smart phones helped responsive web designs evolve?
While the statistics should not be the only reference point, but ...
4
with varying screen sizes. So, now we need a design that can fit into every type of screen size
appropriately in order t...
5
Why should you choose Responsive web Design
Now the question arises, whether responsive web design is the only technique...
6
normal web design. Here are some prominent reasons that why should you opt for a
Responsive web design:
 It supports th...
7
HTML5 - Why should you opt for it?
HTML5 places great emphasis on streamlining the required markup for creating a web pa...
8
The version of CSS that we are using currently is CSS 3 that uses CSS 2.1 specifications as
its core. And, it would not ...
9
 height - It refers to viewport height
 device-width - The width of the rendering surface (screen width of the device)...
10
cover a very short spectrum of viewports. This implies that we cannot only depend on media
queries, but we need to use ...
11
Summary
In this ebook, we learned about what responsive designs are and which elements compose a
responsive web design....
Upcoming SlideShare
Loading in...5
×

Responsive Web Design with HTML5 and CSS3

574

Published on

Well, if you only want to view one or two websites once in a while, its fine. But as soon as accessing internet from mobile becomes a regular activity, you start realizing how frustrating and tedious it can be to zoom in and out constantly in order to make the content readable.

Published in: Internet, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
574
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Web Design with HTML5 and CSS3"

  1. 1. 1 Responsive Web Designing with HTML5 and CSS3
  2. 2. 2 Table of Contents How smart phones helped responsive web designs evolve?................................................ 3 Responsive Web Design.......................................................................................................... 4 Why should you choose Responsive web Design...................................................................5 Educating the clients about the Responsive web designs.....................................................5 When should you use Responsive Web Design services?.....................................................5 Responsive Designing with HTML 5 and CSS3...................................................................6 HTML5 - Why should you opt for it?...................................................................................7 How CSS3 supports responsive web design..........................................................................8 Media Queries and Responsive Web Designs.......................................................................9 But media queries are only a part of solution......................................................................9 Fluid layout.............................................................................................................................10 Content comes first with Responsive web designs...............................................................10 Summary................................................................................................................................11
  3. 3. 3 How smart phones helped responsive web designs evolve? While the statistics should not be the only reference point, but you would be amazed to note that as per gs.statcounter.com the use of mobile browser for accessing internet has augmented from 2.86 to 7.02 percent across the globe and the use of Internet Explorer (Internet browser used on computers) has fell steeply from July 2010 to July 2011. This percentage has increased considerably in last two years as well. So, there is a large percentage of people using small screen mobile devices for accessing Internet as compared to the ones who still use traditional ways of accessing internet (through computers or laptops). The internet browsers on these mobile devices are specifically designed to handle the loading and display of an existing website without problems. These devices shrink the display size of the website to fit into the screen size of the device that is viewable area. Then users can navigate on the page and can zoom the particular area they want to see. Simple, so how does it create the need for a different type of website if viewing the regular websites is so easy? Well, if you only want to view one or two websites once in a while, its fine. But as soon as accessing internet from mobile becomes a regular activity, you start realizing how frustrating and tedious it can be to zoom in and out constantly in order to make the content readable, and then moving your fingers from left to right to be able to read the full sentence. It's really annoying and it placed the demand on the web developers and designers to develop more appropriate websites that can easily fit into the screen of a mobile device. Now, if there would be a single screen size, the things would have been easier. The web-developers and designers only had to design the websites to fit into that specific screen size, but, as we all know, that's not the case. Every mobile, tablet and smart phone makes ensures that their screen size is better than the other, and thus, we have numerous mobile phones in the market
  4. 4. 4 with varying screen sizes. So, now we need a design that can fit into every type of screen size appropriately in order to give the best user experience across every device. This is how the developers realized the need for developing Responsive web Designs. Responsive Web Design Responsive web designs have become one of the most popular web designing techniques today, as it is a flexible design which lets the website fit aptly into any screen size without affecting its contents. Ethan Marcotte, the man behind the term Responsive Web Design consolidated three existing web development techniques, namely media & media queries, flexible images and flexible grid layout in one unified approach to develop what we all know as Responsive Web Design. Some of the characteristics or terms with which one can identify a responsive web designs are flexible design, cross-device design, adaptive layout, liquid design, rubber layout, elastic layout and fluid design etc. However, a truly responsive design methodology is much more than making mere alterations in the layout of a website on the basis of viewport sizes (The viewing area on the screen of a mobile). It actually follows a completely opposite designing approach. Usually, web designers begin with a fixed sized desktop website design and then, scale it down and re-flow the content to make them appropriate for smaller viewports. But in responsive designing, the design for the smallest viewport is first designed and then it is progressively enhanced to fit into larger viewports. Briefly, a responsive web design is the way of presenting the web contents of a website in the most accessible manner, so that any viewport can access it and display it perfectly.
  5. 5. 5 Why should you choose Responsive web Design Now the question arises, whether responsive web design is the only technique that helps to develop web designs for smaller and varying screen sizes. Though there are many other ways, like mobile websites but in that scenario one has to maintain two versions of the website. One for computers and laptops, and other for mobiles. Also, the digital marketing, maintenance and every other task related with website doubles. Thus, it's not a feasible way and thus, responsive web designs seem to be the best solution for solving the problem related with varying screen sizes and introduction of newer computing & mobile devices. Educating the clients about the Responsive web designs The most difficult hurdle that a web design company may face before embarking on a responsive web design is to change the mindset of the client. Most of the people seeking web design India services often ask to transform the existing graphic designs into standards compliant CSS/ HTML and jQuery-based web pages. But, what most of the people do not understand that it is the user experience that is extremely significant than making a web design that can do well on all the browsers. Even, a general website will be able to fit itself in the browser of a mobile and in its viewport, but the user experience would not be very pleasant which may turn off a number of potential users. Thus, a web design company must educate its clients about the detailed aspects related with web designing to make them understand the imperativeness of a responsive web design in todays' mobile driven world. When should you use Responsive Web Design services? Well, Responsive Web Design services have become quite popular, but still, many wonder why do they need a responsive web design for their website when it's doing fine with a
  6. 6. 6 normal web design. Here are some prominent reasons that why should you opt for a Responsive web design:  It supports the largest growing marketplace of internet users across the globe.  It provides the most maintainable, fastest and cleanest code base.  It provides a subtly different and most appropriate user experience across different browsers and devices. However, if a large percentage of your website visitors use Internet Explorer 8 or lower, for accessing your website, then you must not indulge into developing your website with a responsive web design. Internet Explorer 8 and lower versions do not provide support to the CSS3 properties or HTML5 elements as standard, so it does not makes a lot of sense that you use your resources to develop a design which is primarily based on CSS3 and HTML5. Responsive Designing with HTML 5 and CSS3 A responsive web design can easily handle the changing viewports and gives the best possible user experience. But is it enough? No. let's go further. HTML5 offers an incredible set of features as compared to HTML4, and the meaningful semantic elements of HTML5 are helpful in forming the basis of our markup. Similarly, the media queries offered by CSS3 are one of essential ingredients for responsive web designs but some additional CSS3 modules can empower our web-designs with astounding levels of flexibility. For Responsive web designing, we do not use complicated JavaScript, instead we can use lean CSS3 gradients, transformations, animations, typography and shadows. Thus, emphasizing on responsive CSS3 and HTML5 powered web designs yields best results.
  7. 7. 7 HTML5 - Why should you opt for it? HTML5 places great emphasis on streamlining the required markup for creating a web page that validates to W3C standard and links all the required JavaScript, CSS and image files. As we know that our users will view the websites from their mobile screens, and might have internet connection with possibly limited bandwidth. So, the key features that we must target with Responsive web designs include making the website suitable for limited & varying viewports and developing it in a way that gets loaded in the fastest possible time. HTML5 helps in removing the superfluous mark up elements that aids in achieving the above mentioned targets. HTML5 offers an amazing set of benefits and features that can be utilized for making responsive designs even more effective. First of all, the new semantic elements of HTML5 help it to provide an extremely meaningful code to search engines.HTML5 also enables features like form submission, negating the requirement for the heavier JavaScript form processing. This helps in developing a responsive web design with a faster-loading and leaner code base. HTML5 saves both time and code. How CSS3 supports responsive web design Earlier, the web designs used to be table based and styling used to be intertwined with web content. Later, CSS (Cascading Style Sheets) were introduced for separating content from design. Though, web designers took some time to adapt to the new way of designing, the CSS-designing but by seeing what all could be achieved with CSS, it became quite popular. Today, CSS has become a standardized way for defining the presentational layer of a web page.
  8. 8. 8 The version of CSS that we are using currently is CSS 3 that uses CSS 2.1 specifications as its core. And, it would not be incorrect to say that CSS3 can solve a large number of everyday design problems. Moreover, CSS3 is perfect for responsive web designing. Earlier the web page enhancements that came under the domain of resource heavy JavaScript or Flash, can now be accomplished using CSS3 Transformations, as CSS3 makes the animation maintainable and lightweight, as compared to its heavier counterparts like Flash or JavaScript. The browsers which support the feature get the animations, while others simply show a static image in place of it. Media Queries and Responsive Web Designs A media query comprises of a media type and zero or more expressions which check for conditions pertaining to particular media features. The media features which can be used in media queries include colour, height and width. With the help of media queries, presentations in a web page can be customized to a particular range of output devices without making any changes to the content. At present CSS2 and HTML 4 support media dependent style sheets customized for various types of media. For example, a document may showcase sans-serif font when viewed on a screen and serifs font on printing. This implies that screen and printer are the two media types which have been defined for this content. Media queries get used when you are developing responsive designs and the media queries which are used most often include the ones that are related to device's screen width and device's viewport width. However, there are many other queries which can also be used during responsive designing. These include:  width - It refers to the viewport width
  9. 9. 9  height - It refers to viewport height  device-width - The width of the rendering surface (screen width of the device)  device-height - The height of the rendering surface (screen height of the device)  orientation - This capability checks the orientation of the device, that is, whether it is landscape or portrait in orientation.  aspect ratio - This is the ratio of width to the height of the device. If the screen's width is 4 and height is 3, then its aspect ratio would be written as 4/3.  device aspect ratio - This is the ratio of width to the height of the device's rendering surface and not of the viewport of the device.  color-index - It refers to the number of entries that are placed in the colour lookup table of the device.  color - It refers to the number of bits per colour component.  resolution - This capability is used for checking the print or screen resolution. It can measure resolution in DPI (Dots Per Inch) and DPCM (Dots Per Centi Meter).  monochrome - This capability tests the number of bits per pixel in a monochrome frame buffer.  grid - This capability checks and indicates whether a device is grid based or bitmap based.  scan - It checks for the presence of progressive or interlace features. All the above mentioned media queries can be prefixed with a minimum and maximum value in order to create ranges except for grid and scan. But media queries are only a part of solution Media queries perform exactly in the way they should perform, as they apply suitable styles depending upon the features of our device. But the problem with media queries is, they only
  10. 10. 10 cover a very short spectrum of viewports. This implies that we cannot only depend on media queries, but we need to use some more techniques in conjunction with media queries in order to develop perfectly responsive designs. Fluid layout Using only the media queries to change the design works perfectly fine if we have a specific target device and we are aware of its dimensions. But this strategy faces some severe limitations, including the fact that it is not completely future-proof. Currently, when we resize our viewport, the design of the webpage snaps at those points which the media queries intervene and then, the shape of the entire layout changes. However, it stays static till the time the next "viewport break-point" is reached. So, we need something which works better than this. This is actually more of an adaptive web design style than more of a responsive one. We need something more fluid, so that transformations occur more smoothly. Content comes first with Responsive web designs Though Responsive designs enable us to ensure the best viewing of website across various devices. Thus, designers always emphasize on developing designs that can retain as many features as possible across multiple platforms and viewports, but it is also imperative to mull over the order in which you want the things to appear on screen. For example, let's consider the main content and sidebar sections of our mark-up. Usually, sidebars are displayed before the main content but with Responsive designs, this should not be the case. Since, users are viewing content on their mobile screens, the view is limited and thus, when the website is being loaded it should first show the main content and then the sidebar. The reason is that if the main content is not loaded before the sidebar, the viewers will see the tangentially related content before the main content gets loaded.
  11. 11. 11 Summary In this ebook, we learned about what responsive designs are and which elements compose a responsive web design. Then, we learnt about how HTML5 and CSS3 are related to responsive web designing. In the last few sections, we learnt about CSS in detail and discussed media queries, how these are useful in responsive designs. We learnt how to include them in the CSS files and how they help in designing the responsive designs. However, we found out that media queries can only help us to achieve an adaptable web design which is not truly responsive. Thus, media queries are imperative in responsive designs but a fluid layout will help us to achieve the responsive web designs in a better manner. Follow Us at Twitter www.twitter.com/miraclestudios8 Follow Us on Google Plus https://plus.google.com/b/108107255832151841171/+MiracleStudiosIndia Catch Us on Facebook http://www.facebook.com/miraclestudios Thank you.

×