Web Design For SEO – So far, your web design may always be 100% oriented towards visitor convenience, beauty and usability. Yes, that’s not wrong at all, because basically designing a website is to create ease, interest and effectiveness in accessing the website later.

However, if the site you are designing is the type of site that will really need search engines to source visitors, it is highly recommended to add a fourth orientation to your web design, namely search engine orientation. Web design can be used to improve SEO through certain tricks at the time of coding so as to make it SEO Friendly. This is commonly known as onpage SEO (SEO on your web pages).

Also Read: 7 Web Design Tips For Visitor Convenience (UX)

Well, here are 10 tips to make your web design search engine friendly so that it can optimize the SERP of your website.

Web Design for SEO
Image by Tutaka Tsutano

1. Reduce the number of objects loaded
   The more objects that are loaded, the heavier and longer the page will be when accessed. And the longer a website takes to load, the worse its reputation in search engines will be. Know that currently site speed is an important factor for SEO optimization. In fact, Google itself has even created its own sub-web to discuss and analyze site speed: Google Pagespeed Insight.

So, the first step is to minimize the objects that are loaded. However, that does not mean you will lose important elements for your web design. The essence of point number 1 is “Reduce code without compromising important elements of your design”.

2. Make sure the code is “Clean” and Structured
   Code that is “Clean” aka “Clean” means that the code on the web page consists only of HTML code. Javascript and CSS code is completely called from the outside, aka external. This will be very good and make it easier for crawler bots from search engines to crawl your site because crawlers only “care” with HTML code, not with javascript and CSS code.

While the structured code means that the existing HTML tags are used according to their functions and w3c standards. Examples of practice for example in the use of Heading Tags (h1, h2, h3, h4, h5, h6) in accordance with the priority of the title. H1 for site name, H2 for post title, H3 for widget title, and so on. Everything is prioritized according to its function.

3. Optimize the use of CSS
   CSS optimization aims to effectively use it on web pages so as to produce smaller CSS files. The practices are as follows:

Get rid of unnecessary code and avoid looping CSS. Use the same class on elements with the same style. In this case the use of the framework can be very helpful, if after completion of the code that is not used in the framework is removed.
Unites CSS in only 1 file and avoids using imports.
Compress or minify CSS code.
Calls CSS code on the head and /head tags.
Avoid using CSS inline with attributes in html tags or with style tags.

4. Optimize the use of javascript
   The principle is the same as point 3: Effective use. However, in a different way. The practices are as follows:

Get rid of unnecessary scripts and avoid loops. In this case you should avoid using jquery plugins for certain functions. It would be better if you create the function using only jquery lib, and even better if it’s pure javascript.
Avoid using javascript directly on HTML files in script tags
Place all javascript calls at the very bottom of the code structure, at the end of the body tag before /body. Or it can stay in the head tag, but by using the async attribute. This tag serves to delay the rendering or loading of the script when the page is accessed. Unfortunately, the use of this async tag sometimes causes certain scripts to malfunction.
Megkompress or minify javascript.

5. Optimize image usage
   Still the same as points 3 and 4, only the practice is different:

If the image displayed on the web is 200×200, then the actual size of the image must be 200×200 as well. Manipulation of image size using CSS code, for example displaying a 200×200 image on the web, when the actual size is 400×400 should be avoided.
Use the “alt” attribute to describe the image in text.
Compress images before use on the web, to make them lighter.
Also read: How to Optimize Website Design With Large Portrait Photos

6. Compress code
   Compressing code here specifically means compressing HTML code or other client-side code that directly builds a web page. This compression is the same as in points number 3 and 4. This is done to save source or shrink web page files so that they can load faster. Compressed code should be code that is final, meaning it will not be edited again. Before compressing, my advice is to backup first so that when there is an edit it will be easy.

To compress HTML, CSS and Javascript code, you can visit this website: https://htmlcompressor.com/compressor/.

7. Place the code for the content first
   Point 7 may indeed have nothing to do with design. But you need to do this if you want to design your website SEO friendly. As much as possible place the code or html tag that contains the content first than other website elements. An example is placing it after the code for the header section. The reason is because search engine crawlers prioritize HTML tags at the top. Because content is the most important part of a website, it is appropriate for the code for content to be placed first than other elements.

However, please note that this does not mean that this limits the art of your web design. About the position of the content on the display, that’s the job of CSS. Even if your content is displayed at the bottom, it’s okay for crawlers. But, problematic for the user experience.

