Apparatus and method for providing a responsive web page

Abstract

An apparatus and method for providing a responsive webpage that automates the web design publishing of a responsive webpage that responds according to screen resolution in pixel units are disclosed. An apparatus for providing a responsive webpage according to one embodiment includes an interface unit that transmits and receives data with an external device; and a control unit connected to the interface unit, wherein the control unit receives resolution information of a browser running on an external device through the interface unit and can determine the attributes of one or more design elements in a predetermined pixel unit based on the resolution information of the browser.

Description

Technology Field

[0001] The present invention relates to a technology for providing responsive web pages, specifically a device and method for providing responsive web pages that respond in units of 1 pixel according to screen resolution. Background Technology

[0002] Responsive Web refers to a webpage whose resolution, layout, and other elements adapt and dynamically change according to the device's screen environment. As webpages are increasingly accessed on various types of mobile devices in addition to personal computers, there is a growing demand for responsive web design, which determines the attributes of design elements based on the resolution of the browser running on those devices.

[0003] However, conventional responsive web design changes the attributes of design elements based on the browser's resolution range; consequently, when the resolution range is wide, various mobile devices with different resolutions within a single range display the webpage at the same resolution, leading to significant differences in usability and readability across different mobile devices. Furthermore, since conventional responsive web design adjusts only the attributes of some design elements, significant discrepancies occur between design elements depending on the browser's resolution. The problem to be solved

[0004] The purpose is to provide a responsive web page providing device and method that automates the web design publishing of a responsive web page that responds in 1-pixel increments according to screen resolution. means of solving the problem

[0005] According to one aspect, a responsive web page providing device includes an interface unit that transmits and receives data with an external device; and a control unit connected to the interface unit, wherein the control unit receives resolution information of a browser running on an external device through the interface unit and can determine the attributes of one or more design elements in units of a predetermined pixel based on the resolution information of the browser.

[0006] A predetermined pixel unit is 1 pixel, and the control unit can determine the attributes of one or more design elements based on the resolution of the browser in 1-pixel units.

[0007] One or more design elements include at least one of a point, line, surface, text, image, and margin, and the attributes of the design elements may include at least one of size, thickness, width, height, and rounded corner radius.

[0008] The control unit determines the attributes of one or more design elements based on the horizontal resolution included in the browser's resolution information, and the margins include external margins and internal margins, and the external margins and internal margins may each include horizontal margins and vertical margins.

[0009] The control unit can reduce the attributes of one or more design elements in predetermined pixel units according to the resolution information of the browser received based on the attributes of one or more design elements for a reference maximum resolution.

[0010] The control unit determines the attributes of one or more design elements for a reference minimum resolution based on the attributes of one or more design elements for a reference maximum resolution, and can determine the reduction range of the attributes of one or more design elements per predetermined pixel unit based on the difference between the attributes of one or more design elements for a reference maximum resolution and the attributes of one or more design elements for a reference minimum resolution.

[0011] The control unit determines a reduction ratio for one or more design elements in proportion to the attributes of one or more design elements relative to the reference maximum resolution, and can determine the attributes of one or more design elements relative to the reference minimum resolution according to the reduction ratio for one or more design elements.

[0012] The control unit can determine the reduction ratio of design elements with a predetermined attribute or less to be 0 based on one or more minimum reference attributes per design element for the reference maximum resolution.

[0013] The relative size of one or more components corresponding to each of one or more design elements can be maintained.

[0014] According to one aspect, a method for providing a responsive web page performed on a computing device having one or more processors and a memory for storing one or more programs executed by one or more processors may include the step of receiving resolution information of a browser running on an external device through an interface; and the step of determining the size of one or more design elements in units of a predetermined pixel based on the resolution information of the browser. Effects of the invention

[0015] You can easily and conveniently create responsive websites that respond to screen resolution in 1-pixel increments. Brief explanation of the drawing

[0016] FIG. 1 is a configuration diagram of a responsive web page providing device according to one embodiment. FIG. 2 is an example diagram illustrating the environment in which a responsive web page providing device according to one embodiment operates. FIGS. 3 to 9 are exemplary diagrams for explaining the operation method of a responsive web page providing device according to one embodiment. FIG. 10 is a flowchart illustrating a method for providing a responsive webpage according to one embodiment. Specific details for implementing the invention

