Category Archives: Responsive website

Diwali Celebration at Supertron Infotech Pvt. Ltd.

diwali 2019

Diwali 2019

 

Dazzling earthen lamps, vivid lights, finger-licking foods and firing crackers are the real gems in Diwali celebration! Diwali, being the festival of fun, gaiety and jollification is a sheer time to get a taste of Indian culture. Have you ever thought of celebrating Diwali festivities at work? Sounds dull? How about making diwali celebration, a way interesting, unlike daily routine at work

We at Supertron Infotech Pvt Ltd celebrated a festival of lights with style. We organized work space decoration, creativity and power of innovation in our employees. In our own small way, we organized a Diwali event, which we celebrated in a very traditional way. The day initiated with office decoration with mesmerizing colors of Rangoli, perfume of flowers and sparkle of lights. It was heartening to see all employees dressed in traditional attires, brimming with happiness and preparing themselves for this occasion. We have tradition of performing Laxmi Ganesh Puja at our premises which was attended by every employee to take ashirbad from God for our future progress.

After Puja, there was an arrangement of lunch which turned out to be super excited for all of us. We all were excited to get to know what was there within that wrapping paper and was waiting anxiously for it. Lastly, our HR manager has handed over the wrapped gifts to all of us which made our Diwali more special.

Celebrating Diwali with Supertron Infotech Pvt Ltd was fun and exciting and love to see more such occasions in our premises. HAPPY DIWALI TO ALL!!

 

Hiring the Best Development Team for Better Output

Read more »

How to Design your Responsive Website

Responsive Web Development

With mobile devices becoming the primary way people experience the web, responsive design is more important than ever. But responsive design doesn’t just create a consistent mobile experience. It’s also changed the way we design for all screens, encouraging simpler layouts and more streamlined experiences. Whether you’re doing a responsive redesign or starting from scratch, these tips and tricks will help you along the way.

  • Find out the best navigation

            Your design needs to work within the limitations of smaller screens.  Simplify your navigational choices as much as you can and use icons paired with text, in-page links, collapsible menus, and dropdowns to get people where they need to go. Remember that hidden navigational choices are roughly half as discoverable as apparent ones, and lengthen time to complete tasks, so do your best to make access to core pages visually obvious.

  • Visualize content organization before you design

            Content and design flourish when developed in tandem. Content organization is more than just copying and pasting blocks of text to see where they’ll fit on a page. Your content is the story you’re trying to tell your audience.

  • Use only the words you need

      With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward. Don’t take content direct from desktop. Consolidate copy, use bullet points and other structural styles, and trim the fat wherever you can.

  • Typography is very much important on smaller screens

      Make sure you scale font size, line-height, and width to best fit differing screen sizes. When you’re designing for mobile device, remember that a huge font may push the important content you want someone to read further down on a page. So consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or use color to differentiate content sections from other elements on the page.

  • Embrace negative space

You need to take a minimalistic approach to content and navigation when creating a responsive design — but you also don’t want to leave anything vital out. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don’t want anyone to miss.

  • Make your page fast by using responsive images

      One of the problems people run into with responsive design is that while images visually scale on smaller devices, they’re still 3MB in size and slow load times to a crawl. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code.

  • Recognise the power of Flexbox  within your layouts

      Flexbox is a CSS3 layout module that makes sure your layout is fluidly responsive to different devices. Fairly simple in principle, but it allows a powerful level of flexibility.

Checkout some of the best responsive websites here.

3 Responsive Design Mistakes that are Needed to be Avoided Immediately

With the release of the Mobile-friendly Update just a couple of weeks back, Google has made its intentions pretty clear! The Search Engine Giant is not going to tolerate an unsatisfactory mobile surfing experience anymore. And this is reason enough for web designers to buckle up, review the responsive design rule-book, and get everything done the right way!

In the last couple of months, I’ve come across numerous desktop websites and have reopened them in mobile devices to check their responsiveness. While most of the elements were working fine, I did notice three common blunders that will not evade Google’s eyes for long.

So what are these common responsive design blunders that are needed to be stopped right now?

No.1: Distortion of Elements

Responsive element distortion

Apart from quality, the one other factor that makes a content readable is its hierarchy. When I was viewing desktop websites on devices with smaller screen sizes, column layouts were behaving like rows in most cases… and as a result, the hierarchy was getting distorted.

The solution is pretty simple: web designers need to explicitly set the padding, height and width of every element to keep it in position. As an added precaution, designers can also set margins to keep them in place.

No.2: Images with Fixed Width

Fixed width images

An image with fixed width is great to view in desktop websites. When the website is viewed on smaller screens, however, the image is pushed off the screen and the user has to scroll ‘right to left’ in order to see the whole image.

Living at a time when something as convenient as Bootstrap is available, there is absolutely no need to keep an image width fixed. The Bootstrap framework allows designers to use a responsive image class. Or else, you can simply use relative units to set the width.

No.3: Wrapping the Navigation bar

Wrapping menus

This is perhaps the most common responsive design mistake in recent times. As a ideal scenario, the navigation bar of a responsive website becomes more compact when viewed on a smaller screen. And I’ve been seeing innumerable cases where the single-line navigational bar that “wraps” or breaks into a two-line navigational bar.

The first solution is a rather basic one. Designers can try reducing the number of items on the bar and placing them as sub-categories. The second, and more viable, option is changing the break point to a lower value. In this way, wrapping of a navigational bar no longer depends on the device size.

As these are the 3 most commonly encountered responsive design mistakes, web designers must waste no time in fixing these blunders if they are getting unpleasant reviews from mobile visitors.