8. Complete the web with good navigation
   Yep, we can’t deny that good navigation is very important for a website. This point has a value of 2 times. This means that it is good for the user experience, good for SEO too.

Navigation
Image by Martin Fisch

The following are the parts of the navigation that need to be in your web design:

Main Menu: Contains links to important pages on your web
Search Column: To make it easier for users to find content on your site
Breadcrumbs: For information so that the user knows which part of the site he is currently on
Related articles: As a recommendation for users to read other related articles
Post list widget, be it popular posts or random posts
The five elements above are clearly very useful for the user experience. However, on the other hand it is also very useful for SEO: Internal Linking, One of the most important things in onpage SEO.

9. Optimize the page on the responsive version
   Almost all major sites today, have a responsive design. However, there are 2 ways web designers make responsive web designs. The first is to use @media queries -and the like- in CSS so that all devices used by the user will only access one page that looks different on each device. Second, by creating a different page for each device. That is, when a user accesses the website from an HP device, for example, it will be loaded or redirected to the HP version page. Likewise if the user uses a Tablet or Laptop, all of them have their own versions.

Responsive Web Design

Well, of the two ways above, the best is the second way. The reason is that all data that is loaded, works and is displayed. Not like in the first way. In the first method, there is often “hiding” or “disappearance” of the data on the client side, even though the data is loaded from the server. This “hide” mainly occurs when the page is accessed from a small device such as a mobile phone. Often the functions that exist in the desktop version are not activated when accessed via HP because they will not match, even though the function is loaded from the server. Now in the second way, this “concealment” can be removed.

10. User Experience = SEO
    User experience and SEO are different. But at this point I emphasize that designing a website that is oriented towards user experience without violating the rules of good SEO, can be an amplifier for SEO.
    Here’s the logic:

Visitors feel comfortable with your website because the content is good, the navigation is good, the design is also pleasing to the eye >>> Feel at home accessing your site, read other articles through “related articles” even though they didn’t intend to >>> Reduce Bounce Rate, Increase pageviews pervisit which is very good for SEO.

Also read: List of Websites for User Experience (UX) Learning

That’s it..

Bonus Tips +

11. Use third-party Plugins, or Templates
    Yep, these points are just a bonus. Intended for those of you who don’t want to bother fulfilling the 10 points above, but still want a good web design for SEO. There is nothing wrong with using free or paid plugins or templates on your website. Especially for self-hosted wordpress blogs, you can use plugins like WordPress SEO by Yoast or Autoptimize for code compression. As for the optimized template, you can find it here.

Ebook Guide to Creating Wireframes for Web Designers – Wireframes, or what we can call a page schema or blueprint screen, are visual guides that represent website frameworks. Wireframes were created for the purpose of arranging elements to achieve the best possible composition for a particular purpose.

The purpose of making wireframes is usually to find out an overview of business goals and what kind of creative ideas will be created. Wireframes describe page layouts or website content arrangements, including interface elements and navigation systems, and to get an initial picture of how these elements work together.

Read also:

Take advantage of Wireframes as an Early Stage of Web Design
Duties & Jobs of a Web Designer
Web Design Using Grid
It is so important to make wireframes before you get your hands dirty with applications such as Photoshop or further with a code editor so that what you do is not messy, not carelessly, has rules and understands the purpose.

Wireframe Guide

Wireframes are generally created by business analysts, UX (user experience) designers, developers, visual designers and other work related to interaction design, information architecture and user research.

On this occasion Tutorial-Webdesign.com would like to inform you of a free and good ebook for those of you who want to learn how to make a wireframe. This ebook created by UXPin contains more than 100 pages and is perfect for those of you who want to learn to design websites properly.

Please download the ebook here

Hopefully useful for you, greetings web design Indonesia.

Want your responsive website design to be proud of? This is definitely not an easy job. Even though your project looks pretty good from a design point of view, there are still a lot of things that can destroy it over time.

Here we have some tips to make your responsive web more leverage and to save your time in the creation process so that you achieve your goals with a responsive website that looks the most cool 😀

Responsive Web Tips

1. Focus on Content

Mobile-first, desktop-first or whatever approach you use or the like, the most important thing to remember is content. Content should always drive the structure and organization of the website. So, the first thing to do is to become more familiar with the website content. This should be done before you write program code, before creating any wireframes or mockups. The sooner you do this step, the better.

