Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Sep 28 2012

    Responsive design for a multi-platform and multi-browser digital world

    Websites designed from responsive design are the latest in development standards and quality. A responsive design allows the user to have a response to his/her media and other queries automatically. Under this approach, the design would respond to the users’ behavior and environment from screen size, platform and orientation. The responsive designs would need an abstract way of thinking and where this technology must not essentially require countless custom solutions for different user categories.  Fluid layouts and media queries provide an automatic markup and reformats for web pages design. We would discuss few facets that are essential to responsive design.

    HTML5 development

    From the development of webpage design using HTML5 approach, both Progressive enhancements and Graceful degradation can include better interactive options for website designs. Progressive enhancements under HTML5 have advanced features for browser integration and one must be careful using the design standards.

    Graceful degradation approach includes using advanced features with the supported browser and then adding these along with patches or fixes such that the older browsers display and function more correctly. The fix used most commonly is the browser specific style sheets.

    Layout design

    The basic standard for layout designs include 960pixels wide desktop webpages. CSS3 media queries are the best way to manage a responsive layout design. Using a 960 pixel wide design with a viewport Meta tag. Tag on the HTML page tells the browser to scale the content for a small screen.

    A percentage layout is easier, for it allows the design to adjust to different screen sizes. An individual designer needs to be careful as he would have to apply with a changed element size on the pages as screen size shrinks or expands. Given multiple text areas, images and tables for webpages increases the combination that is as yet difficult. A stable container allows cross browsing compatibility with a layout across browsers and other screen resolutions. Different browsers would take care of these layout elements as having a perfect layout for all sizes and browsers would imply clutter. Thus the percentage layout for all screens and layouts is even more complex.

    Scaling

    Webpage assets like text, images, media and html elements can be scaled to  layout in their size for different interfaces and devices. Scaling the fonts can be easily achieved with the help of CSS. Scaling the non-text assets is largely more complex. CSS does the job of sizing HTML assets well but for media and images the designer requires server side codes to scale them for efficient bandwidth use and cross-device scaling of assets.

    Web form designs

    Creating forms require using watermarks for indicating the field name rather than a tag saving the screen to have to write both below and above field name. For field validations, JavaScript and server side validation can be used for every field.  Max length attribute can also be included for any text box. It is important to enter field information as it develops the web form designs.

    Modal dialogs

    These elements focus the user to have a clear indication of what is accomplished next. These help the user by removing distractions to perform their action more effectively.

    Conclusion

    Responsive design for website development is the creative new technology and it allows a designer to include a number of additional features. These features allow website to respond to the user queries automatically. A fluid and flexible layout design from CSS3, HTML, scaling, form design and modal dialogs are the tools from where responsive designs can be nurtured. Mobile version of website, for all resolutions and devices are some of the advantage that a user gets from using responsive design.

    Posted by Charu Garg Posted in: web standards Comments: 0