{"id":14466,"date":"2012-07-27T21:01:42","date_gmt":"2012-07-27T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14466"},"modified":"2024-01-31T18:31:54","modified_gmt":"2024-01-31T10:31:54","slug":"responsive-web-tutorials","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/","title":{"rendered":"30 Useful Responsive Web Design Tutorials"},"content":{"rendered":"

As we conclude our \"Responsive Web Design week\"<\/strong>, this final post of the series is dedicated to enhancing your skills in creating web designs that adapt seamlessly across various devices. We\u2019re excited to showcase 30 Responsive Web Design Tutorials<\/strong> from around the web.<\/p>\n

While this isn\u2019t an all-encompassing list, it\u2019s a great starting point for understanding the fundamentals of crafting websites that accommodate all screen sizes.<\/p>\n

\n

Creating a User-Friendly Responsive Website Menu<\/a><\/h3>\n

By: Thoriq Firdaus<\/p>\n

Discover how to build your own responsive website navigation in this guide. A crucial element of any website is its navigational ease, allowing visitors to smoothly transition between different sections. This tutorial will guide you through using CSS3 to create a navigation that\u2019s both efficient and responsive.<\/p>\n

\"Tutorial<\/figure>\n
\n

Designing a Responsive Online Resume<\/a><\/h3>\n

By: Jake Rocheleau<\/p>\n

For web professionals, an online resume is a vital tool. Why not elevate it by making it responsive? This not only makes it more accessible to employers and clients on any device but also serves as a practical showcase of your development skills. Learn how to transform your resume into a dynamic, responsive portfolio.<\/p>\n

\"Guide<\/figure>\n
\n

Mastering Responsive Design: A Guide for Web Developers<\/a><\/h3>\n

By: freeCodeCamp.org<\/p>\n

This guide dives deep into the core aspects of responsive web design, underscoring the significance of a mobile-first approach. It unpacks vital concepts such as CSS units, the basics of Flexbox, and the essentials of media queries. Featured as a segment in the comprehensive Scrimba course \u2018The Responsive Web Design Bootcamp\u2019, it includes hands-on exercises for crafting a fully responsive 3-page website.<\/p>\n

The guide offers in-depth insights into the utilization of various CSS units, applying Flexbox for layout structuring, and employing media queries for diverse screen sizes, culminating in a solid grasp of responsive web design techniques.<\/p>\n

\"Comprehensive<\/figure>\n
\n

Auto-Layout: Unveiling Stacks \u2013 Bringing Flexbox to Sketch<\/a><\/h3>\n

By: Anima App\u2019s medium blog<\/p>\n

Auto-Layout introduces Stacks, a transformative feature in Sketch that mimics Flexbox, revolutionizing responsive layout design. This innovative tool enables designers to effortlessly work with Columns, Rows, and Grids, significantly boosting layout consistency and clarity. Stacks, akin to a simplified Flexbox, dismisses the need for CSS in browser-based designs, enhancing accessibility.<\/p>\n

This article details the Stacks feature, its functionalities, and its impact on the design workflow. It provides insights into creating interactive, high-fidelity prototypes in Sketch, representing a major stride in enabling designers to take complete control of their design process and fostering collaboration between design and engineering teams.<\/p>\n

\"Innovative<\/figure>\n
\n

Creating Responsive Design Guides in Adobe XD<\/a><\/h3>\n

By: Web Design Ledger<\/p>\n

This tutorial from Web Design Ledger is a comprehensive guide on crafting responsive design guides in Adobe Experience Design CC (Adobe XD). Starting from the basics of document creation, it walks you through the entire design process.<\/p>\n

Key steps include forming shapes to denote site width and margins, utilizing the Repeat Grid tool, and fine-tuning the opacity of design components. An indispensable resource for designers aiming to create adaptable websites, this tutorial offers actionable tips and strategies to ensure that designs fluidly adjust to different devices. It\u2019s an excellent resource for those keen to refine their Adobe XD and responsive web design skills.<\/p>\n

\"Guide<\/figure>\n
\n

Exploring Sticky Footer Solutions: Five Effective Techniques<\/a><\/h3>\n

By: CSS-Tricks<\/p>\n

This article from CSS-Tricks offers an insightful exploration of five distinct methods for crafting a sticky footer \u2013 a footer that remains attached to the bottom of the browser window. It delves into various approaches including utilizing negative bottom margins on wrappers, negative top margins on footers, leveraging `calc()` for adjusting height in wrappers, and employing flexbox and grid layout strategies.<\/p>\n

Each technique is thoroughly discussed with practical code examples and their implications, providing a detailed guide for web developers. This piece is especially beneficial for those looking to incorporate a sticky footer in their web designs, offering a range of solutions to fit different web development scenarios and preferences.<\/p>\n

\"Detailed<\/figure>\n
\n

Navigating the Changing Landscape of Web Input Methods<\/a><\/h3>\n

By: A List Apart<\/p>\n

\u201cAdapting to Input,\u201d featured on A List Apart, tackles the evolving realm of web input modes. The article shines a light on moving beyond traditional input device assumptions (keyboard and mouse for desktop, touch for mobile) to embrace a broader perspective on user interaction. It discusses the rise of various input methods like accelerometers, GPS, and 3D touch, underscoring the necessity for web designs to be versatile and responsive to an array of input types.<\/p>\n

Advocating for designs that cater to multiple inputs concurrently, it emphasizes the importance of accessibility and defaulting to the largest target size. The article also recommends abstracting basic input in code and enhancing input progressively, making it an essential read for contemporary web developers navigating the complexities of varied user input modes.<\/p>\n

\"Evolution<\/figure>\n
\n

Rethinking Best Practices for Mobile Web Performance<\/a><\/h3>\n

By: molily<\/p>\n

The article on molily.de offers a critical perspective on prevailing best practices in mobile web performance, asserting that they may not effectively meet the requirements of mobile users. It highlights how conventional web performance standards, originally devised for desktop browsing, are inadequate in the mobile context, often resulting in sluggish, unresponsive, and frustrating user experiences.<\/p>\n

The piece stresses the need to revisit these practices to better suit mobile internet characteristics, typically characterized by lower bandwidth and higher latency. It advocates for a paradigm shift focusing not just on content rendering but on fostering meaningful user interaction and stable interfaces during the loading phase. This article serves as a wake-up call for web developers to align their approaches with the practicalities of mobile web usage.<\/p>\n

\"Challenges<\/figure>\n
\n

Mastering Responsive Web Design: Advanced HTML & CSS Techniques<\/a><\/h3>\n

By: Shay Howe<\/p>\n

Shay Howe\u2019s detailed guide provides an in-depth look into the world of responsive web design (RWD), a vital skill in today\u2019s web development. The tutorial encompasses the implementation of adaptable layouts, media queries, and flexible media, ensuring compatibility across a range of devices and screen sizes. It highlights the importance of crafting web layouts using a fluid grid system and relative length units like percentages or em units, adapting the layout to various browser and device viewports.<\/p>\n

The guide further explores CSS3 viewport-relative length units, including vw, vh, vmin, and vmax, and underscores the critical role of media queries in responsive design. An invaluable resource, this guide is essential for developers aiming to create seamless and engaging user experiences across all devices.<\/p>\n

\"Comprehensive<\/figure>\n
\n

Getting Started with Responsive Web Design: A Video Introduction<\/a><\/h3>\n

By: Nick Petit<\/p>\n

This brief, 9-minute video provides an overview of responsive web design, covering its origins, its influence on website design, and the key components involved. Perfect for beginners, this tutorial offers a non-coding path to understanding the basics of responsive design.<\/p>\n

\"Introduction<\/figure>\n
\n

Transforming Any Website into a Responsive Design<\/a><\/h3>\n

By: Rochester Oliveira<\/p>\n

Dive into the essentials of making your website responsive with this detailed tutorial. It breaks down the process, focusing on different operating systems, browsers, and the elements that vary when viewed on different devices. The guide also includes handy WordPress and jQuery plugins to streamline your development.<\/p>\n

\"Guide<\/figure>\n
\n

Responsive Design Simplified in 3 Steps<\/a><\/h3>\n

By: Nick La<\/p>\n

Discover how to craft a responsive web design using meta tags, an efficient HTML structure, and essential media queries. This tutorial is geared towards those with a basic understanding of CSS, providing a straightforward approach to responsive design.<\/p>\n

\"Responsive<\/figure>\n
\n

Guidelines for Responsive Web Design<\/a><\/h3>\n

By: Max Luzuriaga<\/p>\n

This article serves more as an insightful guide than a step-by-step tutorial on creating responsive web designs. The author offers valuable dos and don\u2019ts, sheds light on why certain elements aren\u2019t sufficiently responsive, and discusses how to handle proportions and modules. Plus, it\u2019s concise and straightforward, making it easy to digest.<\/p>\n

\"Key<\/figure>\n
\n

A Visual Guide to Responsive Web Design<\/a><\/h3>\n

By: Andrew Gormley<\/p>\n

Prefer visual learning? This video tutorial, spanning about 25 minutes, is less about reading and more about watching. It\u2019s technical, but the creator has fast-forwarded through coding segments and then revisits them to explain the functionality. This format makes it an engaging way to learn about responsive design without being overwhelmed by text.<\/p>\n

\"Responsive<\/figure>\n
\n

Mastering Fluid Images in Responsive Design<\/a><\/h3>\n

By: Ethan Marcotte<\/p>\n

Ethan Marcotte is a name synonymous with responsive web design, being the pioneer behind the concept. In this article, he shares his expertise on creating fluid images, an essential component of responsive design. His insights are invaluable, especially considering his influence in the field.<\/p>\n

\"Ethan<\/figure>\n
\n

Responsive Web Design Using CSS3 Media Queries<\/a><\/h3>\n

By: Nick La<\/p>\n

This excellent tutorial guides you through designing a cross-browser responsive website using HTML5 and CSS3. The step-by-step approach is complemented by demos showing the web design before and after implementing media queries, providing a clear understanding of their powerful impact.<\/p>\n

\"Responsive<\/figure>\n
\n

Aligning Images with Text in Responsive Design<\/a><\/h3>\n

By: Zoe Mickley Gillenwater<\/p>\n

Learn how to adjust fixed-width images to change their size and spacing, aligning perfectly with accompanying text regardless of browser window size. This tutorial offers an ingenious CSS technique for seamless visual harmony between text and images.<\/p>\n

\"Technique<\/figure>\n
\n

Context-aware Responsive Images<\/a><\/h3>\n

By: Scott Jehl<\/p>\n

Embrace the mobile-first approach with this tutorial. It teaches how to assign larger image sizes for higher screen resolutions while minimizing unnecessary image requests and avoiding user agent (UA) sniffing. A smart strategy for responsive and efficient image sizing.<\/p>\n

\"Context-aware<\/figure>\n
\n

Making Videos Responsive<\/a><\/h3>\n

By: Nick La<\/p>\n

Discover how to make videos respond and scale with your browser window. This tutorial offers a CSS-based method to ensure your videos adapt fluidly across different screen sizes, complete with a live demonstration of the technique in action.<\/p>\n

\"CSS<\/figure>\n
\n

Responsive Image Cropping Techniques<\/a><\/h3>\n

By: Zoe Mickley Gillenwater<\/p>\n

Extracted from the author\u2019s book, this tutorial focuses on dynamically cropping images to suit different screen resolutions. It teaches how to reveal or conceal parts of images depending on the available screen space, ensuring a visually appealing and adaptive presentation of images.<\/p>\n

\"Responsive<\/figure>\n
\n

CSS3 for Responsive Content Navigation<\/a><\/h3>\n

By: Mary Lou<\/p>\n

Looking for a more dynamic user navigation experience? This tutorial teaches you to code sophisticated transitions such as fading, sliding, rotating, and scaling. It focuses on using CSS3 to manage content layers\u2019 visibility, providing users with a seamless and interactive navigation experience.<\/p>\n

\"Responsive<\/figure>\n
\n

Creating a Responsive Web Design Template<\/a><\/h3>\n

By: Harry Atkins<\/p>\n

Engage in this concise tutorial to develop a responsive web template<\/strong> that is optimized for both desktop and iPhone usage. It\u2019s a practical guide for those aiming to create versatile web designs that adapt to different device screens.<\/p>\n

\"Tutorial<\/figure>\n
\n

Designing a Responsive Horizontal Layout<\/a><\/h3>\n

By: Mary Lou<\/p>\n

This tutorial guides you through crafting a horizontal layout with scrollable content panels. Using The Origin of Species<\/em> as an example, it demonstrates how to separate each chapter into columns in a full-browser mode and transition to a vertical scrolling format for smaller screens.<\/p>\n

\"Responsive<\/figure>\n
\n

Adapting a Menu into a Dropdown for Small Screens<\/a><\/h3>\n

By: Chris Coyier<\/p>\n

Discover how to transform a menu into a dropdown list on narrow browser windows or mobile devices. This tutorial shows the process of converting a row of links into a space-efficient dropdown menu, ensuring that navigation remains intuitive and accessible on smaller screens.<\/p>\n

\"Converting<\/figure>\n
\n

Building a Flexible Slide-to-Top Accordion<\/a><\/h3>\n

By: Mary Lou<\/p>\n

Learn to create a flexible and simple accordion layout with this tutorial. It focuses on implementing fade-in transitions and adapting widths to suit various screen sizes and resolutions, offering a responsive and engaging user experience.<\/p>\n

\"Creating<\/figure>\n
\n

Adapting Tables for Mobile Screens<\/a><\/h3>\n

By: Chris Coyier<\/p>\n

Dealing with tables on small screens can be challenging, but it\u2019s not a reason to avoid them. Discover how to utilize media queries to transform your table\u2019s layout for mobile devices. Check out the demo<\/a> to see the transformative effects you can achieve following this guide.<\/p>\n

\"Responsive<\/figure>\n
\n

Fluid Slideshows with CSS3 and Parallax<\/a><\/h3>\n

By: Ring Wing<\/p>\n

Learn to create a CSS3-based slideshow that employs two background images. When you alter the backgrounds\u2019 positions, a striking parallax effect emerges. Additionally, the slideshow dynamically adjusts its size with browser window changes.<\/p>\n

\"Fluid<\/figure>\n
\n

Crafting a Responsive Thumbnail Gallery<\/a><\/h3>\n

By: Joshua Johnson<\/p>\n

Perfect for websites showcasing thumbnail galleries. This guide explains how the layout adapts from two columns on smaller screens to up to five columns on larger ones. Explore more in our Top 10 Free Responsive Image Galleries\/Slideshows<\/a> compilation.<\/p>\n

\"Responsive<\/figure>\n
\n

Responsive Design with the Skeleton Framework<\/a><\/h3>\n

By: Joshua Johnson<\/p>\n

Explore the Skeleton framework, an excellent tool for crafting responsive websites. This step-by-step tutorial demonstrates the ease of creating modern, responsive designs using Skeleton. You\u2019ll be amazed at the simplicity of its implementation.<\/p>\n

\"Responsive<\/figure>\n
\n

Mastering Responsive Web Design with HTML5 and Less Framework 3<\/a><\/h3>\n

By: Louis Simoneau<\/p>\n

If you\u2019re new to Less, start with our Less CSS tutorial<\/a> to get acquainted. This tutorial showcases the Less framework in action, highlighting the impactful use of media queries in responsive design.<\/p>\n

\"Responsive<\/figure>\n
\n

Wrapping Up the Responsive Web Design Series<\/h2>\n

With this, we wrap up our Responsive Web Design<\/a><\/strong> series. Our goal was to unveil the nuances of responsive design through various themes, tools, and resources. We\u2019re eager to hear your thoughts!<\/p>","protected":false},"excerpt":{"rendered":"

As we conclude our “Responsive Web Design week”, this final post of the series is dedicated to enhancing your skills in creating web designs that adapt seamlessly across various devices. We\u2019re excited to showcase 30 Responsive Web Design Tutorials from around the web. While this isn\u2019t an all-encompassing list, it\u2019s a great starting point for…<\/p>\n","protected":false},"author":114,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n30 Useful Responsive Web Design Tutorials - Hongkiat<\/title>\n<meta name=\"description\" content=\"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 Useful Responsive Web Design Tutorials\" \/>\n<meta property=\"og:description\" content=\"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-07-27T13:01:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-31T10:31:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg\" \/>\n<meta name=\"author\" content=\"Aritra Roy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aritra Roy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/\"},\"author\":{\"name\":\"Aritra Roy\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/22212930ad9af6457011b930b138c70e\"},\"headline\":\"30 Useful Responsive Web Design Tutorials\",\"datePublished\":\"2012-07-27T13:01:42+00:00\",\"dateModified\":\"2024-01-31T10:31:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/\"},\"wordCount\":2147,\"commentCount\":50,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-tutorials\\\/responsive-web-nav.jpg\",\"keywords\":[\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/\",\"name\":\"30 Useful Responsive Web Design Tutorials - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-tutorials\\\/responsive-web-nav.jpg\",\"datePublished\":\"2012-07-27T13:01:42+00:00\",\"dateModified\":\"2024-01-31T10:31:54+00:00\",\"description\":\"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-tutorials\\\/responsive-web-nav.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-web-tutorials\\\/responsive-web-nav.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-web-tutorials\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 Useful Responsive Web Design Tutorials\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/22212930ad9af6457011b930b138c70e\",\"name\":\"Aritra Roy\",\"description\":\"Aritra is the co-founder of daPazze, a site where he shares articles about blogging, SEO, social media, technology and more.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/aritra\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"30 Useful Responsive Web Design Tutorials - Hongkiat","description":"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/","og_locale":"en_US","og_type":"article","og_title":"30 Useful Responsive Web Design Tutorials","og_description":"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs","og_url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-07-27T13:01:42+00:00","article_modified_time":"2024-01-31T10:31:54+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg","type":"","width":"","height":""}],"author":"Aritra Roy","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Aritra Roy","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/"},"author":{"name":"Aritra Roy","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/22212930ad9af6457011b930b138c70e"},"headline":"30 Useful Responsive Web Design Tutorials","datePublished":"2012-07-27T13:01:42+00:00","dateModified":"2024-01-31T10:31:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/"},"wordCount":2147,"commentCount":50,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg","keywords":["Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/","url":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/","name":"30 Useful Responsive Web Design Tutorials - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg","datePublished":"2012-07-27T13:01:42+00:00","dateModified":"2024-01-31T10:31:54+00:00","description":"As we conclude our "Responsive Web Design week", this final post of the series is dedicated to enhancing your skills in creating web designs","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-web-tutorials\/responsive-web-nav.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-web-tutorials\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 Useful Responsive Web Design Tutorials"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/22212930ad9af6457011b930b138c70e","name":"Aritra Roy","description":"Aritra is the co-founder of daPazze, a site where he shares articles about blogging, SEO, social media, technology and more.","url":"https:\/\/www.hongkiat.com\/blog\/author\/aritra\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Lk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14466"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14466\/revisions"}],"predecessor-version":[{"id":71177,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14466\/revisions\/71177"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14466"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}