跳到主要内容

19个非常有用的网页设计教程

+$Responsive web design is no longer optional; sites simply have to be responsive these days. Thankfully RWD is easier than ever to implement as there are so many great tools to help you create and test your designs, and ensure you create the best用户体验

+$Here's our roundup of some of the best resources that will guide you in making your websites work well and look great on any device.

+$01. How to start thinking responsively

Responsive web design tutorials: How to start thinking responsively

+$Get into a responsive state of mind

+$(Image Credit: FreeCodeCamp)

+$this post on FreeCodeCamp+$, Kevin Powell makes the important point that responsive web design's no longer a trend; it's the way sites are expected to be built, and that means thinking responsively from the start. Here he demonstrates how to get into the responsive frame of mind, while building a fully responsive 3-page website.

+$02. 9 Responsive Typography Tips

Responsive web design tutorials: 9 responsive typography tips

+$Get responsive type tips from the experts

+$(Image credit: Adam Banks)

+$Responsive web design, naturally enough, needs responsive typography to go with it. But what does that even mean, and how do you implement it?+$We asked seven leading web designers+$for their tips on creating elegant, legible text in every viewport.

+$03. The rules of responsive web typography

The rules of responsive web typography

请遵循以下提示,以获得正确的响应式网页排版

+$Responsive web typography is tough – you need to have both design chops and technical know-how. But however tricky it might be, getting it wrong isn't an option, because typography is the cornerstone of web design. Follow+$these design principles and practical solutions+$to get it right.

+$04. Design a responsive site with em-based sizing

Design a responsive site with em-based sizing

构建您的页面,以便在字体大小更改时设计不会中断

+$By using em units for font sizing, you can design components on the page that respond automatically should the font size change. Then, with a clever trick for a responsive font size, you can produce an entire page that adjusts dynamically based on the viewport width of the browser.+$Follow This Tutorial+$to learn how to leverage the 'relative' behaviour of ems to create designs that are scalable and responsive.

+$05. Priority guides: a content-first alternative to wireframes

Priority guides: a content-first alternative to wireframes

了解为什么要使用优先级指南而不是线框

+$Wireframes may be the most widely-used tool for designing websites, apps and other digital interfaces, but they're not without their drawbacks, particularly when it comes to responsive design. Here Heleen van Nues and Lennart Overkamp introduce their preferred alternative to wireframes:+$priority Guides+$, which contain content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications.

+$06. The pro's guide to responsive web design

The pro's guide to responsive web design typographic title

使用本指南为任何设备构建更好的站点

写的贾斯汀艾弗里+$, curator of the Responsive Design Weekly newsletter,+$this guide from net magazine+$takes web pros through the basics up to the more advanced responsive web design techniques.

+$07. How to design responsive and device-agnostic forms

Responsive forms adapting to different devices' screens

无论设备如何,请确保您的表单有效

+$Forms are one of the most important elements in any digital product design, and whether you need a signup flow or a multi-view stepper, you need to design it so that'll work effectively on mobile devices just as well as on the desktop.+$Here's how to do it+$, complete with helpful tips on how to use Flexbox.

+$08. Create a responsive layout with CSS Grid

Designer creating a CSS Grid website

构建一个适合所有视口的漂亮的投资组合网站

+$CSS Grid Layout is growing in browser support every day, and while it's not a replacement for Flexbox or even for floats, when used in combination with them it's a great way to create new and exciting responsive layouts.+$Follow this step-by-step guide+$to building a responsive portfolio site using Grid.

+$09. The web designer's guide to Flexbox

Flexbox columns marked 1 2 3 4 5 with an arrow showing the main axis is horizontal

开始使用Flexbox

+$Have you started using Flexbox yet? In this tutorial Wes Bos provides a+$comprehensive Guide+$to the core concepts that will give you a solid understanding of everything you need to get to grips with this powerful tool.

+$10. Codrops Flexbox Reference

Codrops screenshot says 'Flexbox, or the Flexible Box Layout, is a new layout mode in CSS3 designed for laying out complex applications and web pages'

Sara Soueidan的完整指南

这个+$complete guide to Flexbox+$is written by Sara Soueidan, an author who is renowned for her ability to explain concepts in a way that's easy to follow without scrimping on detail. The Codrops guide is regularly updated so it's a great resource to return to when you need it.

+$11. Stacks: Flexbox for Sketch

Medium article screenshot says 'Auto-Layout: Introducing Stacks  - Flexbox for Sketch'

在Sketch中获取Flexbox功能

+$Stacks, part of the Auto Layout plugin, provide a way for you to use Flexbox technology within Sketch, without using CSS.本文+$explains how you can make use of this powerful technique for easy responsive design.

+$12. A crash course in technical RWD

A crash course in technical responsive web design screenshot

掌握响应式网页设计的基础知识

+$Writing on the Treehouse blog, Jerry Cao has condensed a lot of useful information into+$a relatively short, readable article

+$13. Create flexible layouts with Susy and Breakpoint

Device screens showing responsive website layout adapted to each ratio

Sass扩展来处理响应式数学

+$If you don’t want to use a framework to build your responsive site,+$these Sass Extensions+$are a nice alternative, each with their own strengths. They’ll take care of the responsive maths for you so you can focus on design.

+$14. How to create responsive guides in Adobe XD

Responsive guides being made in Adobe XD

Adobe Experience Design(XD)是一个用户体验和原型设计工具

如果你热衷于尝试Adobe体验设计(XD)+$, Here's+$a Good Tutorial+$to get you started. It includes a video demonstration that takes you through every click of the process.

+$15. CSS at BBC Sport

Screenshot of BBC Sport website

适用于大型响应式网站的轻量级CSS

+$This isn't a tutorial per se, but there's a lot of learning here.+$In This Post+$, the first of a two-part series, frontend developer Shaun Bent takes us on a detailed tour of how CSS is done at BBC Sport. They've managed to keep the CSS foundation of this massive site under 9kb, and it's fascinating to see how that's been done.

CSS Tricks screenshot starting the article with 'The purpose of a sticky footer is that it "sticks" to the bottom of the browser window'

Chris Coyier的粘性页脚方式

+$Sticky footer... that should be simple enough, right? Unfortunately not. It can be trickier than you might expect to get that footer in the right place on every device. Luckily Chris Coyier has put together+$five Tricks+$that will help you to make it happen using计算值(),Flexbox,负边距和网格。

+$17. Adapting To Input

Table showing comfortable, cozy and compact text designs on different screen sizes

确保您的响应式网站可以接受来自任何类型设备的输入

+$Responsive design isn’t just about making your page display properly on any device, you also have to make it function well – and that means it has to be good at accepting input in a world where desktops have touchscreens and phones have keyboards.本文+$by Jason Grigsby of Cloud Four has some sound advice.

+$18. Our best practices are killing mobile web performance

Screenshot of article reading 'Web performance rules invented for desktop web access need to be revised for the mobile era.'

性能考虑因素也需要适用于移动设备

+$Applied without consideration, certain best practices that were conceived during the desktop era may have a detrimental effect on mobile web performance.本文+$will make you think more deeply about how you get your site to work well on mobile.

+$19. How to make responsive web apps with container queries

Screens of different dimensions showing a web app mockup scaling

了解如何使用容器查询进行媒体扩展

+$Learn how to transform a beautiful, complex web app – with components, states and interactions – across different dimensions and resolutions,+$using Container Queries

相关文章:



翻译字数超限