[0017] Hereinafter, an embodiment of the present invention will be described in detail with reference to the attached drawings. In describing the present invention, specific descriptions of related known functions or configurations will be omitted if it is determined that such detailed descriptions may unnecessarily obscure the essence of the present invention. Furthermore, the terms described below are defined considering their functions in the present invention, and these may vary depending on the intentions or conventions of the user or operator. Therefore, their definitions should be based on the content throughout this specification.

[0018] Hereinafter, embodiments of a device and method for providing responsive web pages will be described in detail with reference to the drawings.

[0019] FIG. 1 is a configuration diagram of a responsive web page providing device according to one embodiment.

[0020] Referring to FIG. 1, a responsive web page providing device (100) may include an interface unit (110) that transmits and receives data with an external device and a control unit (120) connected to the interface unit (110).

[0021] For example, a responsive web refers to a webpage whose resolution, layout, and other elements adapt and dynamically change according to the device's screen environment. Traditional web pages did not automatically adjust their size based on the type of display, so developing a webpage with the resolution and size desired by the user required code suitable for that specific device.

[0022] According to one example, the external device may be at least one of a personal computer, a laptop, a smartphone, and a tablet. One or more browsers may be installed and run on the external device, and the resolution of the browser may vary depending on the settings of the device itself or the user's settings. For example, a personal computer or laptop equipped with an FHD monitor may have a resolution of 1920*1080. As another example, a smartphone may have a resolution of 360*640. On the other hand, in the case of a personal computer or laptop, the resolution may vary depending on the user's settings as the user can adjust the size of the browser. Additionally, in the case of a smartphone or tablet, the resolution of the browser may vary depending on whether the user uses the device in portrait or landscape mode.

[0023] Accordingly, the responsive web page providing device (100) must provide the properties of the design elements by modifying them according to the resolution information of the external device.

[0024] According to one example, the interface unit (110) can communicate with one or more external devices. Accordingly, the responsive web page providing device (100) can receive browser resolution information from the external device and can transmit web page data containing design elements that reflect the resolution to the external device.

[0025] Referring to FIG. 2, the responsive web page providing device (100) can be connected to one or more external devices to perform communication. For example, the responsive web page providing device (100) may be a server. The external devices may be at least one of a personal computer, a laptop, a smartphone, and a tablet, and each external device may individually connect to the responsive web page providing device (100) to transmit and receive data.

[0026] According to one embodiment, the control unit (120) can receive resolution information of a browser running on an external device through the interface unit (110), and can determine the attributes of one or more design elements in units of a predetermined pixel (px) based on the resolution information of the browser.

[0027] According to one embodiment, one or more design elements include at least one of a point, line, surface, text, image, and margin, and the attributes of the design elements may include at least one of size, thickness, width, height, shadow size, and rounded corner radius. For example, for convenience of explanation, the following description primarily uses the size among the attributes of the design elements, and the embodiment described using size can be applied to other attributes in the same way.

[0028] For example, responsive web design specifies pixel ranges of screen resolutions in CSS as shown in the table below, and styles the properties (thickness, width, height, curve radius, shadow, etc.) of webpage design elements (points, lines, surfaces, text, images, photos, margins, etc.) appropriate for the screen size.

[0029] @media screen and (min-width: 1201px) and (max-width: 1600px) { / *media query* / style input}

[0030] Here, the code that specifies the resolution range as shown in the table above is called a 'media query'.

[0031] For example, while web design styles are created by inputting various attributes such as width, height, font size, margin, padding, color, background color, font family, and line height of design elements, media queries used to specify resolution ranges for responsive web design mostly modify attributes related to the size of design elements (font size, width, height, margin size, etc.). For instance, the font size can be changed to match the resolution range as shown below.

[0032] h1 { font-size: 42px;} / *Sets the title font size to 42px* / @media screen and (min-width: 1201px) and (max-width: 1600px) { h1 { font-size: 36px;} / *Sets the title size to 36px for resolutions between 1201px and 1600px* / }@media screen and (min-width: 801px) and (max-width: 1200px) { h1 { font-size: 30px;} / *Sets the title size to 30px for resolutions between 801px and 1200px* / }