Take advantage of Wireframes as an Early Stage of Web Design
Guide to Creating Wireframes for Web Designers — Ebook

2. Bandwidth
   One thing to consider when creating a responsive website is bandwidth. All this means that you have to thoroughly consider what you have to provide to optimize everything you can. Of course this is related to optimization, using a smaller image file size, optimizing CSS and Javascript files by making them compressed or in minify.
3. Phone, Tablet, Desktop, and….
   We can’t deny, when creating a responsive website we don’t only focus on 3 types or categories of devices (PC, Tablet, Phone), you have to remember that the device is not just that, nowadays people open your website from various devices, such as smartwatches, ebook readers, mobile phones, smartphones, tablets, netbooks, notebooks, ultrabooks, desktops, widescreens and more. So give yourself a little time to make your website so that it can accommodate these tools.
4. Typography
   Basically the website is 95% typography. Most of the content we consume every day is typography dependent, be it blog posts or infographics. So use a good font for your website. Consider the size of the font file that will be loaded, consider the font size when the website is opened on a small screen, consider the font color so that it is clearly visible on the visitor’s screen, use font types that are easy to read and not confusing.
5. Javascript & Performance
   When we talk about performance, Javascript can be the main influencer. Javascript has become very popular in recent years, the plugins are so many and beautiful, the animations are amazing. Finally, web designers arbitrarily use lots of plugins so that their website looks amazing, without thinking about the performance of the website later, it’s not half-hearted that dozens of jquery plugins are loaded simultaneously because the website uses a lot of effects and others. This is certainly very burdensome website later. Usually, we can see this in multipurpose templates, where templates can be used for all types of websites, and to make that the developer usually includes all the plugins used by these types of websites.
6. Retina Display
   The last point we need to pay attention to is how your website looks on devices that already use retina displays. These screens have a higher pixel density meaning the ability to display more pixels and a much better, smoother display. In short, you can see more detail in high resolution or less in low resolution images.
   The point is to think about including images for higher resolutions that will be displayed only when the user is using a device with a retina display feature.

Summary

Responsive design isn’t just about creating websites that look great on smartphones, tablets and desktops. To create a truly responsive experience there’s a lot more to keep in mind and pay attention to. Hopefully these tips will help you achieve your goals.

See you in the next TWD (Web Design Tutorial) article.

Increase Website Speed ​​– If we talk statistics, 50% of visitors will leave a website that can’t be loaded in 5 seconds. This can be true considering the many links that we can get through social media such as Facebook or Twitter, where many users use Twitter or Facebook via cellphones that only use 3G networks. So when they open the website from their cellphone and the old website is open, they leave the website.

So there is something hotter than responsive design then that is social networking, 60% of twitter users access via mobile and 157 million people use facebook from their mobile only. Most websites share their website links through social networks, we write blogs and then share them on Twitter or Facebook, so many visitors also come and open websites through mobile devices.

Browsing via cell phone is one that gives problems with connection speed, considering that cellphones communicate with signal towers via radio chips, in three steps: Active, waiting & free. When you switch from free to active it takes 1-2 seconds to activate and start receiving/sending signals. If we say that the average user leaves the site in 5 seconds, you will have 3 seconds to load your site.

improve-website-speed

In 2008, when we live so stressful and can expect websites to load quickly, a group called Aberdeen conducted a study to estimate the impact of load times by more than 160 organizations with an average annual revenue of $3 billion. A 7% conversion loss for the second loading time: $2,500.00 lost every year for those who make $100,000 in a day.

The problem here is that although reducing the weight of the website to 20k, there are other factors besides the weight of the website.

Reducing loading times requires common sense

Don’t upload or don’t include scripts that you won’t use for your website: How often do we include jQuery in the header and it gets loaded by the whole page? including for those who do not use the plugin. Not only us, many CMS create 5 to 10 unused request scripts: don’t let them load useless content.

Optimize image

With the various sizes and devices we have today, loading the same image for all is unacceptable. Why not upload one for each page? A phone needs a small picture, a tablet is bigger, a desktop needs another version which is a bigger picture, ow.. one more thing, don’t forget retina devices. If this is overwhelming you, maybe this script called PictureFill can help.

Also read: 6 Tips To Create a Responsive Website

Content Optimization

