Want to test your website on just about every device known to man,
I'll show you how
Everybody's walking around with a device in their pocket.
And every device is a slightly different screen.
The screen may be a different size resolution or have a different rendering. It,
if you develop websites or mobile apps, testing is critical.
You want your content to look good across the array of available devices,
but you can't afford 30 or 40 mobile devices to test time. No problem.
In this video,
I'm going to show you how to test your HTML and CSS using the Blisk browser.
Haven't heard of Blisk?
They sponsored this video and I'm glad they did so I can learn more about this
great tool. We'll make adjustments to our code and then testing list,
which emulates the screens of dozens of devices at once after this video,
you'll know how to test and adjust HTML and CSS for different size screens,
as well as how to use bliss, develop and test your wife's site.
My name is Mark Lassoff. I have been teaching,
coding and design for over 20 years. Over the past decade,
almost 2 million people have taken my courses on development and digital design.
Before we get started, I hope you'll click that like button and subscribe.
I come out with new content, teaching web development,
mobile and digital design each week.
Liking this video will help more people access the free training I provide.
Now let's get started with testing our website with the bliss browser.
If you'd like Follow along with me through this tutorial,
you'll need three downloads. You probably already have a code editor.
And if you follow any of my videos, it's probably visual studio code.
If you don't,
you can get the code editor I use@codedotvisualstudio.com.
I'll put that URL at the bottom of the screen so you can see it.
If you don't have a text editor, you want to use this one,
go ahead and pause the video and download this one. Now, secondly,
you're going to need the Blisk browser.
This is a specialized browser for developers and designers that enables us
to test our HTML CSS and JavaScript in
multiple screens. At the same time, you're really going to like this.
Go ahead and go to the bliss website,
using the URL below and download and install blister for your
computer. Finally,
the HTML and CSS files that I'm working with are available through URL here.
You can go ahead and download them by clicking on the 61 banks.zip link,
and then using the download arrow in the upper right-hand corner.
This is the Blisk browser that I asked you to install.
And when I loaded up I'm on the Blisk home page,
I'm going to click new device set.
This screen is going to then become visible.
And here you can see a number of different devices that I can test my
website in.
We have almost all of the current phones that anybody would have
the current tablets and a number of desktop
setups at the bottom notice. There's a Chrome like desktop,
which simulates the Chrome browser.
So let's choose a phone, a tablet,
and then Chrome. These are also categorized up here.
If you have difficulty locating exactly what you're looking for.
So let's start with an iOS device. Let's go for something fairly recent.
I have iPhone X. So that sounds like a good one to choose.
The second one in this set is going to be a tablet.
Let's go for an iPad,
mini four and notice here as I select them,
this set is available to us. Now I can add the Chrome,
like desktop view by checking this guy off or here at the bottom of desktop,
I can add it there. When I click launch devices,
we're going to see screens for all three devices available here,
just like with any other web browser, we can type a URL up here,
load the site and it'll show us what the site looks like in the different
browsers that we have available.
This is my site and we can see it here on our
iPhone mobile device.
We can see it here on our tablet and we can also see
it in the Chrome browser.
You'll notice that the scrolling is synced to the degree possible because each
screen is a different size,
but we can have an idea of what different parts of the site look like on the
three devices. Now, since I'm testing a site locally,
I'm simply going to go to file and open file to open
the site that I'm testing mine is on my desktop
and in the blister activity,
I have 61 banks dot HTML. And now that I've done that,
it loads my site from the local drive.
If I go back up here and click on the blister icon,
I can toggle developer mode.
So now you can see my site loaded in the three devices I selected in my device
set the iPhone X, the iPad mini and the Chrome like desktop.
You can see that while the site looks fine in my iPad mini,
there are some issues in the Chrome like desktop at this particular with,
and there are some issues here in the phone.
These two columns,
one with the photos and one with the text are supposed to appear side by side.
Also you'll notice that all the devices appear to be the same size and that's
because we have smart scaling turn on. If you click down here at the bottom,
I can select to view the device at a real size.
And now we can see a relative view.
And our iPhone X obviously is smaller than the iPad mini,
which is exactly how it should appear.
So I'd like to figure out exactly where this layout breaks down.
Obviously we see problems in both the mobile device and the
browser at this width. With this bar here,
I can actually expand the Chrome view
and notice here when we get to about 735 pixels,
then our layout corrects,
and it looks like it's supposed to look inside of the browser.
We can check our mobile device as well.
If you look up here in the upper right-hand corner,
I can rotate the device and notice if I rotate the device,
it's 812 pixels wide.
I can see that up here in the tab,
naming the device that we're using and because it's
812 pixels wide,
our layout looks okay if we rotate it back,
then we have the problematic layout again,
because we don't have enough width to accommodate our design.
So what we're going to do is we're going to switch to the code and we're
going to ripe a media query. So our design looks good,
even when it's past this particular point here where we can
accommodate both columns comfortably. All right.
So we've done a bunch of testing so far.
Have you downloaded the bliss browser yet?
I'd love to know what you think of it.
Leave me feedback in the comments about the browser and let me know how you
might integrate this browser into your workflow.
So I noted before that our layout is
Correct at about 730 pixels.
So we're gonna write a media query that targets browser
windows that are less than, let's say 735 pixels.
Okay. So finally, we get to look at some code.
The first thing to concern yourself with,
if you're worried about your site being usable on a wide range of
screens is your viewport meta-tags. I have mine on line six.
It's actually part of the HTML five document template that's
offered through visual studio code makes it kind of easy when it's automatically
put in there. So if you look at line six,
we have a viewport meta-tags and the content declares that
the screen size should be the size of the screen
on the device.
So the browser should treat the screen size as the browser
size. We also set a minimum and maximum scale to 1.0,
this defeats the pinch gesture.
If it's available in your mobile device in browser and prevents the user from
enlarging or scaling the screen, using the pinch gesture.
If we move down to the body of the document,
our document is structured by three logical divisions.
Online, 42 is the start of the container div.
This contains everything inside the page. All of the content,
the reason to have a container div is simply the body makes a lousy parent
for actual web content.
So a container div becomes the parent for all of the content inside,
inside the container div.
We have one logical division for property info starting on line
43.
This contains all of the texts that you saw on the page below the text,
starting on line 48 is the images div.
This contains all the images. The images are divided into two classes,
a main class for the large images,
and then a secondary class for the smaller images.
If we look at the embedded style sheet, first off,
we set up some typefaces for our [inaudible] and paragraph
tags. And then we set up for the ID property info,
which is the logical division, which contains all our texts on line 19.
So we set a background color in some padding,
but the important part of this is the width set to 35%.
And the float set to the right,
which means it'll float to the right of the other content on the page.
Our images div has a padding of 10 pixels and a width of 65%.
This is where our problem is because we have some padding on both of these dibs,
but our width is a hundred percent.
Don't forget when you measure the width of any element on the page
it's with plus padding plus margin plus border.
So since we have that padding, when our browser gets narrow,
the padding prevents the property info and the images
dibs from having room to display at 65% and 35%.
So essentially our layout breaks.
So what we're going to have to do is create an actual alternative
layout for our screens.
And the way we do that is with a media query Amelia,
where it allows us to change the layout under certain conditions.
So here is our media query media
only screen and
max with let's go with 730
pixels.
So now inside of the curly brackets,
we're going to put the changes we want when we have a maximum width of
730 pixels. In other words, up until 130 pixels,
these changes in our CSS will be enforced.
So first off on our property info div,
I'm going to take out the float.
It's pretty accepted that on narrower screens,
you shouldn't have multiple columns.
So instead we'll set that column to a width of 100%.
We'll do the same thing for the images. Diff.
Set that to a hundred percent.
I'm also going to set our main photos.
Remember we have a main and a secondary class for our photos too,
with a 100% and the secondary to a,
with a 49%.
So now we have these changes in our CSS up to a maximum width of 730
pixels. Let's take a look at the result in our bliss browser. Okay?
So I'm already seeing a better result here on our
newer screens. This looks much better in a singular column.
If I widen out our view here in the Chrome browser,
you can see the break point where it switches to two columns.
And again,
that's due to the media query that we created since this
browser on our mobile devices is fixed with.
Obviously I can't change with here.
I can rotate the device and see how it looks with the
device rotated,
but I can't actually change the physical properties of the browser
itself. So looking carefully,
I noticed that I'm getting a little bit of a overrun on the right-hand side with
my text. So I'm going to go back to my code and make one more change.
I'm going to change the width of the property info div to 95% to give the
text some breathing room. Once I've done that,
I'm going to refresh in the bliss browser.
And now everything looks just about perfect.
I'm really happy with these layouts in all three of my devices.
I'm so happy.
In fact that I'm going to take a screenshot using the built-in screenshot tool
in bliss,
and I'm going to save it to my cloud storage and show it to my client
with this shareable link that bliss provides.
Thanks for watching this introduction to cross-device testing and thanks again
to our sponsor list browser.
I know that LISC is going to make testing easier for every web and mobile
developer. Don't forget to give this video a like,
and subscribe to our channel for new videos,
teaching web and mobile development. Plus digital design I'm work last off.
Don't forget to visit our website@frameworktv.com to sign up for more free
training like this. When you sign up, I'll send you courses, workshops,
and projects to help you develop your digital skills. Thanks for watching.