[0033] However, as shown in the table above, when changing the attributes of design elements, abrupt changes in attributes occur at resolutions around the boundary values, while the attributes of design elements do not change within the range, which may reduce user convenience and readability.

[0034] According to one example, units for entering the size of design elements on a webpage can include absolute units such as pixels (px), points (pt), inches (in), millimeters (mm), and centimeters (cm), as well as relative units such as percentages (%), vw, vh, em, and rem. For instance, absolute units are primarily pixels because the webpage is intended to be displayed on a screen that is pixel-based, whereas units such as inches or centimeters are rarely used as they are not suitable for web design.

[0035] For example, font-size refers to the size of the text's vertical axis (height). The font size is at least 10px, and even if a value less than 10px is entered, it is displayed as 10px on the actual screen. On the other hand, the sizes of lines (border-width), surfaces, images (width, height), and external / internal margins (margin, padding) are displayed exactly as entered pixel values.

[0036] For example, relative units are mostly displayed as a percentage (%) of a reference value. For instance, % refers to the percentage value relative to the element's parent element, while vw refers to the percentage value of the screen width. For instance, if you input a font size of 5vw, it becomes 96px (5% of 1,920) on a screen with a resolution of 1,920px, and 20.6px (5% of 412) on a smartphone with a resolution of 412px. Therefore, using vw allows the font size to decrease or increase according to screen size without the need for media queries. Consequently, when using relative units, the size decreases as the resolution decreases; thus, on external devices with resolutions below a certain level, the size of design elements may become so small that it is difficult for the user to perceive.

[0037] Figure 4 shows an example of changing the size of a design element according to resolution using relative units. Referring to Figure 4, when relative units are applied by determining the attributes of a design element based on a screen (a) with a screen resolution of 1920*1080px, on a smartphone (b) with a resolution of 414*896px, the size of the design element may be too small, making it difficult for the user to recognize the text.

[0038] According to one embodiment, the control unit (120) can determine the attributes of one or more design elements in units of a predetermined pixel based on the resolution information of the browser. For example, the predetermined pixel unit may be 1 pixel. In this case, the control unit (120) can determine the attributes of one or more design elements based on the resolution of the browser in units of 1 pixel.

[0039] For example, the control unit (120) can adjust the size of the text constituting the webpage in units of 1 pixel of the browser's resolution. For example, in the case of text set to 100px based on a screen with a screen resolution of 1920px, the control unit (100) can reduce the size of the text in proportion to the resolution reduced from 1920px. For example, the control unit (120) can reduce the size of the text by 0.05px for every 1px decrease in the browser's resolution.

[0040] As another example, a predetermined pixel unit may be any one of values ​​greater than or equal to 2 pixels, in which case the control unit (120) may determine the attributes of one or more design elements in a predetermined pixel unit. For example, in the case of a text set to 100px based on a screen with a screen resolution of 1920px and a predetermined pixel unit of 3 pixels, the control unit (100) may reduce the size of the text by a predetermined ratio whenever it decreases by 3px from 1920px. For example, the control unit (120) may reduce the size of the text by 0.05px whenever the resolution of the browser decreases by 3px.

[0041] According to one embodiment, the control unit (120) can determine the attributes of one or more design elements based on the horizontal resolution included in the browser's resolution information. For example, at least one of the horizontal and vertical resolutions may be changed. In this case, the control unit (120) may change the attributes of the design elements by reflecting only the change in horizontal resolution.

[0042] According to one example, one or more design elements may include margins. In this case, the margins may include external margins (margin) and internal padding. Additionally, external margins and internal padding may each include horizontal margins and vertical margins. Referring to FIG. 3, the top, bottom, left, and right of an image, the top, bottom, left, and right of a box containing text, and the space between the image and the box may be external margins. As another example, in relation to text inside a box, the top, bottom, left, and right of the text, and the spacing between the text may be internal margins.