Minimizing HTTP requests which basically download the files needed to render the page, this is the key to reducing loading times. Obviously it starts with simplifying the design. There are several techniques that can be used to reduce calls to the server, such as implementing css sprites, combining js and css scripts, etc.

Hope with this we can start building a web that is faster and accessible to everyone who uses 3G every day.

this article is adapted from medium

Anatomy of Grid Systems in Web Design – Today web applications and websites of all kinds have changed and dramatically improved, this is of course thanks to frameworks that incorporate powerful grid principles such as Bootstrap, Foundation, Skeleton, etc.

Responsive web design brings a new appreciation of the role of the grid in the digital world. Designers no longer only think about creating a website for one screen (desktop). But they have thought of creating a website that can be opened properly on various screen sizes. Website appearance that is required to be good on every screen forces website makers to think in terms of a dynamic grid system as opposed to a fixed screen display.

grid
Image by olle svensson

Digital design is still in its relatively young age and the use of the Grid system is also still new. Designers and developers must look back to bring digital design into the future. It has been more than 500 years since the printing press was invented and nearly 300 years since the industrial revolution. Grid has gone through many design moves, approaches, and improvements. Despite this history, grids are still in their infancy in interaction design.

Here are the different elements that make up the box. Some terminology has been adopted by the digital design community and some has not. There are clear reasons why some terms from print media should not be included in interaction design.

Column
Columns are the vertical sections of the grid. The more columns in the grid the greater the flexibility.

columns

Rows
Rows are the horizontal sections of the grid. They are often overlooked in web design. A grid with rows and columns is called a modular grid.

rows

Modules
A module is a unit of space created by the intersection of rows and columns.

modules

Regions
Regions are groupings of columns, rows, or modules that make up the elements of a composition.

regions

Gutter
Columns and rows divided by distance. The distance is deep, the visual tension is created. Widely spaced grids produce a calming layout because the elements of the composition are neither too tense nor too tightly packed between them.

gutter

Margin
Margins are the outer space of grid columns and rows. Not to be confused with padding, which is the space in rows and columns.

margins

Flowline
Flowlines are usually used to break up parts of a composition. They made a natural stop and started to take their place in the design.

flowline

marker
Marker is an area that contains secondary content. Books generally contain chapter titles, page numbers, etc. in the marker area.

marker

Also Read:

Web Design Using Grid
Example of a Super Cool Grid-Based Website
Creating HTML Grid Layouts With LESS
Creating Patterns for Website Backgrounds With Photoshop
Grid Types
Hierarchical
Hierarchical grids are intuitive grids built to focus on the proportions of elements in a design. This type of grid is often used for non-standard and repetitive content.

hierarchical-grid

Manuscript
The manuscript grid is the oldest type of grid used in print media. These usually present as rectangles containing the content on the page or screen.

manuscript-grid

Column Grid
The column grid is by far the most used grid in web design because the screen width is limited, unlike the height, which can last forever if the user has the ability to scroll. Most column grids used on the web are 12 columns, but that shouldn’t stop designers and developers from exploring other alternatives.

column-grid

Modular Grid
The modular grid is designed by rows and columns that form overlapping modules. The modular grid is the most complex type of grid. It should be used when vertical and horizontal spaces are of the same concern. This type of grid is becoming more popular in digital media with the advent of wearable devices that rely on ‘cards’ to communicate.

modular-grid

Hopefully you can understand the anatomy and recognize the various types of grids that we often encounter in the world of digital design.

See you in the next Indonesian Web Design Tutorial post.

set from medium

There have been a lot of changes in the web world, one of which is in how to use fonts for websites.
We will not discuss the use of standard fonts (system fonts) that are automatically included on every computer, because they are very limited in number and of course less varied and are a bit boring too.

Luckily now there is a new technology available, which allows us to use beautifully designed web fonts without paying (free) and of course it’s legal.

Web Fonts

Several Types of Techniques for Using Web Fonts

1. By subscribing to the Web Font provider.
   Examples like Typekit or Font Deck

Procedure:

Create an Account on their website
Choose the font you want in their library.
Web designers just export the code snippet, and implement it on the website.
You are required to pay to subscribe to the font annually. It costs around 5 to £10 pounds per font per year.

2. Find free (open license) web fonts on sites like Font Squirrel
   Procedure:

