Over a million developers have joined DZone.

Guide for Responsive Web design

· Java Zone

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

Innovation and modernization has created new benchmark in the world of internet. With emergence of smart phones and tablets, the entire internet arena is now in the hands of the customers and they surf the internet with these miraculous smart phones.

As customers are heavily resorting to cell phones to surf the internet the web developers have tried designing the sites in such a manner that the users get perfect user experience even in the small platform.

Here comes the need and incorporation of Responsive web designs that gets adjusted to all the platforms perfectly. It is a state of art technique that aids in building websites that work on mobile devices, tablets and desktop screens. 


Responsive websites involves three main principles:

  • Fluid grids: Normally websites are build up in terms of pixels so the appearance of the site was totally dependent on the size of the platform say the site may appear large on television and small on mobiles. So responsive websites are built up with relative units like percentages instead of pixels. So that the appearance of the site changes in tandem to the platform wherein the site is surfed.
  • Fluid images: Fluid images are used as they are able to shrink in tune to the configuration of the grid and this is done with a single line of CSS code. Incorporating this code, the browser gets automatic intimation about that the images should be stretched as large as pixel value only.
  • Media queries: These are CSS technology that are used in the browsers for several years and form vital component of responsive designs. Responsive sites define their breakpoints through a series of media queries.

Other guidelines that must be kept in mind are:

  1. Focus on mobiles: Design the website keeping in mind the idea of using mobile first. This idea enables to design the site in such a manner that it delivers great smart phone experience to the user at first and then it works on tablets, desktops etc.
  2. User experience: Great user experience should be the foremost criteria. The sites should be designed in such a manner that they are easily accessible in all the platforms whether it is small or big. Web developers should go in for more complex view of the web user and architect out of the box ways to surface the content.
  3. No to Flash: Flash is not compatible with mobiles and thus it is not optimized for its use. Using flash for designing site to be accessed via mobiles can harm the phones as the software is too buggy and can crash the whole device.
  4. Usage of HTML5 powered media: With usage of HTML5, CSS3 and JavaScript one can mix match video, audio, animation and 3D in designing aspect. So no to browser plugins and yes to interesting goodies like HTML5 video and audio player, CSS3 animation etc.
  5. Usage of HTML5 element: Incorporation of new HTML5 creates comparable type of functionality for images and enables to perform checks on size of viewpoint and pixel density of the device. Webrex technologies

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:
html5 ,responsive design ,css ,javascript ,html

Published at DZone with permission of Sandeep Kumar. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}