-
reasonknee28 zveřejnil aktualizaci před 1 rok, 3 měsíce
What exactly is Responsive Design?
Responsive Design lets websites ‘adapt’ to various screen sizes without compromising usability and buyer experience. Text, UI elements, and images rescale and resize depending on the viewport.
Responsive design allows developers to publish a single group of HTML, CSS, and JavaScript code for multiple devices, platforms, and browsers. Responsive design is device-agnostic and aligns with the popular development philosophy of Don’t Repeat Yourself (DRY).
But there’s more into it . It can be tough to make a preexisting site responsive, though the benefits of investing in responsive design in early stages in a project far outweigh your time and effort necessary to achieve it.
This informative article covers the evolution of responsive design, the basic components making it work, plus a help guide creating and testing responsive web applications.
The Evolution of Responsive Design
In the late 1990s, when browser wars were effectively reaching a (shortlived) end, most users had one browser (Internet Explorer) one operating-system (Ms windows). That they had one device (desktop) with screen sizes which were pretty much consistent everywhere. Designing websites of those specifications didn’t involve abstracting differences between numerous browser engines, platforms, and devices-it may be finished with pieces of static sizes.
Eventually, web designers began creating components whose dimensions were per percentages in accordance with the viewport. This approach allowed the parts on the browser window. This philosophy had become called ‘fluid design’.
Really, Ethan Marcotte published a piece of writing where he spoke of ‘Responsive Web Design’. The article discussed all of the devices that readers utilized to get the web-which meant accounting for screen sizes, browsers, orientations, and modes of interaction while creating content on their behalf. This article changed the way in which developers approached website design.
Right at the end of 2016, mobile browsing overtook web browsing. This emphasized the importance of thinking mobile-first if it came to website development.
Today, the marketplace has over 9000 different cellular devices, with their own dimensions and graphics processing capabilities. Google prioritizes mobile-friendly websites in its search engine results. In 2019, you should not increase your online reach without a responsive website.
Responsive Web site design: Setting the Scope
Before making a responsive website, take a look at your target audience and audience. The target is to locate:
How your users connect to the web: Review your site’s traffic analytics and mix the insights with Test around the Right Devices are accountable to know the top browsers/devices with your marketplace.
What are the website’s ‘core’ features: These must render uniformly across browsers/devices. Everything else may be increased in later iterations.
Responsive Website Testing
Once you’ve successfully created a responsive website, you’ll want to test to make sure it may:
Display and align the information consistently.
Render text legibly on all scales and viewports.
Keep content (text and images) within their containers.
Display and resize images if required.
Allow users to scroll vertically (or horizontally, like the situation of responsive data tables).
Let users navigate via links and menus on all devices.
Scale/resize content according to portrait or landscape orientations in cellular phones.
In the responsive test, begin with manually testing the website on various viewport sizes to find out if the content scales to fit correctly. To get inconsistencies in colors, fonts, illustrations, etc. you need to execute a mobile responsive test using real cellular phones.
More details about website responsive test you can check our new website