Choose the font you want in the web library
Web designers just export the @fontface code and the font file is also placed in your work folder, then implement it on the website.
To stay safe in legal matters, you must make sure the font you use has an open license, which allows the font to be used on any website you have. These can be found on sites like font squirrel which are 100% free for commercial use. Happy!!. You are allowed to download the font, and you can also use it in Photoshop, and other applications.

3. Google Fonts – Free & Open Source
   Procedure:

Choose the font you like from their library (google)
Web designers just copy and paste the code listed and apply it on your site.
You are allowed to download the font, so you can use the font in Photoshop first if you are designing web starting from Photoshop.

Also Read:

Easy Ways to Know the Font Type on a Website
Beautify Your Website with Adobe Edge Fonts
How to Choose a Good and Correct Font
Free Tool To Create Your Own Fonts
Which method to choose?
The decision usually boils down to which provider has the font you want to use, so basically decide which font you want to use, that way you know which method to use. It’s different when you decide to look for a free one and then choose the available fonts, so that means your choice is narrower. Because sometimes the font that is suitable for your website is a paid font. So first determine the font you want to use.

Even though @fontface (the code used to define fonts in css) is supported by most browsers (provided all the required font formats are available and linked correctly) sometimes how the browser renders the fonts is a bit sloppy, especially in older browsers. Sometimes there are fonts that when the size is determined, the results are not the same in some browsers, this can usually be due to a poor font creation process, or the lack of dots on the font which makes the results less good.
So our advice is always to test the font first, the font you want to use, don’t just look at an attractive display and then you buy or use it directly on your website.

Hopefully this article can be useful and give you an idea how to use web fonts for your website.

See you in the next article, greetings web design Indonesia.

10 Cool and Inspirational SVG Examples – SVG is a vector graphic image format. It literally means Scalable Vector Graphics (SVG). SVG has so far been built on a royalty free basis developed and managed by the W3C Working Group. Basically, you can use SVG on the web easily, but there’s a lot you should know.

SVG looks like HTML, because they are both basically XML (tags that are named in parentheses and contain their content). SVG also supports almost every browser out there and only has issues with IE8 and later and Android 2.3 and below. In this article, TWD will present 10 examples of SVGs that we think are quite interesting to look at and hopefully become motivational.

1. Trajan
   Trajans are very interactive, allowing you to choose which part of the image to pull out. This is a very nice animated deconstruction of architecture for you to see.

Trajan

2. You! Animation and Audio Sync
   You is a synchronous andio and graphic animation combined with SVG, javascript and camera simulation. Created by Vincent Hardy.
3. Animated Song Lyrics With SVG
   SVG This lyrics is a work of Vincent Hardy. It combines SVG, webfonts and audio tags to create fun, visually animated lyrics that sync with the music track.

Also Read: Collection of SVG Tools for Web Designers & Developers

4. Analytics with Raphael and SVG
   Analytics with Raphael & SVG is a javascript library that helps simplify vector graphics on websites. Supporting browsers from IE6+ and up, this site has some cool and impressive SVG examples of data visualization.

Raphael

5. Creepy Mouth
   Creepy Mouth is an experiment that allows you to see inside a human’s mouth with SVG. It combines vector graphics with animation to help improve online education in the way that FLASH did a few years ago.

theCreepyMouth

6. Rube Goldberg machine
   In this example you can see a paper airplane fly past to hit the ball which then triggers another chain reaction, causing a domino effect and finally the lights go on, check here.
7. Envilen EM
   Enliven ’em is a Jquery plugin that lets you animate any vector graphic in SVG form in different ways when the illustration is visible in the viewport’s browser viewport.
8. Trianglify
   Trianglify is a javascript library for generating colorful triangles that can be used as SVG images and CSS backgrounds.

trianglify

9. Page Loading Effects
   Page Loading Effects is a collection of very creative loading effects created using SVG animation with snap.svg. The idea is to show an overlay with an attractive animation shape when new content is about to load.
10. Blobular
    Blobular is an example of an SVG created by Cameron Adams. It allows you to change the color, thickness, and size easily. You can experiment with expanding the edges of blobs, you can draw, combine blobs. Interesting enough to try.

Blobular

—

Those are some very cool and interesting SVG examples that you can try, hopefully they can inspire you, and make you love the world of web design even more 🙂

Greetings Indonesian web design.

Share To Social Media

The year 2014 will end in a dozen days, a lot has happened in the web design world for this one year. Many new resources appear, the quality of the design looks even better. Equipment is getting more sophisticated, and there are many more things that can make it easier for us to create web designs today.

