DEV Community: Allison Assifuah

Embracing the Mobile-First Approach(design).

Allison Assifuah — Fri, 09 Jun 2023 11:24:13 +0000

Table of content:

Introduction
The mobile-first approach
Difference between mobile-first design and responsive web design
Why opt for mobile-first approach
Conclusion

Introduction

According to Statista, 7.1 billion people worldwide used mobile devices in 2021. This number is projected to reach 7.49 billion by 2025. Over 80% of these mobile users browse the web on their mobile devices, and up to 70% of web traffic comes from mobile devices. Half of the world’s internet users (approximately 3.4 billion) browse the web through smartphones.
This means the likelihood of having more people with mobile devices visiting your website is higher than those using desktops. In this article, we delve into the importance of adopting the mobile-first approach in coding, exploring its benefits, and how it enhances user experience across all devices.

Before mobile phones and tablets became popular, web developers and web designers designed and wrote code for webpages with only computer screens in mind. It was also common for these web pages to have fixed sizes and a static design. Later, mobile phones became popular. It became clear that these fixed and static web pages were not suitable to view on mobile devices. As a result, designers and web developers had to find a way to make webpages work better on all kinds of screens.

Different solutions were developed to help make webpages more accessible to all types of device screens. Adaptive web design was the first solution embraced. Adaptive web design involved creating different versions of designs for different screen sizes. This process was tedious and time-consuming. Moreover, it was difficult to maintain many versions of a website.

In response to this problem, designers and web developers came up with a different approach to make screens more flexible and adaptable. This new approach was called Responsive web design. Responsive web design involves creating webpages that can change and adjust themselves to fit different devices. The layout and design in responsive web design are done by resizing, hiding, shrinking, or enlarging, parts of the web page so it looks good on all devices(desktops, tablets, and phones). Responsive web design automatically shifts web page content to fit different screen sizes. Even though this method seems better, responsive web design also has disadvantages. For example, it can sometimes be difficult to control the layout of content on smaller screens. Using features such as panning, zooming, and scrolling on responsive web pages can become a headache.

Compared to adaptive web design, responsive web design was not time-consuming and easier to maintain. Respond web design eliminates the need for web developers and designers to create different versions for each screen size.

Responsive web design sounds and looks way better right? All web pages developed nowadays are responsive.

What about the mobile-first approach?

A mobile-first approach involves creating webpages with mobile users as your primary focus. When designing a webpage, the designer starts by designing for mobile devices and then scale up to larger screens. Similarly, when a web developer codes a webpage, they begin with the smallest screen size and then expand it to fit larger screens.

All mobile-first designs and codes are responsive, but not all responsive web pages are mobile-first. This may seem confusing, so let me explain the difference.

Difference between a responsive web design and a mobile-first design.

The main difference between responsive web design and mobile-first design is the approach that designers and developers take when building a website. Responsive web design allows designers and developers to start building or designing for any screen size. They can start with the largest screen and work their way down to the smallest screen, or they can start with the smallest screen and work their way up to the largest screen. Mobile-first web design, on the other hand, requires designers and developers to strictly start with the smallest screen and work their way up to the largest screen.

Both responsive and mobile-first web designs make websites accessible on all devices. However, a mobile-first design offers a better overall experience for users. This is because, mobile-first design considers a variety of factors during the design and development phase, such as whitespace, font size, and load time.

Here is a table that summaries the key difference between responsive web design and mobile-first design:

Feature	Responsive web design	Mobile-First design
Starting point	Desktop or larger screens size	Smallest screen size
Adaptability	Responsive to different screen sizes	Starts with mobile and adapts to larger screens
Best for	Websites that have an existing desktop design and need to adapt it for mobile devices	Websites or applications with a primary focus on mobile users, aiming for optimized mobile experience

Why you should use the mobile-first approach.

The importance of adopting the mobile-first approach often sparks debate among web developers. Some argue that as long as the end-user can view and interact with the webpage, that should be the primary concern. However, using mobile has many advantages such as:

