Basic web design tips

responsive web design examples


I decided to write this blog post base on my past web design experience. I've made so many mistakes in the area of web design (user interface).

Over the years, I notice that I focus more in designing pages to fit in desktop screen. This is a bad practice for everyone both designers and end users in the 21st century regarding a research about devices  been used for browsing.






Base on a recent research, 95% of people uses mobile phone when browsing the internet. This should not lead us to forget about the little amount using desktop and laptop computers.

Read: How to create new post on nairaland forum 

What is Responsive Web Design?

We're all familiar with the word "Responsive", right? In web design, responsive is simply making or creating website to fit in every device screen, mobile, desktop, laptop and tablet device.

Read:HTML web page linking guide

Another common word for making website responsive in mobile device is "Mobile Friendly".
By default we use laptop or desktop when designing web pages. In this case, most web designers end there, they do not think further by using chrome browser to check if the web page is fit into mobile view or not.

Read: How to create Facebook kind of like button system

Please at this point, allow me to guide you on how to design web page considering mobile, desktop, tablet users.

I have already written a post on how to design responsive website. So in this post, I'll not be dealing with elements, but in the future, I'm still going to make more posts about creating responsive web pages or websites using @media css property.







I assumed you already know how to create responsive web page using the css @media property, if not learn how to create responsive website.

With the help of chrome developer tool, resizing web page to check responsiveness is made very easy. You don't need multiple device to test responsiveness.

Below is the simple step to take in other to check if a web page is responsive or not using chrome browser

 
responsive web design tutorial step by step

Right click plain area and select inspect from the options.

for shortcut, press control + shift + I to open inspect environment.

Now resize to see the responsiveness of your page.

How to view page source using chrome web browser

responsive web design examples with source code

 

Right click on a plan text, image free area and select view page source from the displayed options.

for shortcut, press control + U to view page source.

Note: You can't view php source code because it is the backend source.


Many are reading these articles;

How to make object transparent using css opacity

How to screenshot any environment on windows OS

 Click here to learn more computer shortcut keys

How to improve your web design skill

Comments

Post a Comment

Popular posts from this blog

How to Delete Record From Table Using PHP MySQL

Image
Allowing users to deactivate/delete their account, to delete post/article and even friend and unfriend system however require the PHP MYSQL delete query if you’re dealing with PHP MYSQL database. To delete post, user account all require this same delete query. So in this tutorial I’ll be showing you how to delete post from table using MySQL delete query. some useful tutorials: Building JavaScript WYSIWYG Text Editor From Scratch How to Make Facebook Kind of Like Button Using PHP Programming Language How to Get Value from URL Using PHP Programming Language Reading on I hope you already have your database, table created and some pretty records inserted in it then next is for us to get our hands dirty with the coding process. Everything is going to be put in same web page. So I have a DATABASE name -> delete and a TABLE name -> record. My table has three rows: post_id, post_title and post_content. post_id ...
Read more

Guide to add blog URL to Google search console

Image
 In one of my recent blog posts, I explained how to submit your blog for AdSense approval and things you should do first before applying. Now, in this post, I want to teach you how to add your blog url to Google search console. maybe, you might ask why this is important. Calm down, I will explain why you need to add you blog to Google search console. For you to get better traffic result in blogging, your blog need to rank high in search engines. And Google is the world's number #1 search engine. So making your blog to show on search engines will fetch you a lot organic traffic. Now you see why you should consider adding your blog url to Google search console? This is exactly what I'm going to teach you on this post. mind you, I'm making this post for Blogspot users. So first, go to your blogger dashboard and click to open the menu tab, scroll down a bit and click settings. When the settings menu come up, scroll down and click Google search console. Now when the Google searc...
Read more

Best steps to master JavaScript programming language

Image
To build web app, JavaScript is not exceptional because of its ability to manipulate the browser environment. Beyond client side scripting, JavaScript libraries enable us to interact with server side, exchanging data with php . This tutorial is not about JavaScript libraries, this tutorial is to give you steps that will enable you understand and master the language itself. Many are battling with JavaScript without knowing the real course, what would this course may be? This is what I am going to tell you here. Don’t say JavaScript is hard because of the way you start learning. If you start in the right direction you’ll get it right. To understand JavaScript we must know how the language works, then how can we know how the language work is another question on its own. For web app, after learning html and css they usually tell us to learn JavaScript before learning php, isn’t it? The pattern in which the language report error is another annoying thing, compared to tha...
Read more