CC BY
33
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
UDC 004.55
DOI: 10.15587/2312-8372.201Б.8Б08Б
Filippova l., RESEARCH OF KEY APPROACHES TO
Svidelskyi R.
RESPONSIVE WEBSITE DEVELOPMENT AND THEIR PRACTICAL APPLICATION
Проведено аналгз використання користувачами 1нтернету настшьних та мобшьних версш браузергв. Розглянуто динамжу використання гхнього обсягу за роками. Описанг поняття адаптивного дизайну та принципи при розробц адаптивних веб-сайтгв. Висвтленг проблеми, що зумовили гх появу. Розглянутг деякг приклади практичного застосування при розробщ.
Клпчов1 слова: веб-сайт, 1нтернет, адаптивний веб-дизайн, розробка веб-сайту, адаптивна веб-розробка, адаптивна верстка.
1. Introduction
Many years ago we could access the Internet only through the very large computers. But nowadays we can connect to the Internet through our laptops, smartphones, TVs etc.
There are data findings pointing to the explosion of mobile web growth that keeps growing to the point of superiority over the desktop usage (Fig. 1).
Global Mobile vs. Desktop Internet User Projection, 2007 - 2015
Fig. 1. Global Mobile vs Desktop Internet User Projection
It is really good news as we can have access to the Internet in any place and any time we want. Such opportunity is very necessary and helpful in business. Therefore we always need for things to work quickly.
Websites designed using traditional approach do not provide with the proper level of user experience. Therefore, there was raised a question of the approach that could be called optimal in web development. That is the one would require minimum resources and therewith provide the access to web content from any device.
2. The object of research and its technological audit
The object of research is responsive web design as an approach in web development that is based on three main components and used in conjunction with such approaches
as mobile-first and using SVG formatting. It provides a high level of user experience to access the Internet from any device.
With the huge variety of mobile screen sizes, we should develop web sites that will respond to all of them. It's actually challenging and every app and web developer faces with it. Nowadays the users have possibility to access the Internet from the giant screen to the smartwatch.
The best approach to responsive web development is designing for devices with different size or resolution (not only for such as MacBook or Samsung Galaxy S7) with ability of design and text adaptation.
3. The aim and objects of the research
The aim of research is to describe а concept of responsive web design and to give some practical examples of this developing approach. Special attention is paid to HTML and CSS tips and tricks. To achieve the research aim the following objects were chosen:
1. To find different concepts in definition of responsive web design.
2. To describe key components in developing of responsive websites.
3. To describe practical examples in developing.
4. To analyze use of responsiveness in some frameworks.
4. Literature review
We considered how HTML5 allows the developers to create more dynamic and engaging web content for different use cases and user experiences [1].
We took into consideration an advice in HTML5 and CSS3 [2] there is a necessity to design responsive and future-proof websites that meet the demands of web users.
There were analyzed undocumented techniques and tips [3] for making a solution to web design problems. We also studied how to create professional-looking websites and use the most modern and effective tutorial-based instructions on CSS [4].
We studied the other authors [5, 6] define the concept of responsive web design as well as we considered the options for making images more responsive [7, 8].
TECHNOLOGY AUDiT AND PRODUCTiON RESERVES — № 6/1(32], 2016, © Filippova L., Svidelskyi R.
This research highlights the importance of using frameworks in web development and describes responsiveness of such a modern framework as Twitter Bootstrap [9].
We also took into account the research on this issue of our native scientists [10].
Thus, the analysis results allow to conclude that the special attention should be paid to the mobile experience in web development. With new HTML5 and CSS3 standards we have enough tools to provide effective solutions for all mobile devices.
We determined the concept of responsive web design as a philosophy of web development, which consists in using of specified modern tools as well as there were considered some examples of their practical application.
5. Materials and methods of the research
In this paper, such methods as analysis and synthesis, analogy and comparison were used for achieving the aim and the objects of this research. There were also used the identification of advantages and disadvantages, systematiza-tion and generalization for concluding the research results.
B. Research results
Responsive web design is a relatively new trend in web design resources. But now it's one of the main indicators of the website quality. Even if you know nothing about web design and development it is not complicated to understand the concept and estimate the web site quality.
For the first time ever the term of responsive design was announced in 2011 according to which the web site can be called as responsive developed if it reacts on browser with changes by adjusting the space between elements [5]. In order to understand this approach the content can be compared to the water as it fills browser space in the same way (Fig. 2) [11].
CONTENT IS LIKE WATER
^¡¡¡P
devices. We also have to think about changing width from small to mid, from mid to large, from large to extra-large and everything in between.
Of course, the main things for worrying with responsive web design are our content of the web site. We need to think how this flows from width to width and fits into our design. We need ensure cohesiveness and consistent of the different design elements.
The aim of responsive web design is allowing webpages look great and fits their content in response size of the device that it is viewing with [2].
Responsive web design often uses breakpoints to set how site layout will show up: one design is used below a breakpoint and another is used above that breakpoint. The breakpoints are usually depended on the browser width. One of the best examples is the website of The Boston Globe, an American daily newspaper. We can see at Fig. 3 how it provides really responsive design across all devices.
You put water into a cup ¡t becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, ¡t becomes the teapot. "
Fig. 2. Content is like water
So if the web site is responsive we see browser content flowed on the available space.
We can open the site in browser and then change its size and the content will also change dynamically for arranging itself optimally. Speaking about mobile devices, this process works automatically.
We have already mentioned that responsive developing is with many challenges. We need cater for a variety of
Fig. 3. Responsive website of The Boston Globe
The same HTML is supported to all devices, using CSS to change the appearance of the layout. A single codebase can support users with differently sized viewports, rather than creating a separate site and corresponding codebase for desk tops, tablets, laptops and phones of all sizes.
Elements in responsive design transform on the page as the width grows or shrinks. For example, a design with four columns on the wide-screen monitor may transform to three columns on a desktop design and two columns on a tablet.
In this way responsive design approach appears as the way to ensure access to information despite of the device. It's possible to hide secondary content or some items or even navigation on smallest screens. In the same time decisions about its actions for different screen sizes should be based on user needs and knowledge about them.
We can also create a mobile-only websites. They are denoted in the URL by using the «m.» prefix [1]. It is a great approach. Developers would create websites only for mobile devices, installing fixed layout and dedicated format. Search engines ranked to mobile sits, but nowadays the same advantages are given to responsive websites. One of the disadvantages in creation of separate site is the requirement in major maintenance.
So increasing the search engine optimization of website is a big argument for responsive design usage as the responsive websites are much more search engine friendly [9].
According to the information above, responsive approach has more advantages over creating the separate sites. Using a single codebase can make development faster and makes maintenance easier over time. Responsive design is also relatively «future-proof» in that it can support new breakpoints
С
32
ТЕХНОЛОГИЧЕСКИЙ АУДИТ И РЕЗЕРВЫ ПРОИЗВОДСТВА — № 6/1(32], 2016
ISSN 222B-3780
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
J
needed at any time. If a 4-inch or 13-inch device takes off in the market, the code can support the new devices.
Content prioritization is one more reason to do responsive design well. There are many visible content on a large screen size monitor. And there are less content on a smartphone screen. If users don't immediately find what they want on a desktop monitor, they can easily glance around the page to discover it. Users may have to scroll endlessly to discover the content of interest on a smartphone. Good content prioritization will help users find what they need more efficiently.
Some advantages and disadvantages of responsive approach are represented in Table 1.
Table 1
Pros and Cons of responsive websites
Pros Cons
Uniform & seamless = good UX Less screen size design control
Abundance of templates to use Elements can move around
SEO friendly Advertisements lost on screen
Often easier to implement Longer mobile download times
Responsive web design includes three key principles that are used together in responsive developing. They are presented at Fig. 4 [6].
fluid grid
calls far page element sizing to be in relative units like percentages, rather than absolute units like pixels or points
flexible images
• are sized in relative units, so as to prevent them from displaying outside their containing element
media queries
• allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, mast commonly the width of the browser
Fig. 4. Main principles in developing of responsive websites
Up to date, the elements of website have been defined in pixels. This idea was from the print industry where a newspaper is always the same size.
Unlike this approach the responsive provides relative units, e. g. percentages, but not pixels. If the website is designed in pixels, there is a formula for changing it in percentages (1).
target / context = result.
(1)
For example, our website has a wrapper with 1120 pixels wide and maximized browser window is 2440 pixels wide. So if we compare our data with formula (1) we can conclude that the browser window wide is our context and the wrapper is the target. Let's divide our values:
1120 px/2440px = 46%.
(2)
We use the same rule for our child elements. Let's say that we have two columns inside of our 1120px wide site. The main content area is on the right with 840px
wide and the sidebar layout is on the left with 280px wide as we can see at Fig. 5.
Sidebar
—280px■
Main Content
-840px -
Fig. 5. Wrapper of website layout with 1120px wide
As in the example above we can use formula (1) for defining sidebar and content wide values in percentages. So let's count them in formula (3) and (4).
280px /1120 px = 25%, 280px /1120px = 75 %.
(3)
(4)
Now these values can be used in our CSS file simply by applying them to the sidebar and content width. As we can see the idea of this approach is pretty simple but in fact it makes a great impact on the user experience.
There are also many approaches in responsive images, but the key idea is in shrinking it within border of a grid. Actually it can be done with the very easy way by adding the next line of CSS code [3]:
img {
max-width: 100 %;
}
This code means that images should be as large as their pixel size, which ensures that the image is not pixelated or stretched. But if they insert a parent container that is much smaller than their pixel size, then it should be shrunk. For example, we have an image with a 600px wide and it is placed in the container with 350px wide. Then the image will be 350px wide too. In this case, the image's height will be automatically calculated so the original aspect ratio will be saved.
Despite of variety of device screen sizes there is one more challenge for modern web developers - it is multiple pixel density. Now we have laptops, tablets, smartphones and some desktops are two or three times higher resolution (amount of pixels). Therefore SVG approach is one of the ways for handling really high DPI displays. It means everything is not illustration or photograph has to be an SVG. Because SVG format can be scaled to all resolutions and its file size is usually small.
We often need to place JPEG images on a website. The best way for this is making images twice bigger than their container. In the other words, if we have the parent with 500px wide, we place the image with at least 1000px wide. This tip should also be used for background images by setting background property up to 50 %.
Let's take a look at our Fig. 3 that represents The Boston Globe's website. As we can see there are two
TECHNOLOGY AUDiT AND PRODUCTiON RESERVES — № 6/1(32], 2016
33-J
columns layout on the tablet. The view is in portrait mode which means our height is bigger than our wide. But it's not suitable for landscape mode when we turn the device and have the same two columns layout. In this case media queries help us.
Media query is a new technology used in CSS coding. It's key component of responsiveness idea. It allows CSS to be applied when certain circumstances come [4]. We can apply CSS code with this technology if the browser has specific wide value. So if the device width is too small or too large, we use media query to identify the browser width and use CSS specifications for rebuilding our page content.
Considering the previous example of layout, let's move the sidebar up to the top on tablet screen sizes. First of all we create styles for our device and then we use the media query to apply styles for another screen sizes. It's called mobile-first approach that is also widely used in responsive development. Our media query looks like the following:
@media screen and (min-width: 800px) {
/* ...large-screen styles here... */
}
At this point our layout will be broken and it will have an unsuitable look. If a tablet layout takes 90 % of the browser window width and then it will stretch to a large-screen size than the space will not be efficiently used. This special point is called a breakpoint. The breakpoints in responsive websites are determined by using range of media queries. In our case real responsive CSS code will look like the following:
/* mobile styles */
@media screen and (min-width: 500px) {
/* tablet styles */
}
@media screen and (min-width: 800px) {
/* desktop styles */
}
In real projects, we may have much more media queries in different sizes. But at the same time we don't have to forget about content prioritization approach that recommends to use website content as a manual for setting breakpoints.
Mobile-first approach has already been mentioned above as well as its example. This idea appeared even previously the responsive web design principles but it had become popular and widely used exactly after its announcement [12].
Mobile-First Responsive Web Design is a combination of philosophies/strategies, and ultimately boils down to a broader application of good web best practices. As the digital landscape gets increasingly complex, we need to design experiences that work across the entire spectrum of digital devices. The main reasons for using mobile-first approach is showed in Fig. 6.
Usage of responsive and mobile first approaches jointly makes a step forward in web development. It can be tricky to move few columns into a small screen size. So it is much better to start with simple mobile design and then work on more complex designs. The fact is that
user experience will surely be more focused if we create a mobile experience at first.
Mobile web browsers represent a rapidly growing demographic and will likely eclipse desktop browsing (if it hasn't happened already)
Small mobile screen sizes force designers to focus, because there's no room for sidebars, ads, social media buttons, and other peripheral content ' ■ m " "" f N
Mobile devices typically have more capabilities than their desktop counterparts, such astouchscreens, GPS, accelerometer data, and more
V_r
fig. 6. Reasons for using mobile-first approach
Speaking about front-end frameworks such as Foundation and Bootstrap that have come long time ago we recognize that they become recently responsive as well [9]. It means that their grids are responsive from very beginning of their usage. It's really great thing because we don't need to do fluid grid calculations at all as the framework grids work responsively.
Even if we work on a simple one page website it is also worth to start out with a front-end framework. There is no need to «reinvent the wheel» because grids of these frameworks are extremely robust and thoughtful.
7. SWOT-analysis of research results
Strength of this research is that responsive web design is a necessary tool for web developers in our time as the use of mobile browsers have not only been doubled during the past two years but also exceeded the desktop browsers usage.
Weaknesses are concluded in lack of all popular tools description of responsive web design as well as fast changing technology in web development.
Opportunities are further researches on trending frameworks and libraries such as Bootstrap, Foundation and Materialize.
Threats consist in changing and fast growing of web technologies.
8. conclusions
1. Two approaches of responsive web design definition are considered. According to the first approach the responsive web design can be considered as a new tools set with HTML5 and CSS3 standards access, and according to the other approach the responsive web design includes a mobilefirst approach and the development using SVG format.
2. The key components of responsive web design approach are allocated and described such as:
— fluid grid - allows the blocs automatically adjust
the screen size;
— flexible images - consists in image stretching and
narrowing;
— media queries - sets the breakpoints apply CSS
code if specified conditions are satisfied.
3. Practical examples of key components usage in responsive web design upon HTML and CSS coding are described and provided. The above mentioned examples show that today the use of relative values for web development is supported by most modern browsers and
ТЕХНОЛОГИЧЕСКИЙ АУДИТ И РЕЗЕРВЫ ПРОИЗВОДСТВА — № 6/1(32], 2016
ISSN 222Б-3780
ИНфОрМАЦИОННыЕ тЕхНОлОгИИ
makes responsive design, i. e. blocks, pictures and containers adjust the width of the browser. In research there was highlighted the main component of media queries responsiveness. It provides the developer with wide range of opportunities but it is not supported by all browsers such as IE, Firefox and Opera Mini. So this fact must be considered while website developing.
4. Responsive design usage on website of The Boston Globe newspaper for three different devices is analyzed. It allowed to reach the conclusion on what components are necessary to be reflected on each device upon developers consideration and how prioritize the content as this resource is very informative and it is difficult to identify what content should be displayed on mobile devices primarily.
References
1. Eisenberg, J. D. Get Ready for HTML5 [Electronic resource] / J. D. Eisenberg // Alist Apart. - 01.09.2009. - Available at: \www/URL: http://alistapart.com/article/get-ready-for-html-5
2. Frain, B. Responsive Web Design with HTML5 and CSS3 [Text] / B. Frain. - Ed. 2. - Packt Publishing, 2015. - 312 p.
3. Verou, L. CSS Secrets: Better Solutions to Everyday Web Design Problems [Text] / L. Verou. - O'Reilly Media, 2015. - 392 p.
4. McFarland, D. S. CSS: The Missing Manual [Text] / D. S. McFar-land. - Ed. 4. - O'Reilly Media, 2015. - 718 p.
5. Marcotte, E. Responsive Web Design (Brief Books for People Who Make Websites) [Text] / E. Marcotte. - Ed. 2. - A Book Apart, 2014. - 153 p.
6. Gardner, L. D. What We Mean When We Say «responsive» [Electronic resource] / L. D. Gardner // Alist Apart. -06.03.2014. - Available at: \www/URL: http://alistapart.com/ column/what-we-mean-when-we-say-responsive
7. Jing, C. H. Using Responsive Images (Now) [Electronic resource] / C. H. Jing // Alist Apart. - 06.10.2015. - Available at: \www/ URL: http://alistapart.com/article/using-responsive-images-now
8. Portis, E. Responsive Images in Practice [Electronic resource] / E. Portis // Alist Apart. - 04.11.2014. - Available at: \www/ URL: http://alistapart.com/article/responsive-images-in-practice
9. Spurlock, J. Bootstrap: Responsive Web Development [Text] / J. Spurlock. - O'Reilly Media, 2013. - 128 p.
10. Patsai, B. D. Peredumovy rozvytku khmarnykh obchyslen v Ukraini [Text] / B. D. Patsai // Ekonomichnyi visnyk uni-versytetu. - 2013. - Vol. 20/4. - P. 56-61.
11. Clark, J. The Seven Deadly Myths of Mobile [Electronic resource] / J. Clark // BDConf, April 2012. - Available at: \www/URL: https://vimeo.com/48327889. - 24.04.2014.
12. Wroblewski, L. Mobile First [Text] / L. Wroblewski. - A Book Apart, 2011. - 123 p.
ИССЛЕДОВАНИЕ КЛЮЧЕВЫХ ПОДХОДОВ В РАЗРАБОТКЕ АДАПТИВНЫХ ВЕБ-САЙТОВ И ИХ ПРАКТИЧЕСКОГО ПРИМЕНЕНИЯ
Проведен анализ использования пользователями Интернета настольных и мобильных версий браузеров. Рассмотрена динамика использования их объема по годам. Описаны понятия адаптивного дизайна и принципы при разработке адаптивных веб-сайтов. Освещены проблемы, которые обусловили их появление. Рассмотрены некоторые примеры практического применения при разработке.
Ключевые слова: веб-сайт, Интернет, адаптивный веб-дизайн, разработка сайта, адаптивная веб-разработка, адаптивная верстка.
Фытпова Любое ЛеотЫвна, кандидат педагоглчних наук, доцент, кафедра eK0H0Mi4H0i тбернетики, Утверситет держав-ног фккальног служби Украгни, 1ртнь, Кигвська обл., Украгна, e-mail: l_filippova@ukr.net.
Свiдeльський Ростислав Олександрович, кафедра економiчног тбернетики, Утверситет державног фккальног служби Украгни, 1ртнь, Кигвська обл., Украгна, e-mail: sv.rostislav@gmail.com.
Филиппова Любовь Леонидовна, кандидат педагогических наук, доцент, кафедра экономической кибернетики, Университет государственной фискальной службы Украины, Ирпень, Киевская обл., Украина.
Свидельский Ростислав Александрович, кафедра экономической кибернетики, Университет государственной фискальной службы Украины, Ирпень, Киевская обл., Украина.
Filippova Lyubov, University of State Fiscal Service of Ukraine, Irpin, Kyiv region, Ukraine, e-mail: l_filippova@ukr.net. Svidelskyi Rostislav, University of State Fiscal Service of Ukraine, Irpin, Kyiv region, Ukraine, e-mail: sv.rostislav@gmail.com
УДК 005.8:005.41 DOI: 10.15587/2312-8372.201Б.8Б17Б
Зацерковний В. I., Оберемок I. I., Оберемок H. В., Егорченкова H. Ю.
1НТЕГРАЩЯ ПРОЦЕС1В УПРАВДШИЯ ПРОЕКТОМ ИА ЕТАШ ПЛАНУВАННЯ В Б1ЗНЕС-ШРОЦЕСИ КОМШАНН
Визначенорольову структуру, необхгдну для забезпеченняреалгзацп процесгв управлтня проектами на етат планування. Описанг рол\ учаснитв проекту, гх функцп, вгдповгдальнгсть та повноваження. Дослгдженг процеси управлтня проектами та описанг процедури на етат планування проекту. ПриведенI шаблони вихгдних документгв процесгв на еташ планування. Приведений п1дх1д до ттеграцп процесгв управлтня проектами на еташ планування в бгзнес-процеси компанп.
Клпчов1 слова: рольова структура, етап планування проекту, процеси управлтня проектом, моделювання бгзнес-процесгв.
1. Вступ
При реалiзащi проекту керiвник проекту проходить вС етапи життевого циклу проекту вщ шщiалiзащi i до завершення. Головна задача керiвника проекту посль
довно та надшно налагодити процес оргашзацп po6iT з виконання проекту Вщсутшсть чи недостатшсть до-сввду керiвника проекту на пряму визначае устшне досягнення цшей проекту Проаналiзувавши причини неустшносп реалiзацiï проекпв слвд вщзначити, що
TECHNOLOGY AUDiT AND PRODUCTiON RESERVES — № 6/1(32], 2016, © Зацерковний В. I., Оберемок I. I
Оберемок Н. В., Егорченкова Н.
35
J
