Illuminating Screens

It is almost craved by every new client who desires a mobile version of their website. One design is for the laptop, another is for the iPhone, while the other for the iPad, netbook and Kindle and along with these, all the screen resolutions must also be compatible and this is practically essential of all.

Here at Indi IT Solutions, we will likely need to design for a number of additional inventions in the next five years.

We are quickly getting to the point of being unable to keep up with the endless new resolutions and devices in the field of Web design and development. Creating a website version for each of the resolution and new device would be impossible or least impractical for many websites.

View More Less

Introducing Responsive Web Design

The approach which suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation is what Responsive Web Design is.

It ensures that the users have a good viewing experience no matter what type of device they are using. As mobile device ownership has exploded and traditional PC sales have slowed, it is becoming increasingly important over the last few years. It is essential to make sure that your site is optimized for mobile by using responsive design with Google now prioritizing mobile-friendly sites in its search results algorithm.

A single website that adapts to any screen size so that it is as easy to use on mobile as it is on tablet and desktop with no pinching or horizontal scrolling required is what a responsive website is.

To make sure that it looks great on a mobile, tablet, and desktop or any other device, the design instinctively adapts to the device in which it being viewed on.

View More Less

Why do you need a responsive website?

It will not be easy to view your website by the 38 million smartphone users if it is not device friendly and this way you will lose your valuable customer.

According to Google Statistics:

  • If your site is not device-friendly then 60% of people will not be staying on your site.
  • A website which is friendly across every device around 67% of people is more likely to buy a product or use a service.
  • Google always rank a mobile-friendly website above the other non-mobile friendly website.

The following are some of the statistical results to check the average number of global users using the various devices that can really go through your site:

View More Less

Market research on Most Used Smart Phones screen size 2015-2018

5 in – 9.4% 5.7 in – 5.9%
5.1 in – 12.3% 5.5 in – 13.8%
4.7 in – 41.5% Others – 17.1%

Market research on Most Used Laptop screen resolution 2015-2018

Market research on Most Common Desktop Screen Resolution WorldWide

Market research on Most Common Tablet Screen Resolution WorldWide

Market research on Most Common Television Screen Resolution WorldWide

Why is a responsive website better than a mobile one?

  • Whatever devices in which the responsive websites are viewed on they work effectively and are available across every website pages.
  • To save your valuable seconds, a responsive website loads faster than that of a mobile site.
  • Websites that take more than 3 seconds to load, 40% of people abandon the site as per Google.
  • It is less time consuming and is more effective than a desktop and mobile website when it comes to a single responsive website.
M.Dot
  • Minimum of of two URLs

  • Slower initial load times due to redirect

  • Doesn’t support app-like features on mobile web

Responsive
  • One URL

  • Absence of proxy server results in faster performance

  • Doesn’t support app-like features on mobile web

The Concept of Responsive Web Design

We have a similar yet whole new idea as transplanting this discipline into web design is implemented. architects do not design a building for each group and size and type that passes through it so why should we create a custom Web Desing for each group of users?

web design should automatically adjust like the responsive architect. for each new category of users, it should not require countless custom-made solutions.

To accomplish this way a building would, we cannot use motion sensors and robotics. a more abstract way of thinking is required by responsive web design. fluid layouts, media queries, and scripts which can reformat web pages and mark up effortlessly as some ideas are already being practiced. responsive web design is a whole new way of thinking about design along with being adjustable screen resolutions and automatically resizable images.

View More Less

Adjusting the
Screen Resolution

There is varying screen resolutions, definitions, and orientations with more devices.each of these devices may be able to handle the variations in size., functionality and even color as new devices with new screen sizes are being developed each day. While still others even completely square, some are in landscapes and the others are in portrait. Many new decides are able to switch from portrait to landscape at the user’s whim as we know from the rising popularity of the iPhone, iPad, and advanced smartphones.

We also must consider the hundreds of different screen sizes in addition to designing for both landscape and portrait. Designing for each of them and making each design as flexible as necessary, it is possible to group them into major categories.

View More Less

Flexible everything

The only things that were flexible in design were the layout columns and the text a few years ago when flexible layouts were almost a luxury for the websites. When pushed enough even flexible structural elements broke a layout’s form as images could easily break layouts. Flexible designs could give or take a few hundred pixels but they often could not adjust from a large computer screen to a notebook as these designs were not as flexible as thought.

Now the things are made more flexible. We have workarounds so that the layouts never break as images can be automatically be adjusted. The solution gives us far more options while it is not a complete fix. For devices that switch from portrait orientation to landscape in an instant or for when the users switch from a large computer screen to an iPad, it is perfect.

There are a number of techniques for creating fluid images as creating fluid grids is fairly a common practice:

· Hiding and revealing portions of the images
· Creating sliding composite images>
· Foreground images that scale with the layout

