Category: Responsive Web Design
-
Responsive Web Design – Performance Enhancement
Treating performance as design improves the user experience. No matters how perfectly we have design the information architecture and a great user experience with everything just one click away. Usability is useless, if performance is slow. Based on the survey , almost half of the web users expect a site to load in 2 seconds,…
-
Mobile and Web strategy to launch a product
We are living in a technology changing world. Every year new technologies, new frameworks and new devices are launching. Users are accessing the web product with different devices. Now, web is not limited to desktop on our workstation. It is in our pocket with mobile, it is in our living area with smart TV, It…
-
Custom responsive grid with sass susy – grids on demand
While starting the responsive web development, first question pops up. Which grid framework to use? There are many grid framework to choose like bootstrap, foundation, 960 Grid System, Golden Grid System and many more. Are these grid framework flexible enough for modern designs? Class based grid frameworks are not flexible enough Bootstrap is one of…
-
SASS – Efficient use of Mixin and Placeholder
SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name. Beauty of the SASS a CSS preprocessor Writing a vanilla CSS is…
-
Meta tag – Configuring viewport in responsive web design
Desktop browser and mobile browser are not the same. There is no window, scrollbar, resizing option in the mobile browser. User flick, pinch and zoom in mobile browser, and these gestures are not there in the desktop browsers. Because of these interaction differences, viewport on the desktop and mobile are not same. Why viewport is…
-
Responsive Web Design – Pixels density and resolution
Any physical size of device cannot stop web from spreading its wings; be it a smart TV with bigger size or a smartphone in the pocket. Web is spreading all around, Though, physical size of the device is shrinking but resolution of these devices is increasing. Why? and how? High DPI and Retina Retina is…
-
Responsive Web Design – Viewports and device pixels ratio
Major technology changes have been seen in last few years. Smartphone and tablets are changing the way of internet usage and taking the web everywhere. Responsive web design (RWD) is around from some years now. Initially the focus in a RWD project was just to decide the different breakpoints – like small, medium and large…
-
Responsive web design and images – Optimized images for normal and retina display
Adaptive image is not only to fit the image in large and small devices; it’s about contextual optimized image for normal and retina display. Responsive web design (RWD) has different context, like high resolution and low resolution display, high bandwidth and low bandwidth connections, high memory and low memory devices, small and large display, portrait…
-
How to create retina-ready css based icons?
As a requirement comes up to create an icon, Photoshop or Illustrator pops-up immediately in mind. Making any changes in icon like changing style, size or color open the photoshop again and do the required changes. And if the required icon need to be used in a web apps for iPhone 4s and iPad 3,…
-
What’s good in Metro UI which can be used in responsive websites
Any new trend or new product in market always starts with some positive and negative face and if it is Microsoft product, majority of people cannot turn down to give it at least one try, that’s why Microsoft dare to make the drastic UI change named as Metro UI, which is being called new design…