The concept is related to developing web designs that help web pages adapt to the resolution of each user’s computer, that is, changing the way a web page behaves according to the resolution of each user’s computer. More specifically, the concept allows a four-column layout with a width of 1292px to be displayed on a 1025px screen and automatically reduced to two columns. It can also be adapted to smartphones and tablets. This special design concept is called “responsive design”.
Now you can test out a responsive design tool for your site.
Responsive web design is a completely different form of design than traditional web development, and developers (especially young ones) need to know the pros and cons of responsive web design. This blog post is a useful example of how responsive web design can be used. The most basic and straightforward way to develop a responsive web site is to select ‘media Queries’. The only trouble, however, is that new queries can pop up instantaneously, but with each hop, the look and organization of the page changes suddenly and dramatically. Experts suggest using CSS to ease the page’s jump.
Pages containing data tables pose special challenges for responsive page designers. By default, the data table is very wide, and when the user zooms out to see the entire list, the list becomes too small to read. But when you try to zoom in so that you can read it, you can only view it by scrolling horizontally or vertically. Well, there are several ways to avoid this problem. Changing the format of data sheets to pie charts or miniatures is an accepted solution. The mini graphics are better suited for small screens.
Images are called situational awareness in responsive page design. The real meaning of this unique technical service is that it can serve as an image in a variety of resolutions in a responsive design, which can be perfectly adapted from large to small screens. Zooming images are obviously updated more smoothly with the help of the update developer’s tools and coding language, allowing them to react faster in any situation.
Responsive page design is significantly different from traditional design in both technical and creative aspects, and the clever use of responsive page design can achieve amazing results when designing websites.
Examples of responsive Web design
Simon Collison
Although the gray, web-style site looks a bit dull now, it generated a fair amount of buzz when it was launched due to its upscale layout.
The main reason is that designers have focused on responsive interaction on the web, which has led to the recent popularity of responsive design, providing the average designer with a classic example of how to elegantly transform a web layout from a web layout.
Andersson-Wise Architects
Taking a look at the architecture and design studio’s website, it is not surprising that the main focus of the site is to showcase representative work, past experience and the firm’s customers in the form of photographs.
The entire site page consists of three main sections, each with images as the background. This flexible solution effectively matches an appropriate layout for each standard screen size. Provide readers with comfortable and flexible web content.
Stephen Caver
Stephen Caver is one of the best responsive websites. What’s so special about him, you must ask. The answer is simple, and if you take a closer look at the previous page, it includes:
-
A welcome message in huge typography;
-
There’s a huge area at the top of the site for menus;
-
Blog rules layout.
Suffice it to say that every website has these three basic aspects. The designer gave us a good example of how web formatting markup and blog posts should be formatted according to the screen size of the device.
Sparkbox
Speakbox illustrates the basic structure of a corporate website. The layout is fairly simple and is based on a standard, usually using a set of horizontal color blocks to keep each set of data in order.
This structure is easily adaptable to a variety of screen sizes. The sequential color blocks are very smooth and flexible even when they change, giving the user a nice and organized layout.
Food Sense
This site shows how it can transform and adapt to different resolutions and make the site look like the same site.
However, there are no consistent rules for web layout, and this is generally accepted as a typical solution for attracting online readers on mobile networks and winning new users. At the same time, the site solves the aesthetic problem of visual overload.
The Boston Globe
The Boston Globe is a good example of a carefully planned, responsive news site. The site takes the traditional approach of helping users who need to run their own frequently updated online magazines to make better use of the site’s features.
While the web is responsive, at first glance the site seems a bit complex, messy and unmanageable, and the solution is very primitive. The designers have wisely divided all the information into three columns, increasing or decreasing the number according to the size of the screen. As the screen gets smaller, the layout slowly decreases from three columns to two columns until only one can be displayed, thus presenting all your information in an orderly way.
Think Vitamin
To be honest, Think Vitamin can’t boast anything about its own blog design. It’s structured like any other site. On the right side of the site is a single column of supplementary information, a page navigation, a logo, a search box and a footer.
However, the team did not simply use basic responsive structures; They also actively integrate design elements. Furthermore, contrasting color blocks help distinguish between content areas and functional elements such as social videos and ads, expanding the viewable area for mobile users and enhancing readability.
Sasquatch! Music Festival
Sasquatch! The Music Festival has plenty of multimedia content, including video and dynamic effects, as well as some artistic handwriting and dreamy graphics on the web page. So the challenge for this combination is to get each piece of content right on phones and tablets.
Nevertheless, the responsive design of this site can be well interpreted. It handles every detail just right to create a visually pleasing look that doesn’t lose its original charm even on the small screen.
Internet Images
This is a clean and organized site consisting of a flexible horizontal color block bar layout. Here, too, a responsive structure is achieved by distinguishing information through strong visual contrast.
This simple yet powerful combination helps readability, especially on small devices, with a very regular layout where each piece can be read continuously. But because of this inherent monotony, it can also easily destroy the enthusiasm of readers and reduce their interest in reading.
Staffanstorp
Here, if you can handle the adaptation of a small screen, it’s like getting content on a big screen.
-
Responsive web design that can be displayed regardless of your mobile device
-
A good visual structure increases the hierarchy of information
-
Mobile phones and tablets are a medium that delivers information quickly to readers.
While blog design is no different from any other, it needs to take it to a whole new level if it is to meet the precise needs of the Web.
Seminal Responsive Web Design Example
Being an extremely popular site means that the site must be a perfect example of responsive design. It even has the appropriate title “A Flexible Grid”, everything on the site follows a perfect set of rules, so it’s very clear. As you can see, the team focuses more on presentation of information and data than on visuals, so all of its styles are dark.
The demo page includes navigation, text areas, grid style areas and even logo styles, and it covers all the simplest elements. The site is logically partitioned and laid out, bringing the perfect solution for displaying web pages on devices of different sizes and resolutions that users carry with them.
Naomi Atkinson
Naomi Atkinson uses a Mosaic style layout. This solution is widely used for online portfolios that want to create fixed aspect ratios immediately.
The site isn’t worth mentioning because of its design, because (to put it mildly) it’s a work in progress, but it’s pretty good because of its clever functionality. The designer solves the problem when you shrink your browser window by converting the irregular mesh into a regular mesh. That’s not all; Page transformations are implemented with smooth motion, which adds to the appeal of the page.
Forefathers Group
What would you say about this site? Of course, it gives an extraordinary and utterly overwhelming impression that it is truly a piece of ingenious design. There is no flamboyant design in this team, but a good grasp of some details, and convey the artistic effect it wants to express.
The site is charming with unforgettable retro style fonts, excellent hand-drawn illustrations, textured backgrounds and exaggerated graphics. All of these elements work nicely with the text to take over the site.
So, as you can see, the team had to take care of a lot of detail to make the site look comfortable and accessible across all devices.
Spigot Design
The responsive actions in this web page really impress users, whether in a standard layout that includes web formatting, line-by-line data display, or in opening videos, motion graphics, and menus.
With this in mind, the team worked to provide an elegant design for the online audience. It has attractive special effects and white space, and more importantly, it is designed to fit the screen size well.
New Adventures In Web Design Conference 2012
Based on a flexible grid design, the organization wins over as many potential visitors as possible. At the same time, this feature is not only conducive to the appearance of the website, but also conducive to the promotion of the website. Since the site is a web design team, it does a good job of showing users what the team recognizes as the needs of today’s web and sticking to them rigorously. Therefore, building a website with all the popular elements is an important way to success.
Illy Issimo
Responsive design is an important feature of a high quality promotional site that makes it more appealing to consumers. Illy Issimo has cleverly used this feature to create a flexible interface:
To provide customers with a comfortable experience;
Expand the audience;
Attract potential users using other devices.
As a result, there is a prominent advertisement at the top of the page.
Arrrrcamp Conference
The site focuses on copywriting rather than using multimedia technology. The site is based on a drab white background that allows the text to appear clearly, with the addition of “ghost” buttons, which are popular these days.
The entire web page can be tailored to the size of the browser; It can be flexibly adapted from 1920 pixels to 240 pixels, which is a huge boon for ruby buyers, who can use their tablet or phone to search the web whenever they need it.
Robot or Not?
Robot or Not? Is a demo site that presents a flexible grid layout.
With text and multimedia data in equal measure, taking up the entire browser screen and (usually) losing all the trappings and creative styling of web design, the team tried to make this routine page design an excellent example of how layout fits into a variety of screen sizes for beginners.
Earth Hour
Earth Hour is indeed an advanced, sophisticated site with lots of multimedia, including videos and eye-catching photos. At the same time, the site is more of an online infographic, using beautiful graphics and smooth transformation to draw people’s attention to the information the site needs to express.
Unfortunately, the site didn’t adapt as well as it should have, and the site suffered from some of the contradictions that came with the tablet version, not to mention how it would look on smaller devices like phones.
Teixido
The creative team used texture, colorful images and illustrations to more effectively present their company online, making it look different and eye-catching.
Having an artistic side is absolutely fascinating. Not to mention the ability to adapt to the competitive environment. This is the right way to present it now. Even though the site is static, with no flashy effects or dynamic design, the responsive behavior greatly enhances the user experience, which makes sense.
Ribot
Ribot is a high-end digital design studio specializing in mobile phones, tablets and future products — as the title suggests.
The key words here are mobile and tablet, which means the team is focused on creating designs that are appropriate for those devices, so the site displays information well, even on a small screen, and gives online visitors the most appropriate way to access the company’s services.
Deren Keskin
Deren Keskin has a tight typography, a clean online portfolio, and clearly relies on a rule that every page can occupy the browser screen, even blogs.
With the same layout that changes according to the response, everything is compressed into a screen where the whole structure fits perfectly. Also, designers try to keep all the proportions and elements in order to ensure that all the elements set at the beginning of the page are prioritized so that they are well laid out.
— — — — — — — — — — — — — — — — — — — — — — — — –
We are DATS translation team, we love design love English, through the translation of design articles to learn and progress together, although we still have many shortcomings, but as long as everyone’s tiny power together, one day will shine a bright light ~ welcome to the home page to pay attention to us.
Translated by Xiao Yu Manshu, Listen jizhi, Hayley, Everything but Fight, Lin, Ckz, G, Sakura RR, Bao Gong, Ren Ye Ye, Han Xiao Guai, Vincent, Feng Ling Zi, Seagra, Chao Fei, Millet, Loulan Motoji, Vanilla, While while ロ, HELLOMAN.
Design: tongxing007
Proofreading: Xiao Yu Manshu
The original link: designmodo.com/responsive-…