Priority in Search Engine Ranking. Search engines, such as Google, rank mobile-friendly websites first in their search results. This means that the Google smartphone bot crawls the website and then assess how mobile-friendly the content of the website is. Sites created on the mobile-first design principle are given a certain priority by default. Using the mobile-first approach, web developers can boost their chances of ranking higher in mobile searches. This results in improved visibility and organic traffic.
Designing and developing using the mobile-first approach helps make you prioritize user needs. A straightforward webpage that focuses on the main content and functionality helps to ensure that consumers can locate what they are looking for fast and effortlessly. It forces designers and developers to only show the necessary information needed by the user.
Accessibility. Accessibility is the practice of ensuring that information is available and usable for as many people as possible. Mobile devices are often used in a variety of situations and environments. The mobile-first approach promotes accessibility by ensuring that websites are functional for persons with impairments.
According to a survey made by Google, 57% of visitors are likely to not return to a website if the loading performance is poor. Not optimizing your website for mobile users means losing users.
Mobile-first approach helps reduce redundancy in web developers codebase. By starting with the mobile version and progressively enhancing it for larger screens, developers avoid unnecessary code modifications and duplications. This method simplifies the creation process, increases efficiency, and allows for easier maintenance and upgrades. Mobile-first design ensures cleaner, more maintainable, and future-proof code.

Conclusion

The decision of which approach to use for designing and developing webpages is ultimately up to you. However, opting for the mobile-first approach can offer several benefits. It saves you time, reduces the amount of code you need to write, and ensures that your end-users still enjoy a positive experience.
Thank you for reading. Feel free to share your opinions in the comments section.

Drawing basic 2D shapes on a canvas.

Allison Assifuah — Fri, 19 May 2023 17:48:15 +0000

Table of content:

Introduction
- Do's and don'ts
Primitive Shapes
- Rectangles
- Paths

Introduction

Hello 👋, Welcome back. In our previous article, we discussed what 2D shapes are, what a canvas is, and how to use coordinates on a canvas.

In this tutorial, we will be drawing basic shapes. We will work on improving our understanding of drawing shapes on our canvas.

Before we begin drawing, there are a few things you should know about using a canvas.

do's

Remember to always close your canvas with the </canvas> tag.
Sketch what you want to draw on a piece of paper so you will know where to put your coordinates.

don'ts

The size of the shape you're drawing should be no larger than the size of your canvas. If your object is larger than your canvas, the area that the canvas cannot contain will not be shown. The diagram below shows what happens when the canvas is smaller than the drawing.

Primitive shapes.

<canvas> supports only two primitive shapes:

rectangles and
paths (lists of points connected by lines). All other shapes are created by combining one or more paths.

Drawing a rectangle.

Because a rectangle is a primitive shape on canvas, it has its own set of drawing methods. There are three functions on the canvas that draw rectangles:

fillRect(x, y, width, height). This method creates a filled rectangle.
strokeRect(x, y, width, height). This creates the rectangle's outline.
clearRect(x, y, width, height). Clears the chosen rectangular region, making it transparent.

These three functions all use the same parameters. x and y define the top-left corner of the rectangle's position on the canvas (relative to the origin). The width and height define the size of the rectangle.

In our script file.

Drawing other shapes (using Paths).

In contrast to the rectangle, every other shape must be created by joining one or more paths. A path, as we know, is a list of points connected by lines.

Let's draw a line to see what a path is.

code

A point, as shown in the diagrams above, is made up of an x and y coordinate. A path is formed by connecting these points with a line.

another example

code

From our codes above, we noticed new methods:

beginPath()
lineTo() and
stroke()

beginPath() Makes a new path.

lineTo() Adds a new point to the canvas.

stroke() Draws the shape by tracing its outline.

Shape 1: a triangle

code

result

Shape 2: an arrow

code

result

Shape 3: a star

code

result

Conclusion

At the end of this tutorial, we learned how to draw some simple shapes. In our next tutorial, we'll look at adding color to our forms to make them more dynamic.
Please leave a comment with an image of a shape you created on your canvas.

Recognizing 2D shapes and how to draw them on a canvas.

Allison Assifuah — Thu, 18 May 2023 09:18:44 +0000

Table of content:

Understanding what a 2D shape is.
- What is a dimension?
- What then is a 2D?
How do we use programming to draw 2D shapes?
- What is a Canvas?
- The syntax for using the <canvas> element.
Drawing on the canvas

Understanding what a 2D shape is.

2D is a compound term made up of two words: (2 and dimensions).
We all know the number 2.

What is a dimension?

A dimension is the measurement of distance in a specific direction.
Think of a straight line. You can move from point a(left) to point b(right), and then back to point a(left). Because you can only move along that line, it is referred to as a first dimension (1D).

What then is a 2D?

2D stands for two dimensions, as the name implies. This means that in addition to moving left and right in the first dimension (1D), you may now move up and down. There are two ways in 2D: left-right (horizontal) and up-down (vertical).

The point from left to right will be labeled width, and the point from top to bottom will be labeled height. Triangles, rectangles, squares, and circles are examples of 2D shapes.

