Some Important Elements In Responsive Web Design

Important Elements in Responsive Web Design — Designing a responsive website has now changed from what was previously just a trend to something that must be learned and applied by a web designer on a website that is being built. Please note that a responsive website is a website model that can adjust the appearance according to the size of the browser and the type of device to open it, be it a desktop computer, tablet computer and cellphone or smartphone.

Also read the article about Introduction to responsive web design.

Responsive web design has several important elements that you must understand, here are some of them.

  1. Navigation: One of the most important elements in a website, including a responsive style, is navigation, in a responsive website you really have to pay attention and make this navigation seriously, you can place this navigation at the top of the website, or other most important part of the website. easy to find by visitors, does not need to be too big, but easy to access.
  2. Action Button: Every business person wants to have a website that can increase their sales and income. So the “call-to-action” button becomes a very important part of every website. So place the button in a strategic position on your website, in order to achieve conversion (conversion) to someone who was originally just a visitor to a buyer.
  3. Branding Elements: A good website is a website that has a branding brand. This element of branding becomes very important for a website and must look attractive on all types of devices. These branding elements include the website name, tagline, including website coloring.
  4. Padding: Managing padding and whitespace is a very important part of creating a responsive website. So when visitors view the website on a small screen, the content should not look cluttered.
  5. Section/Columns: Content is the core of a website, what’s a website without interesting and useful content. content is sometimes created in sections or multiple columns in a website, so displaying all these sectors in an appropriate manner along with maintaining the readability of the content is a must. The website will look sleeker and less cluttered when viewed from various types of devices.

Also read articles about the Benefits and Uses of Responsive Web Design and Tutorials on How to Create Responsive Web Design

Responsive web is all about creating a user experience (visitor experience) across all browsers and all devices, so it is very important to pay attention to some of these elements so that your website does not lose its identity when opened on different devices.

Hopefully this article about responsive web elements is useful for all of us, greetings to Indonesian web design.

The History of Web Design and Its Development The Last 25th

History of Web Design – At this time web design has become more sophisticated, the appearance of the website at this time is very good and pleasing to the eye, with various elements, effects, colors, and the ability to adapt to the width of the screen (responsive).

But did you know the website first appeared about 25 years ago with the launch of HTML in 1990 and the creation of the first website in 1991 by Tim Berners-Lee. At that time the website was only limited to text with blue links to link one page to another, the appearance was still standard, there were no columns, only text arranged downwards. It was only a year later that tables were known to create layouts, with website layout tables being made into columns.

web design history

Two years after that, Java and Flash emerged, in 1995-1996, followed by the development of internet users to reach 74 million and there were 650 thousand websites created at that time, and in that year CSS was introduced to make the web look more attractive.

The development of the website is growing rapidly, people are starting to think about creating a dynamic website, not just a static website, so it didn’t take long, in 1998 when Indonesia was in a monetary crisis and riots occurred that year PHP was born, immediately the version 3. Here the website begins to develop because PHP allows us to create dynamic websites.

One year later, in 1999, CSS3 was born, where the existing CSS was developed with the addition of new features that allow the website to look more attractive.

It took 4 years after the introduction of CSS3 until the term Web 2.0 emerged where various websites were increasingly dynamic where everyone could create a website and a specific profile page from just one website such as Blogspot, WordPress, MySpace, Tumblr and don’t forget Friendster and Facebook, users The Internet at that time reached 782 million, and there were 38 million websites on the Internet.

In 2008 people began to be busy with the term Open Source, and at that time the Mobile Web began to be known, because the development of communication technology made cellphones begin to have quite capable capabilities, including being able to be used to access the internet.

In 2010 internet users were getting more and more crowded, there were 2 billion Internet users around the world and the number of websites was increasing, reaching 240 million, almost the same as the population of Indonesia. At that time, people began to recognize HTML5 which is still very trendy with its various sophistications, even to the point of drowning Flash’s power to create web animations.

Now web design is getting more advanced, there are lots of Web builders available on the Internet, making websites is getting easier, even people who don’t have programming basics can now easily create websites just by drag and drop the website is ready, and ready to use.

The History of Web Design
That’s roughly the history of website development and design for the last 25 years or so. How will the website be in the future? Let’s just wait and follow its development, web design tutorials will always accompany and hopefully can always follow these developments.

See you in another crisp article, happy fasting also for friends who are fasting.

13 Cool and Inspiring Examples of Web Design in Japan

Examples of Web Design in Japan / made in Japan — Each country has its own characteristics, these characteristics are usually influenced by the various cultures that exist in that country.

The style of the website also varies greatly according to the country of the site, although now many designers are taking design themes that are trending in the world such as flat design, material design, etc.

japanese web design

Japan is one country that is quite unique, this country is rich in culture and has a unique language and writing.

If you want to see what web design is like in Japan, here’s Tutorial-webdesign.com showing some web designs from Japan that can be your inspiration.

  1. Sal
    Web design in Japan – sal.ne.jpsal.ne.jp
  2. Wagamama Yoani
    Web design in Japan – wagamama.yoani.co.jpwagamama.yoani.co.jp
  3. Mominoki

How to Use Google Fonts

How to Use Google Fonts — Hello everyone. Creating a website design will be bland if we don’t pay attention to the font used, then how do we make the font used in our web design look beautiful? There are some fonts that I think are available by default in HTML, such as Arial, Times New Roman, and others, but of course, each individual has their own taste.