And in 2014 there are certainly lots of websites popping up, lots of designs created and even many websites redesigning them to make them look fresher and not boring.

On this occasion TWD will present the websites with the best designs during 2014, hopefully these website designs can inspire us all to learn more and make better ones.

Food and Beverage Website
/ Cantina Negrar by AQuest

best food drink site

Sports Website
/ Fight 4 Pride by Phoenix The Creative Studio

best-sport-site

Cool and Inspiring 404 Error Page Examples — Having a good 404 Error page is probably just as important as having good content. Even the 404 Error page is also part of the content, the 404 page is complementary content that serves to provide information to visitors when the website page or URL they visit is not available.

This 404 Error page can work very well if you want, usually 404 error pages are very boring, but optimizing this 404 page will make it more useful.

404 pages can add interesting images, add links to other pages, or add a search form so that visitors can find other pages, so that way you can prevent visitors who want to leave your website.

If you don’t have a 404 page yet, or are still optimizing a 404 page well, maybe you can optimize it, you can see some of the lists that we provide below. Please read until the end of this article.

Introduction to responsive web design / responsive web design – Hello TWD readers, first of all we would like to wish all of our readers a Happy New Year 2015, hopefully this year will be a better year for us than the previous years.

This is our first post in 2015, and for the opening presentation at the beginning of 2015 we will start by introducing Responsive Web Design (RWD) to all of you, and writing about responsive web design will probably continue in the following articles until we everyone understands well what responsive web design is, because it is undeniable that responsive web design is arguably the future of websites.

As we know that the growth of users of mobile devices and smartphones for browsing the internet has grown rapidly over the last 5 years. Even Morgan Stanley once estimated that by 2015 mobile internet traffic would overtake desktop traffic, meaning that more people access the web via mobile (mobile phones & tablets) than personal computers (desktops & notebooks).

Also read: 6 Tips To Create a Responsive Website

The requirements for how the website should be used and the screen for opening the website have changed a lot. Previously the site was optimized only for desktop computer users, but now all designers build websites with a mobile-first approach to maximize the UX design of their websites. Not only that, website visitors now expect that a website is optimized for mobile browsing, and if they find a website that doesn’t work optimally on mobile devices then this can create a negative first impression, preventing them from doing business with you. . According to the Hubspot site; 61% of people will have a good/positive opinion with a brand when they (the brand) offer a good mobile experience or in other words a website that can be opened on all devices is preferred by visitors. You can imagine that now people want to open websites from their watch screens. #shocked

Browser Smartwatch
Image by newgadgets.de

What is a Responsive Web?
In short, responsive web design allows websites to adapt or respond to how, where and with what people see/access the website. This of course affects the layout of the website exclusively, and can affect what is displayed on certain devices, such as on mobile phones, or on devices that have a touch screen.

Also Read: 9 Basic Principles of Responsive Web Design

Responsive Web Design is a web design method that focuses on providing an optimal user experience on a site. Web designers & developers achieve this by building a website that can be resized, re-displayed and restructured its navigation elements and layouts across multiple devices. An example is The Boston Globe website or the TWD website that you are opening.

A Little History About Responsive Web Design.
The term responsive web design was first coined by Ethan Marcotte in May 2010 in an article on the A List Apart website. He explains that responsive web design is not a single concept, but really the culmination of several techniques for customizing a desktop site to optimize it on mobile as well.

history of web design
image by alistapart.com

However, there are significant differences between a mobile website and a responsive website. The first difference is that their layout looks a bit different. The second is that the mobile website domain is in a separate sub domain or sub folder; Usually a mobile website will look like m.detik.com, but on a responsive website the domain is the same between desktop and mobile.

Even though a mobile site is cheaper than responsive, the fact that you have two separate domains and basically two websites has a dramatic effect on SEO and User Experience (UX). Often times a mobile website will not rank in search engines.

Why is Responsive Web Design More Popular Than Other Mobile Versions of Websites?
The long term challenge with pure applications and mobile sites is that they are very difficult in terms of maintenance & development, where if you build two versions for one website, namely the desktop version and the mobile version, it means that your programmers have to optimize the two systems at once, even though the system can be combined into one. but it will still take more time and energy and even resources to manage and optimize both. So the solution is still to create a website that can be opened on various devices, it is the most efficient and inexpensive solution for now and in the future. Considering smartphone users and speed