It is not about plugging these features in and being done while from a technical perspective this is all easily possible.

Of the kind of thinking that makes responsive web design truly effective. A layout can become too narrow or too short to look right.

View More Less

Flexible Images

Working with images is one major problem that needs to be solved with responsive web design. to resize images proportionally, there are a number of techniques.

Every image will load in its original size unless the viewing area becomes narrower than the image’s original width as long as no other width-based image styles override this rule. When the 100% becomes narrower so does the image, as the maximum width of the image is set to 100% of the screen or the browser width.

Delivering the images at the maximum size in which they will be used at is what the idea behind the fluid images are. You allow the browser to resize the images are required while using CSS to guide their relative size as you do not declare the height and width in your code. to resize the images beautifully, this is a great and a simple technique.

A good use of width which is 100% would solve the problem neatly in an IE specific stylesheet as the max-width is not supported in the IE. The rendering is not as clear as it ought to be which is one more issue when an image is resized too small in some older browsers in Windows.

The download times should be the primary considerations while the above is a great quick fix and a good start to responsive images, image resolution and the download times. If the original image size is meant for the large devices, it could significantly slow the download times and take up space unnecessarily while resizing an image for mobile devices can be very simple.

View More Less

Responsive images of filament groups

This takes the issue into consideration and not only resizing the image proportionately but also shrinks the image resolution on the smaller devices so that very large images do not waste space unnecessarily on the smaller screens as this technique is presented by the Filament Group.

In modern browsers such as IE8+,Safari, Chrome, and Opera as well as mobile devices that use these same browsers, this technique is fully supported. As one would expect of a responsive image, except that both resolutions are downloaded together so that the end benefit of saving space with this technique is void as the older browsers and Firefox degrades nicely. and still resizes it.

View More Less

Stopping iPhone simulator image resizing

Working with images is one major problem that needs to be solved with responsive web design. to resize images proportionally, there are a number of techniques.

Every image will load in its original size unless the viewing area becomes narrower than the image’s original width as long as no other width-based image styles override this rule. When the 100% becomes narrower so does the image, as the maximum width of the image is set to 100% of the screen or the browser width.

Delivering the images at the maximum size in which they will be used at is what the idea behind the fluid images are. You allow the browser to resize the images are required while using CSS to guide their relative size as you do not declare the height and width in your code. to resize the images beautifully, this is a great and a simple technique.

A good use of width which is 100% would solve the problem neatly in an IE specific stylesheet as the max-width is not supported in the IE. The rendering is not as clear as it ought to be which is one more issue when an image is resized too small in some older browsers in Windows. The download times should be the primary considerations while the above is a great quick fix and a good start to responsive images, image resolution and the download times. If the original image size is meant for the large devices, it could significantly slow the download times and take up space unnecessarily while resizing an image for mobile devices can be very simple.

View More Less

Custom Layout Structure

We may want to change the layout altogether either through a separate style sheet or more efficiently through a CSS media query, for the extreme size changes. As most of the styles can remain the same while specifying style sheets can inherit these styles and move the elements around with floats, width, heights and so on as this does not have to be troublesome.


Showing or Hiding Content

By rearranging the elements as necessary to make everything fit as a screen gets smaller, it is possible to shrink things proportionally. BY making every piece of content from a large screen available on a smaller screen or a mobile device is not always the best answer as it is great that that is possible. For mobile environments, we have the best practices such as lists or rows instead of multiple columns, focused content, and simpler navigation.

On a wide range of platforms and screen sizes, responsive web design should not be just about how to create a flexible layout. The user being able to pick and choose the content is also what it should be.

View More Less

Techniques of Responsive Web Design

Responsive Data Tables

Here we reformat the table for better readability. Pie graph from the data is the other display. Adapting the table into a mini-graphic for the narrow screen is yet the other one here when the full table is displayed it does not interfere much with the content.

CSS Transitions and Media Queries

Here we use media queries to design responsive websites that adapt in the layout according to browser width, and you can constantly resize your browser to see how the website performs.

Responsive Navigation Menus: Converting a Menu to a Dropdown for Smaller Screens

Here we look into converting a regular row of links into a dropdown menu when the browser window is narrowed down. Users will get an interface to select an option which is nice and big and easy to choose when they are on a small screen and clicks on the dropdown. This is much better than displaying the tiny link.

Touchscreens vs. Cursors

They are becoming increasingly popular when it comes to touchscreens. Many laptops and desktops on the market can also have touchscreen capability as right now touchscreens are mainly on smaller devices.

The two have different capabilities as the touchscreens come with different design guidelines than purely cursor-based interaction. It does not take a lot of effort for making a design which works for both. Once the user touches the screen they click as touchscreens have no capability to display CSS hovers. They should be considered as an additional feature only for the cursor-based devices so the complete reliability should not be on CSS hovers for link definitions.