google fonts

In the article that I will discuss this time, it might make you know how to change fonts using Google Fonts.

Google Fonts itself is one of Google’s “products” which I think is very useful for web designers. At Google Fonts you’ll see a huge selection of cool fonts that we can apply to our projects. OK, let’s just get started.

How to Use Google Fonts
First step: Please open Google Fonts, click the following link: http://www.google.com/fonts

Step two: You will see many font choices, please choose the font you want, how? Okay, suppose I want to choose a font called Open Sans, then click the Quick-Use button with an arrow pointing to the right (please see the picture).

How to Use Google Fonts

Third step: Next you will be taken to the Quick Use page. Please scroll down until you see the CSS code and HTML code (see image below).

How to Use Google Fonts

Fourth step: Well, look at the HTML code in the image. Copy the code and paste it under the code or under the code.</p> <p>Fifth step: Next, copy the CSS code in your CSS code, then please see the results. For those who do not understand, please see the following code structure:</p> <p><!DOCTYPE html><br /> <html><br /> <head><br /> <title>Web Design Tutorial

This is Writing

Note: The highlighted code (which has a sign) is the HTML and CSS code from Google Fonts earlier.

How much…

Alright readers, that’s the tutorial on How to Use Google Fonts, hopefully it can be useful

Borobudur Temple Website Concept with Adobe XD

The website concept for the Borobudur Temple tourist destination has finally been completed. Watch the video how this project was created from scratch to become a cool & clean tourist destination profile website.

For this time I created a website profile for one of our famous tourist destinations, namely Borobudur Temple. I am excited to make local works of course with our local branding. So that our local tourist destinations can be much better known by many people out there.

Banner – Borobudur temple website

The concept of the website that I created is simple, still highlighting a characteristic of the tourist destination of the Borobudur Temple itself, with a distinctive stone stupa inside, and various ornaments to support the design of this website. However, I also made a display of souvenirs that were sold on the website so that people who would visit this tourist destination were more interested and eventually bought this typical souvenir of Borobudur Temple.

Therefore, let’s make a work of whatever it is that can highlight our local branding, so that later it can be known by many people out there.

For more details, I have shared the video. How do I make this project concept from zero to a white canvas, to become a modern work that is cool to look at.

Click the video link: Adobe XD — Borobudur Temple Website Concept Video

Here I have provided the full page results of the project I made in the image below. So that friends can focus more on the final result of this project.

Web 1920 – 1

That’s the project I’m working on for my practice, and there will be my training projects in the future. So wait for my next projects.

To find out more about the latest project, I share every week on my Youtube channel.

Learn SEO If You Are Advanced in Web Design

Learning SEO after Web Design – To get to know the online world, there are indeed many versions, especially in terms of web masters, web development, web analytics, programming and seo.

But the author wants to share experiences in the world of seo which can help web developers to develop better websites, especially in the eyes of search engines.

Why should you learn seo? instead of someone who is proficient in web development, it is certainly good or proficient in seo.

Based on my experience meeting clients, I found that when the web is good, the SEO score is very small, this is what I want to share my experience with.

web design seo
Image Credit: deepfootprint.com

Being seo must also be able to web development, especially learning PHP, JavaScript, jQuery, HTML and other programming languages ​​even if a little. One of the advantages is that we will not find it difficult to develop both our own and client’s websites, and there are many more advantages.

Becoming a web master is the desire of many people to master the knowledge in the programming world and master the server as well. When webmasters combine their knowledge with seo experts, all of their skills will make money and going that way is not easy, there is still a lot to be learned, mastered and also lived from the various knowledge and experiences that we get.

Don’t tell me if we have studied seo science and have become experts, why do I give tips like that because seo science keeps changing and google keeps on issuing the best algorithms for black seo players or the term black hat. And also old seo that uses old seo techniques that are outdated and it’s very, very useless.

Google’s algorithm is constantly being updated and the latest is the core core algorithm which focuses more on the user directly when typing in keywords and making queries that are obtained. And this algorithm is more helpful for local businesses because the closest business will be prioritized first.

Borobudur Temple Website Concept with Adobe XD

The website concept for the Borobudur Temple tourist destination has finally been completed. Watch the video how this project was created from scratch to become a cool & clean tourist destination profile website.

For this time I created a website profile for one of our famous tourist destinations, namely Borobudur Temple. I am excited to make local works of course with our local branding. So that our local tourist destinations can be much better known by many people out there.

Banner – Borobudur temple website

The concept of the website that I created is simple, still highlighting a characteristic of the tourist destination of the Borobudur Temple itself, with a distinctive stone stupa inside, and various ornaments to support the design of this website. However, I also made a display of souvenirs that were sold on the website so that people who would visit this tourist destination were more interested and eventually bought this typical souvenir of Borobudur Temple.

Therefore, let’s make a work of whatever it is that can highlight our local branding, so that later it can be known by many people out there.

For more details, I have shared the video. How do I make this project concept from zero to a white canvas, to become a modern work that is cool to look at.

Click the video link: Adobe XD — Borobudur Temple Website Concept Video

Here I have provided the full page results of the project I made in the image below. So that friends can focus more on the final result of this project.

Web 1920 – 1

That’s the project I’m working on for my practice, and there will be my training projects in the future. So wait for my next projects.

To find out more about the latest project, I share every week on my Youtube channel.