[0043] According to one example, the control unit (120) can change at least one of the vertical margin and the horizontal margin based on the horizontal resolution of the browser. For example, the control unit (120) can change the vertical margin based on the horizontal resolution of the browser. For example, if the horizontal resolution of the browser decreases, the control unit (120) can reduce the size of the internal and external vertical margins.

[0044] According to one embodiment, the control unit (120) can reduce the attributes of one or more design elements in units of a predetermined number of pixels based on the resolution information of the browser received as a basis for the attributes of one or more design elements for a reference maximum resolution. For example, if the reference maximum resolution is 1920*1080, the control unit (120) can determine the attributes of the design elements by calculating the degree to which the resolution is reduced based on 1920*1080. For example, if a text size of 100px is entered, the control unit (120) can determine that the entered text size is a text size set based on the reference maximum resolution of 1920*1080. Subsequently, the control unit (120) can adjust the text size based on the resolution of the browser received from an external device based on 1920*1080.

[0045] According to one embodiment, the control unit (120) can determine the attributes of one or more design elements for a reference minimum resolution based on the attributes of one or more design elements for a reference maximum resolution. Subsequently, the control unit (120) can determine the reduction range of the attributes of one or more design elements per predetermined pixel unit based on the difference between the attributes of one or more design elements for a reference maximum resolution and the attributes of one or more design elements for a reference minimum resolution.

[0046] For example, as described in Fig. 4, if the size is reduced by the same ratio without considering the size of the design elements, it may become difficult for a person to perceive the size of a specific design element. Additionally, the size ratio between two or more design elements determined based on a predetermined resolution may not be an appropriate ratio when the resolution is reduced. For example, at the maximum standard resolution of 1920*1080, a size ratio of 2:1 between 'title' and 'body text' may be appropriate, but at the minimum standard resolution of 360*640, 2:1 may not be appropriate. For example, at the minimum standard resolution, a ratio of 1.5:1 may be appropriate.

[0047] Accordingly, a standard for reducing the size of each design element is required. For example, the control unit (120) can determine the attributes of one or more design elements for a reference minimum resolution based on the attributes of one or more design elements for a reference maximum resolution.

[0048] According to one example, the control unit (120) can determine the attribute values ​​of design elements to be applied to the reference minimum resolution based on the attribute values ​​of design elements determined based on the reference maximum resolution. For example, the control unit (120) may have information regarding the ratio or attribute of the reference minimum resolution for each type of design element and each attribute of design elements. For example, the types of design elements may include points, lines, surfaces, text, pictures, photos, margins, etc. For example, the control unit (120) can determine the attribute values ​​of design elements to be applied to the reference minimum resolution for each attribute of the type of design element. For example, in the case of text, for each of the following types based on the standard maximum resolution, the attribute of the standard minimum resolution can be determined as ‘10px, 10.2px, 10.4px, 10.6px, ..., 30px, 30.2px’. Furthermore, the control unit (120) can determine the attribute of the standard minimum resolution for each of the other design elements other than text. In this case, information regarding the attribute of the standard minimum resolution may be pre-set.

[0049] Figure 5 is an example diagram illustrating the reduction range of each design element at a standard maximum resolution and a standard minimum resolution according to one example. Referring to Figure 5, it can be seen that design elements with larger attributes at the standard maximum resolution have a larger reduction range. For example, as explained above, when a design element of 'greater than 10px and less than or equal to 11px' is determined to be '10.2px', it is reduced by approximately 7.3%. On the other hand, when a design element of 'greater than 99px and less than or equal to 100px' is determined to be '30px', it is reduced by approximately 70%.

[0050] According to one embodiment, the control unit (120) may determine a reduction ratio for one or more design elements in proportion to the attributes of one or more design elements for a reference maximum resolution. Additionally, the control unit (120) may determine the attributes of one or more design elements for a reference minimum resolution according to the reduction ratio for one or more design elements. For example, the attributes of the design elements may be determined as shown in the following mathematical formula.

[0051] [Mathematical Formula 1]

[0052]

[0054] Here, p represents the design element property at the reference maximum resolution, m represents the design element property at the reference minimum resolution, P represents the reference maximum resolution, M represents the reference minimum resolution, and x represents the resolution of the external device browser received. For example, if the reference maximum resolution is 1920px, P=1920 and if the reference minimum resolution is 360px, M=360; if the font size at the reference maximum resolution is 50px, p=50 and if the font size at the reference minimum resolution is 15px, m=15.

