Download to read offline
Uploaded byChirag Vyas
9 responsive design mistakes that drive people nuts
The document outlines nine common mistakes made in responsive web design that can lead to user frustration and loss of visitors. These include issues with background images, navigation, the handling of content, over-reliance on devices, resource management, compatibility with older browsers, excessive JavaScript usage, unoptimized PNG files, and the use of separate mobile URLs. Addressing these mistakes is crucial for creating effective and user-friendly mobile experiences.
9 responsive design mistakes that drive people nuts
- 1. 9 Responsive DesignMistakes That Drive People Nuts www.climbersoft.com
- 2. 9 Responsive DesignMistakes That Drive People Nuts www.climbersoft.comwww.climbersoft.com INDEX •Introduction •Factor (1) Backgroundimagesand icons (2) Navigation (3) Hidingcontentfromusers (4) Trustingthedevicetoomuch (5) Usingtoomany resources (6) ForgettingaboutolderIE version (7) OverusingJS libraries (8) PNGs (9) Separate Mobile URLs • Thank you
- 3. 9 Responsive DesignMistakes That Drive People Nuts www.climbersoft.comwww.climbersoft.com INTRODUCTION Responsive designis at its heelsand most websiteshave alreadyembracedit. As more browsing originateson mobiles,creatingrichuserexperiencesfor mobile visitorsis crucialthese days. While designing a responsive website,however,developersusuallymake a few common mistakes,whichyieldthemnothing butlotsof lostvisitors.
- 4. www.climbersoft.com FACTOR 1 Background images and icons Flexibleimages render beautiful graphics when viewed on a high pixel density device. While designing a responsive site, designers must also ensure that images don’t look blurry and they are scaled accurately for a nice looking appeal.
- 5. www.climbersoft.com FACTOR 2 Navigation Designersneedto putall their effortsto builda navigation that is easyand doesnot force people to guess.Youshouldspendsome time understandingyouruserbehavior as wellas yourwebsite architecture,whichtogetherdefinethe whole purpose of a navigation. Your navigationshouldbe builtaccordingto both your visitors’ behavior and the type of website youare running.
- 6. www.climbersoft.com FACTOR 3 Hidingcontent from users Developersmustkeepoptimizationin their mindand getrid of unwantedelementsto givemobile usersaccessto all necessary information.As a result,focuson a websitestructureand prioritize elementsthat can be renderedaccordingly.
- 7. www.climbersoft.com FACTOR 4 Trusting the device toomuch This ambiguityoftendrivesdesignersto come to the conclusion which failsto fetch themthe expectedresults.Therefore,it is crucial to giveyourcontent enoughfreedomto define logical breakpoints itself so that it looksflawlessregardlessof the device being usedto viewit.
- 8. www.climbersoft.com FACTOR 5 Using toomany resources Overburdening a responsive design with unnecessaryresources can drasticallyslowdown websiteperformance and its responding time.Since responsive designappliesto trafficfrom bothdesktopand mobile devices,designersneedto put extra effortsto make sureonlythemostneededresourcesare loadedto their visitorson bothmobile as well as desktopdevices.
- 9. www.climbersoft.com FACTOR 6 Forgetting aboutolder IE version Responsive websitesare not compatible with theolderversionsof IE because theydon’tprovide supportfor CSS3media queries.In thisscenario,developerscan invest theirtime to make their website performsmoothlyon olderIEs acrossa varietyof mobile devices. Designerscan modifytheirpagelayout after carefullyexamining the size of the browserwindow,with the helpof JavaScript.
- 10. www.climbersoft.com FACTOR 7 Overusing JS libraries Youmaybelosing mobile visitorsif yourresponsive webdesign displaystoomanyJavaScript librariessimultaneously.Overusing JS librariescan sometimescrash a browser while loadinga site or createa website that renderscontent slowlyfor the visitor.
- 11. www.climbersoft.com FACTOR 8 PNGs UnoptimizedPNG imagescanhamperthe overallfunctioning of a website,as theyconsume a lotof space thusslowing down a website. That is why it is important to optimize and reduce the size of PNG file so that yourwebsiteloadthemfaster.Thoughit slightlyaffectsyour image quality,but it woulddefinitelyprevent you fromhaving a website that takesagesto respond.
- 12. www.climbersoft.com FACTOR 9 Separate MobileURLs havingaseparateURLfor mobile and desktopseemsto be more logical strategy.Following thisapproach designersare able to constructa mobile site withsmallerpagesthat are betterviewedon smalldevices.Theyare alsocateredmore effectivelyacrossdifferent platforms.