Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My Suggestion How To Implement Responsive Web Design?

Discussion in 'General eCommerce Discussions' started by echoinnovateit, Oct 11, 2018.

  1. echoinnovateit

    White Belt

    Joined:
    Sep 20, 2018
    Messages:
    14
    Ratings:
    +1 / -0
    A current study found a quarter of all Americans use mobile devices to access the web. One out of every five people own a smartphone and over half use it to surf the internet.

    If your website doesn’t read well on those devices, you’re losing a huge amount of mobile users. It’s time to grip responsive design. Getting started can get complex, but here are some tips to help.

    1. Go Mobile First
    Before you strategy your design for desktop or laptop screens, think about the user experience on a mobile device. A lot of designers are embracing the mobile first movement. Why? Because mobile is becoming more applicable than desktop.

    Around 1 in every 7 people on earth use their mobile devices to access the internet. Focus on how users interact with your website over their mobile phones first. Then construct out your design for larger screen sizes.

    2. Get Familiar with Media Queries

    Media queries are a feature in CSS3 that allow content to respond to different circumstances on a particular device. Media demands check for a device’s resolution, height, width and orientation. Then it uses this information to decide which CSS rules to apply. Media queries are the driving force behind responsive design.

    3. Understand What Mobile Means for Your Users

    People interact with websites in a different way over a smartphone than they do over a desktop. Use analytics to figure out why a user is visiting your website on their phone. They may need to get quick information via the search bar. If that’s common among your users, then make your search bar highly noticeable and always present.

    4. Use Percentages
    One of the difficult parts of responsive design is implementing a fluid grid. A fluid grid works together with media queries to display content on different viewports.

    Instead of designing breakpoints for every conceivable viewport, you set a maximum layout size. From there, you define the widths and height by proportion, not pixel. This allows the site to relocate the layout based on percentages.

    4. The Need for Speed
    One of the disadvantages of responsive design is slow loading times. In fact, a current study shows that the majority (48%) of responsive sites load anywhere from 4 to 8 seconds. That length of load time was standard in 1997, but in 2014, 64% of smartphone users expect a site to load in under 4 seconds.

    The key reason behind a slow site are non-optimized images. Don’t let those images drag your responsiveness down. Quickly scale down large images with tools like Adaptive Images and TinyPNG.

    5. Eliminate the Unnecessary
    Get rid of extreme elements, not only for your user experience, but also for website’s speed. A website weighed down by too many elements will not be satisfying to use or to look at. Use a program like GZIP for compression.

    6. to Hamburger or Not to Hamburger

    The Hamburger icon – otherwise known as the three lines that show a hidden menu – is the source of aggressive discussion. Some people hate it, some people love it, but what is the best practice?

    For responsive design, the best practice is always a matter of suitability. If a user must always tap the icon to see menu options, it becomes exhausting. If you make the most popular menu items visible you can save users from frustration. Keep less popular links in the hamburger menu navigation.

    7.Make it Readable

    Don’t make your users uneven to read or pinch-to-zoom. Make your text size large sufficient to read from a smaller screen. I recommend a text size of 16 px, 1 em, or 12 pt. Here’s a useful change guide for px to em. When designing headlines, use a tool like FitText to create responsive text.

    8.Use the Right Button Size

    On mobile devices, real estate is premium. Avoid small button sizes. Make sure your buttons are at least 44 x 44 px for a finger-friendly design. Another handy tip is to use padding instead of margins. Padding increases the trappable area, but margins do not. Margins increase the white space around the button.

    9.Design for Screen Orientation

    According to statistics, landscape alignment wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched.

    Conclusion
    Responsive design makes it easier for all users to view your website no matter what device they use. These are the basics that will help you get started with responsive design. What are some other best practices that websites should follow to give users a better mobile experience?Echo Innovate IT - software development company in USA offer a service to develop responsive website design
     
  2. Zeno91

    White Belt

    Joined:
    Sep 27, 2018
    Messages:
    53
    Ratings:
    +0 / -0
    Thanks for the info. What would you advice for those who have a separate mobile version of the site?
     

Share This Page