[0055] At this time, the properties of the design element at the reference minimum resolution can be determined according to the properties of the design element at the reference maximum resolution. For example, the properties of the design element at the reference minimum resolution can be determined inversely proportional to the properties of the design element at the reference maximum resolution. Referring to Fig. 6, the reduction range can increase depending on the size of the design element. For example, the reduction range of a design element with a size of 100px can be greater than the reduction range of a design element with a size of 50px. That is, if the reduction range of a design element with a size of 100px is 50%, the reduction range of a design element with a size of 50px can be 30%.

[0056] For example, the properties of a design element at the standard minimum resolution can be expressed as shown in the mathematical formula below.

[0057] [Mathematical Formula 2]

[0058]

[0060] Here, m' represents the minimum property of a design element where the reduction is 0. For example, if P=1920px, M=360, and m'=10, then when the design element property p=100, m=26.875, and when the design element property p=50, m=17.5. In this case, the reduction in size of each design element can be 0.047 and 0.021 per 1px of browser resolution, respectively. However, since the minimum size of each design element is m'=10, when p<=10, the reduction becomes 0, and the property of the design element can be maintained without change at the reference minimum resolution.

[0061] Specifically, as shown in FIG. 7, the attributes of a design element having a large value at the reference maximum resolution may be reduced by a larger reduction. However, as shown in FIG. 6 and FIG. 7, the size of a design element of a predetermined size or smaller may not be reduced. That is, the control unit (120) may determine the reduction ratio of a design element of a predetermined size or smaller to 0 based on one or more minimum reference attributes for each design element at the reference maximum resolution. Accordingly, a design element having a design attribute of a predetermined size or smaller may not have its attribute changed despite the reduction in resolution.

[0062] According to one embodiment, the relationship between one or more components corresponding to each of one or more design elements can be maintained. For example, as shown in FIG. 7, when the size of a design element according to the maximum resolution design element size has a relationship between (1) and (5), the relationship between the size of the design element reduced from the reference minimum resolution can also be maintained in the same order. In other words, a larger reduction may be applied as the size of the design element increases, but the reduction must be determined so that the relationship between the sizes of the design elements can be maintained.

[0063] Figure 8 illustrates an example where different reduction ranges are applied according to the attributes of design elements. Referring to Figure 8, it can be seen that a 50% reduction range is applied to titles with large font sizes, 30% to body text with medium sizes, and 18% to body text with small sizes. Additionally, it can be seen that the relationship between font sizes remains the same even at smartphone resolutions. Similarly, in the case of margins, it can be confirmed that a larger reduction range is applied to margins with larger values.

[0064] According to one embodiment, the control unit (120) can change the arrangement of one or more design elements based on the resolution information of the browser. For example, if the design element is an image or a box, the arrangement may be changed by line wrapping when the size of the image or box becomes smaller than or equal to a preset size. For another example, if the design element is a character, the arrangement may be changed by line wrapping when the length per line of the character is compared with the size of the area where the character is entered minus the internal margin, and the length per line of the character becomes longer. At this time, the vertical length of the area where the character is entered may be determined based on at least one of the number of lines of the character, the spacing between characters, and the top and bottom margins of the character.

[0065] For example, as shown in Fig. 9, a tag representing a design element can be written in an HTML document and a CSS document can be inserted. At this time, the style of the design element can be specified in the CSS document, and an example can be entered to calculate the properties of the design element regarding the screen resolution using a media query. For example, by loading a JavaScript source file into an HTML webpage, a responsive web with a total of 1,560 levels can be easily and conveniently produced, and a responsive webpage with a design that can be applied regardless of what new resolution devices are released in the future can be produced.

[0066] FIG. 10 is a flowchart illustrating a method for providing a responsive webpage according to one embodiment.

[0067] According to one embodiment, a responsive web page providing device may be a computing device having one or more processors and a memory for storing one or more programs executed by one or more processors. According to one example, the responsive web page providing device may receive resolution information of a browser running on an external device through an interface (1010), and may determine the size of one or more design elements in units of a predetermined number of pixels based on the resolution information of the browser (1020).

