Software DeveloperProgrammingWriting CodeDevelopment EnvironmentSource ControlDebuggingCode QualityRefactoringDesign PrinciplesDesign PatternsProgramming FundamentalsAPILanguagesDSLsRecursionComputer ScienceApplications of CSMachine LearningComputer NetworkingOperating SystemsComputer EngineeringRoboticsCS TheoryData StructuresDatabase SystemsComputational ComplexityInformation TheoryCryptographyCompressionWeb DevelopmentThe InternetTCPIPHTTPHostingCDNServerAJAXFrontendMaking WebsitesMaking Web AppsRESTSEOHTMLCSSCSS PreprocessorsCSS FrameworksCSS MethodologiesCSS ResetCMSSSGWeb DesignResponsive DesignVisual DesignUX DesignJavascriptDOMES6JQueryMVCBackendServer StackDev OpsCloud

Responsive Design

What it is

Responsive design means designing your page to look good across a variety of devices, from large desktop monitors down to small smartphones.

Responsive design involves scaling your typefaces and images and modifying your layouts with CSS in response to the type of screen being used. This is generally preferable to other options like having a dedicated mobile site.

Responsive design is typically achieved with CSS tools like flex box and media queries.

Why it matters

As of 2015, 56% of web traffic is done through a mobile devices, so responsive design is generally not optional.

How to learn it

Code Academy has a free responsive web design course that can walk you through the basics.