--- title: 5 Must-Have Items to Incorporate in Your Responsive Web Design description: "By: Ron Hadler, Red Door Interactive According to a recent report released by Global Web Index, 91 ..." image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-19-54-9734-PM-Apr-10-2023-01-51-46-4347-PM-Apr-25-2023-03-40-46-2328-AM-May-01-2023-10-18-04-6811-PM.png --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # 5 Must-Have Items to Incorporate in Your Responsive Web Design ![Peter Devereaux](https://www.websitemagazine.com/hubfs/Peter_Devereaux.png) [by Peter Devereaux](https://www.websitemagazine.com/web-design/author/peter-devereaux) 30 Apr, 2015 - - - [mailto:?Body=https://www.websitemagazine.com/web-design/5-items-to-incorporate-in-your-responsive-web-design](mailto:?Body=https://www.websitemagazine.com/web-design/5-items-to-incorporate-in-your-responsive-web-design) - Link Copied! ![5 Must-Have Items to Incorporate in Your Responsive Web Design](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-19-54-9734-PM-Apr-10-2023-01-51-46-4347-PM-Apr-25-2023-03-40-46-2328-AM-May-01-2023-10-18-04-6811-PM.png) By: Ron Hadler, [Red Door Interactive](https://www.reddoor.biz/)   According to a [recent report](https://www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone) released by Global Web Index, 91 percent of adult Internet users own a PC/laptop, 47 percent have a tablet and 80 percent own a smartphone. These numbers reiterate the importance of companies providing experiences across multiple devices. With more website views occurring from mobile devices, the emphasis on responsive design is crucial now more than ever.    Here are five items to incorporate in your responsive Web design.    ### 1. Web components. Halfway into 2015, Web professionals have likely noticed the rise of Web components in their vocabulary and an evolution of Web design. For those unfamiliar, Web components are tiny Web applications encapsulated in a custom HTML tag that delivers functionality to a Web page. An example is a graphical date picker Web component that can be inserted into a page using a custom element. There are hundreds of date pickers already written and available as jQuery plugins, but they are not truly encapsulated and can cause conflicts with other jQuery plugins. Web components are intended to be pluggable functionality for Web pages that work as intended. Just like having responsive design incorporated. There are numerous parts to choose from on Web component websites, including [customelements.io](https://customelements.io/), [basic Web components](https://github.com/basic-web-components/components-dev/wiki) and [Google's polymer project](https://www.polymer-project.org/0.5/).   [![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/custom-elements-3-1-1-1.png?width=450&height=97&name=custom-elements-3-1-1-1.png)](https://customelements.io/)   ### 2. Framework. It's important to leverage the smart thinking and experience that went into the development of a responsive design framework. Two well-known frameworks are [Bootstrap](https://getbootstrap.com/) (see sites built with Bootstrap below) and [Foundation](https://foundation.zurb.com/). Both of these can get the job done and prevent hundreds of hours of trial and error. In addition, they help with a wide variety of tasks, including allowing marketers to easily scaffold wireframes in the framework, offering grid templates and object libraries for Photoshop, enabling for quick UI creation and permitting a faster implementation through solid code and prebuilt components. The Foundation framework is slightly ahead of Bootstrap in its conversion to using ems, rems and percent for all widths in version 5, but Bootstrap 4 will address that issue.   [![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/built-with-bootstrap-3-1-1-1.png?width=450&height=95&name=built-with-bootstrap-3-1-1-1.png)](https://getbootstrap.com/)   ### 3. Images. The HTML5 Picture element allows for loading the appropriate image for a device. The picture element is not fully supported across all browsers but the [PictureFill](https://github.com/scottjehl/picturefill) library allows developers to take advantage of this technology today. It's just as easy as adding additional sources on an   element.   ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/picture-fill-screenshot-3-1-1-1.png?width=450&height=116&name=picture-fill-screenshot-3-1-1-1.png)   ### 4. Font icons. It would be in mobile marketers' best interests to take advantage of font icons in their design and implementation. They are graphical icons that are fonts, which means it's very easy to change the attributes of one's own icon via CSS for size, color shadows or transparency. Font icon choices are growing daily and there are numerous [collections](https://css-tricks.com/flat-icons-icon-fonts/) of both free and paid options.   [![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/symbolset-icons-3-1-1-1.png?width=450&height=122&name=symbolset-icons-3-1-1-1.png)](https://symbolset.com/icons)   ### 5. Performance. It's important to keep in mind that images are one of the biggest performance issues. The previously mentioned Picture element and PictureFill solutions will ensure business professionals do not download desktop-size images for a smartphone using 3G connectivity. In addition, planning for performance means writing requirements for how fast a page should load. Page load times can be broken down into the size of the page and the number of requests a page makes. Stick to the requirements and make the tough decisions so that performance is a priority. Lastly, test often on as many real devices as possible. Emulation will only get one so far.   [![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/performance-screenshots-3-1-1-1.png?width=450&height=60&name=performance-screenshots-3-1-1-1.png)](https://www.webpagetest.org/)   Unfortunately, there are numerous websites that are poorly designed or fall short for responsive design. However, there are mobile marketing teams that are doing this well. For instance, [The UK Government's site](https://www.gov.uk/) deals with a significant amount of content, but does so simply and with a different take on delivering those thousands of pages in a easy to find way.   About the author: Ron Hadler is Director of Marketing Technology at [Red Door Interactive](https://www.reddoor.biz/), a data-driven advertising agency that delivers the right message to the right targets in all the right places regardless of media. Red Door holds more than a decade of expertise with a client list that includes Bosch & Thermador, Rubio's Restaurants, Inc., and Univision. E-mail him at [rhadler@reddoor.biz](mailto:rhadler@reddoor.biz).   ![Peter Devereaux](https://www.websitemagazine.com/hubfs/Peter_Devereaux.png) [Peter Devereaux](https://www.websitemagazine.com/web-design/author/peter-devereaux) As the Editor-in-Chief of Website Magazine and President of Website Services, Peter has established himself as a prominent figure in the digital marketing industry. With a wealth of experience and knowledge, Peter has been a driving force in shaping the landscape of digital marketing. His leadership in creating innovative and targeted marketing campaigns has helped numerous businesses achieve their revenue growth goals. Under his direction, Website Magazine has become a trusted source of information and insights for digital marketers worldwide. As President of Website Services, Peter oversees a team of talented professionals who specialize in SEO/SEM, email marketing, social media, and digital advertising. Through his hands-on approach, he ensures that his team delivers exceptional results to their clients. With a passion for digital marketing, Peter is committed to staying up-to-date with the latest industry trends and technologies, making him a sought-after thought leader in the field. - - - - - [mailto:peter.devereaux@websitemagazine.com](mailto:peter.devereaux@websitemagazine.com) #### Popular Post ### [6 Sexy Web Design Agency Websites ![6 Sexy Web Design Agency Websites](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-19-54-9734-PM-Apr-10-2023-01-58-57-4342-PM-Apr-25-2023-03-47-11-5390-AM-May-01-2023-10-24-02-6643-PM.png)](https://www.websitemagazine.com/web-design/6-sexy-web-design-agency-websites) ### [Six User Testing Questions to Ask While Navigating Website Redesigns ![Six User Testing Questions to Ask While Navigating Website Redesigns](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/question-mark483bf98ec5e163acbc5dff0000ff1aaa-3-1-1-1.png)](https://www.websitemagazine.com/web-design/six-user-testing-questions-to-ask-while-navigating-website-redesigns) ### [The Most Popular Fonts of 2015 ![The Most Popular Fonts of 2015](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/serifshot-3-1-1-1.jpg)](https://www.websitemagazine.com/web-design/the-most-popular-fonts) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Web Design [![The Vertical Split Screen Design Trend](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-16-08-6449-PM-Apr-10-2023-02-12-54-4429-PM-Apr-25-2023-04-00-11-0245-AM-May-01-2023-10-36-44-2646-PM.png) The Vertical Split Screen Design Trend](https://www.websitemagazine.com/web-design/slicing-dicing-the-split-stacked-screens-trend) [![Six User Testing Questions to Ask While Navigating Website Redesigns](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/question-mark483bf98ec5e163acbc5dff0000ff1aaa-3-1-1-1.png) Six User Testing Questions to Ask While Navigating Website Redesigns](https://www.websitemagazine.com/web-design/six-user-testing-questions-to-ask-while-navigating-website-redesigns) [![Design for Conversion: Apply the Von Restorff Effect](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-53117-Jan-23-2023-02-22-47-9807-PM-1-1-1.jpg) Design for Conversion: Apply the Von Restorff Effect](https://www.websitemagazine.com/web-design/design-for-conversion-apply-the-von-restorff-effect) [![Why Modern Web Design Is No More: The New Era of 'Product Design'](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-24-25-7392-PM-Apr-10-2023-02-13-05-1129-PM-Apr-25-2023-04-00-33-0074-AM-May-01-2023-10-36-52-3196-PM.png) Why Modern Web Design Is No More: The New Era of 'Product Design'](https://www.websitemagazine.com/web-design/why-modern-web-design-is-no-more-the-new-era-of-product-design) [![Before and After: Transforming Email Design with the 3 P's](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-16-08-6449-PM-Apr-10-2023-02-12-54-4429-PM-Apr-25-2023-04-00-11-0245-AM-May-01-2023-10-36-44-2646-PM.png) Before and After: Transforming Email Design with the 3 P's](https://www.websitemagazine.com/web-design/before-and-after-transforming-email-design-with-the-3-p-s) [![5 Fab, Fresh & Free Animation Libraries](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-16-08-6449-PM-Apr-10-2023-02-12-54-4429-PM-Apr-25-2023-04-00-11-0245-AM-May-01-2023-10-36-44-2646-PM.png) 5 Fab, Fresh & Free Animation Libraries](https://www.websitemagazine.com/web-design/5-fab-fresh-free-animation-libraries) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Peter Devereaux", "url" : "https://www.websitemagazine.com/web-design/author/peter-devereaux" }, "dateModified" : "2023-05-01T22:19:33.625Z", "datePublished" : "2015-04-30T05:00:00.000Z", "headline" : "5 Must-Have Items to Incorporate in Your Responsive Web Design", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-19-54-9734-PM-Apr-10-2023-01-51-46-4347-PM-Apr-25-2023-03-40-46-2328-AM-May-01-2023-10-18-04-6811-PM.png" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/web-design/5-items-to-incorporate-in-your-responsive-web-design", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "Peter Devereaux" } ], "headline" : "5 Must-Have Items to Incorporate in Your Responsive Web Design", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```