[0068] Among the embodiments of FIG. 10, embodiments that overlap with the descriptions made with reference to FIG. 1 to FIG. 9 have been omitted.

[0069] One aspect of the present invention may be implemented as computer-readable code on a computer-readable recording medium. Codes and code segments implementing the above program can be easily inferred by a computer programmer in the art. A computer-readable recording medium may include any type of recording device in which data that can be read by a computer system is stored. Examples of computer-readable recording media may include ROM, RAM, CD-ROM, magnetic tape, floppy disk, optical disk, etc. Additionally, a computer-readable recording medium may be distributed across networked computer systems and written and executed as computer-readable code in a distributed manner.

[0070] The present invention has been described above focusing on its preferred embodiments. Those skilled in the art will understand that the present invention may be implemented in modified forms without departing from the essential characteristics of the invention. Accordingly, the scope of the present invention should not be limited to the aforementioned embodiments but should be interpreted to include various embodiments within the scope equivalent to those described in the claims. Explanation of the symbols

[0071] 100: Responsive webpage serving device 110: Interface section 120: Control unit

Claims

Claim 1 A responsive web page providing device comprising: an interface unit for transmitting and receiving data with an external device; and a control unit connected to the interface unit, wherein the control unit receives resolution information of a browser running on the external device through the interface unit, determines the attributes of one or more design elements in units of a predetermined pixel based on the resolution information of the browser, reduces the attributes of one or more design elements in units of a predetermined pixel based on the received resolution information of the browser based on the attributes of one or more design elements for a reference maximum resolution, determines the attributes of one or more design elements for a reference minimum resolution based on the attributes of one or more design elements for a reference maximum resolution, and determines the reduction range of the attributes of one or more design elements per unit of a predetermined pixel based on the difference between the attributes of one or more design elements for a reference maximum resolution and the attributes of one or more design elements for a reference minimum resolution. Claim 2 A responsive webpage providing device according to claim 1, wherein the predetermined pixel unit is 1 pixel, and the control unit determines the attributes of one or more design elements based on the resolution of a browser in 1-pixel units. Claim 3 A responsive webpage providing device according to claim 1, wherein one or more design elements include at least one of a point, a line, a surface, a character, an image, and a margin, and the attributes of the design elements include at least one of size, thickness, width, height, shadow size, and rounded corner radius. Claim 4 A responsive webpage providing device according to claim 3, wherein the control unit determines the attributes of one or more design elements based on the horizontal resolution included in the resolution information of the browser, and the margins include an external margin and an internal margin, and the external margin and the internal margin each include a horizontal margin and a vertical margin. Claim 5 delete Claim 6 delete Claim 7 A responsive web page providing device according to claim 1, wherein the control unit determines a reduction ratio for one or more design elements in proportion to the attributes of one or more design elements for a reference maximum resolution, and determines the attributes of one or more design elements for a reference minimum resolution according to the reduction ratio for one or more design elements. Claim 8 A responsive web page providing device according to claim 7, wherein the control unit determines the reduction ratio of a design element with or less than a predetermined attribute to be 0 based on one or more minimum reference attributes per design element for a reference maximum resolution. Claim 9 A responsive web page providing device according to claim 7, wherein the relationship between one or more components corresponding to each of one or more design elements is maintained. Claim 10 A method for providing a responsive webpage, performed on a computing device having one or more processors and a memory for storing one or more programs executed by said one or more processors, comprising: receiving resolution information of a browser running on an external device through an interface; and determining the size of one or more design elements in units of a predetermined pixel based on the resolution information of said browser, wherein the step of determining the size of one or more design elements reduces the attributes of one or more design elements in units of a predetermined pixel based on the received resolution information of said browser based on the attributes of one or more design elements for a reference maximum resolution, determines the attributes of one or more design elements for a reference minimum resolution based on the attributes of one or more design elements for the reference maximum resolution, and determines the reduction range of the attributes of one or more design elements in units of a predetermined pixel based on the difference between the attributes of one or more design elements for the reference maximum resolution and the attributes of one or more design elements for the reference minimum resolution.

Images