Easy Approach to a Responsive Website Design Using Artisteer Application Software

Easy approach to a responsive website design using artisteer application software - Progressively, the unique mobile internet


INTRODUCTION
Presently, the internet has been an essential feature of the present information society and a world without the internet is unthinkable, as of January 2020, about 4.54 billion people were active internet users, which amount to about 59 percent of the global population [6]. China, India, and the United States are the countries with the highest number of smartphone users, with each country easily surpassing the 100 million user mark. The global online penetration rate is 59 percent, with Northern Europe ranking first with a 95 percent internet penetration rate among the population. The countries with the most internet penetration rate globally are the UAE, Denmark, and South Korea. The reverse is the case for North Korea with practically no online usage penetration among the general populace, this placed them last globally.
[6] Stated that, as of 2018, Asia was the region with the largest number of online userswhich amount to over 2 billion at the last computation. Europe was ranked second with about 705 million internet users.The summary of internet users is given below:  Active internet users4.54 billion  Unique mobile internet users4.18 billion  Active social media users3.8 billion  Active mobile social media users3.75 billion The analysis above shows that the majority of internet users are mobile users which prompt the need for a good responsive website.Statista predicts that by 2023 the number of mobile device users will rise rapidly to 7.33 billion [9]. As of June 2019, China was ranked first among the countries with the most internet users. China had 854 million internet users, twice the amount of third-ranked United States with just over 293 million internet users. Generally, the BRIC markets had over 100 million internet users, accounting for four of the eight countries with more than 100 million internet users. [11]. There exist two major types of websites:a responsive website and a non-responsive website. According to [7],Responsive Web Design can be known as the techniquesof using HTML and CSS to automatically shrink, hide, resize, or enlarge, a website, to make it legible and responsive on all devices (desktops, tablets, and phones).
[8] also defines a responsive website as a site that has been designed to respond, or adapt, based on the technology and type of computing device used by the visitor to display the site. Similarly, it is a website that  [2] will look good at any size of device; from a large desktopmonitor, laptop to the smaller screens of devices used for internet operation. Responsive website design makessure that visitors have a similar experience irrespective of the device used to view the site. It also makes it easier for a website designer to create a sitethat will adapt to all devices and web browsers with little or no code.
The responsive design makes use ofan array of latest web development attribute and effectiveness to provide an ideal view to users any devices used.
A non-responsive website is a site that only rendered well on desktop browsers but has a poor output,illegible text on mobile devices, all this occurred due to large columns or images thatcannotfit inmobile devices. Figure 1 displayed the common content layout on different media used for website.

Three Main Components of Responsive Design
Responsive website design can be categories into three main components:  Flexible layouts -This uses a flexible grid to create the website layout that will adapt easily to any width.  Media queries -This is an extension to media types when focusing and including styles. The media queries allow designers to stipulatedistinct styles for every particular browser and devices.  Flexible media -This makes the media (images, video and other formats) accessible, by varying the size of the media in line with the changes in viewport.
Artisteer is one of the foremost Web design automation application that suddenly creates a tremendous Website and Blog templates. The software helps in designing professional websites, WordPress themes, and other blog templates with ease in just minutes, without having to know anything about editing graphics or HTML [1].
With Artisteer,anyone can become a Web design expert, editing and slicing graphics, coding XHTML and CSS, and creating CMS templates and WordPress themes -all in minutes, without expensive software like Photoshop or Dreamweaver, and with little or no technical training required.
Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, tableless, cross-browser compatible and fully compliant HTML and CSS code, and export your design to create great-looking Web and Blog templates [1].
In contrast, with responsive design, web developers don't have to focus on specific display sizes; rather, their responsive web code is designed to adapt to a range of display sizes, presenting different layouts based on the display size and capabilities of the mobile device or PC.

II. METHODOLOGY
Several techniques can be employed to create responsive websites, but regularly, web developers set major and minor width breakpoints based on viewport tag and CSS media queries, and then code to present optimized content layout and text based on the display size ranges between these breakpoints. This paper focus on the responsive website using the Artisteer software application, the software generates all the required code automatically with drag and drop features.The Artisteer interface consists of File Menu, Quick Access Toolbar, Ribbon, Preview area,and Pages/Posts Panel. Additional options can be displayed in Panelor Window Mode.

Fig-2: Artisteer Graphic User Interface [1]
File Menu contains project options (New, Open, Save, Save As), template options (Export, Import Preview in Browser), plug-in development, Activation settings, and About Artisteer dialog. You can also adjust the GUI settings in Preferences or exit Artisteer.
Quick Access Toolbar contains Open, Save, Undo, Redo, and Quick Export options.
Ribbon contains the designer's tools.

Preview Area: lets you see and edit your design using Preview Highlights
Pages/Posts Panel is a part of preview area. It displays your website structure. You can also add, delete, edit or rename pages and posts.
Panel Mode slides out in the Preview area. As you work in the Preview area, the panel options change depending on which elements you're working with (e.g. menu bar, header, images, etc.) so it's not necessary to go back and forth to change options from the Ribbon bar.

Window Mode
The same options you can change in Panel Mode can also be changed from the Ribbon bar.   [5] Figure 4 shows the preview of a website in a desktop view created with Artisteer software application, every part of the design can be edited or deleted including the footnote shown in Figure 4.

Fig-5:
Preview of a responsive site in Tablet Portrait View (768px -979px) Figure 5 shows the preview of a website in tablet portrait view, it automatically switches to this view whenever a website user uses a tablet device, it should be noted that the logo is hidden in this view and can be visible if the image is not given a particular size or if the necessary code is added, another noticeable part is that the menu bar changed to three vertical lines, it should be noted that tablet in landscape view will display as it displayed in desktop view.  [6] Figure 6 shows the preview of a responsive website in a phone portrait view, it automatically adapts to this view whenever a website user uses a phone of any size, it should be noted that the logo is also hidden in this view and the menu bar changed to three vertical lines.
Another key feature of the Artisteer application is that you can work in a design view or code view and the design can also be exported to a different template. Similarly, it generates the following automatically: jquery.js, script.js, script.responsive.js and the CSS script which helps the website to adapt to any device used automatically.

IV. CONCLUSION
It is apparent that the Artisteer software application is an easy approach for building a responsive website design that can be of use to an experienced web designer, web developer and a beginner to website design.The result shows that Artisteer is one of the foremost Web design automation applications that instantly creates fantastic looking Website, Mockup, Prototyping, Blog templates, most importantly a responsive website without any code written in few minutes. Similarly, with Artisteer a web designer can edit graphics easily, code XHTML and CSS, and creating CMS templates and WordPress themes -all in minutes with little or no technical training required. This application will help so many businesses when deployed for their website. V.