A 2-dimensional shape is defined as any shape with only two dimensions: height and width.

How do we use programming to draw 2D shapes?

That is where the concept of a canvas comes into play.

What is a Canvas?

A canvas is a digital surface used in online graphics. A canvas is used to create anything from simple shapes to complex animations. We use the <canvas> element provided by HTML to draw graphics in the web browser.

The HTML <canvas> element is used for drawing graphics in a web browser. The <canvas> element provides a drawing surface — a container for graphics. To draw on the canvas, we must use a script.

Using the <canvas> element is not difficult. However, you do need a basic understanding of HTML and Javascript.

A <canvas> has a default size of 300 x 150 pixels (width x height). Fortunately, the HTML height and width properties allow you to change the sizes. It is preferable to set the width and height attributes on the html tag rather than using CSS. This is due to the possibility of CSS distorting the form.

The syntax for using the <canvas> element.

A <canvas> element in our HTML file looks like the diagram above.

Three key characteristics are required for the <canvas> element to work.

a width attribute.
a height attribute.
a unique identifier.

When not defined, the width and height attributes will be set to the default width and height. The unique identifier (id) helps us to identify the canvas element in our script since the drawing will be done with javascript.

All drawings on the canvas must be done with Javascript.

The syntax of our Javascript or script file looks like the diagram above.

The first line of code in our script uses the document.getElementById() function to locate the '' element. Once we have the element node, we can use its getContext() method to get the drawing context.

getContext() is a built-in HTML object with many drawing methods and properties. The getContext() object takes one parameter: the type of context. We specify "2D" because we are dealing with 2D shapes.

Drawing on a canvas

Now that we've set up our canvas environment, we can start drawing on it.

What area of the canvas should we begin drawing on?
A grid structure is used in the HTML canvas. A two-
The HTML canvas has a grid system. The canvas is a two-dimensional grid.

By default, all drawings on the canvas begin in the upper-left corner, which corresponds to the coordinates (0,0). The first number is the x-axis coordinate, and the second number is the y-axis coordinate.

The x and y axis are made up of values ranging from 0 to the number you choose for the canvas's height and width.
To better understand how the grid works, let’s draw a rectangle on the canvas grid.

Result

From the example above, I added a border(color: red) to the canvas to distinguish the HTML canvas from the 2D shape we will be drawing.

The rectangle has four numbers. The first (50) represents the x-axis, while the second (also 50) represents the y-axis. This implies that we moved 50 pixels away from the origin on the x-axis and 50 pixels away from the origin on the y-axis.

Congratulations!! Since we now understand how the canvas grid works, we'll look at the do's and don'ts of drawing on a canvas as well as how to draw more forms in our next tutorial.

Dear Beginner, it gets better.

Allison Assifuah — Thu, 04 May 2023 01:50:20 +0000

Remember when you first got introduced to the world of programming? Beaming with so much excitement and eagerness, you imagined all the incredible things you could build. And with little to no illusions about how difficult it might get, you picked a field and started learning away. Now here you are, stuck! You start to think this is above what your mind can process or achieve. Well, you are not alone.

Just like every other discipline, everyone who began programming has and most often keeps experiencing difficulties with making their ideas come to life. What you do when you face obstacles will define how
much you will enjoy the journey.

What to do whenever you feel stuck or face difficulties along the way.

Find the intrigue in the exasperating. Curiosity in this discipline is everything. Putting in the effort to find out why something isn't working or behaving as you please makes a huge difference. You may have followed a tutorial, code after code and yet still, your code may not work as the one shown in the tutorial. Jump on Google or any search engine of your choice to find answers.
Programming can be overwhelming especially if you are doing it alone. Communities act as a support network.
Support and motivation are usually the key attributes every community possesses. Join communities or create one where everyone shares the same interest in technology, and eagerness to learn, grow, improve, and help each other. Being a part of such communities makes you realize most of the mistakes or roadblocks you are experiencing in your journey are common and not just pertaining to only you.
Ask for help. You may find it hard, embarrassing even if you are not used to asking for help. Fortunately, most people in the programming field are always willing to help. You can start by private messaging people in your field you think may help and sharing the problem you are facing in your learning group. And with time, you will get comfortable with asking for help.
Share what you are learning. When you share what you are learning and building, it opens you up to criticism. Flaws you may have not noticed will be pointed out to you by others. Suggestions will be made and all these help you improve.

Conclusion
The path to becoming a software engineer takes a varying mixture of grit, community support, and optimism. Enjoy your journey. Cheers