ArtSites Updates
(posted on 18 Oct 2013)
Last week, we launched our NEW "Tiled with Top Menu" Layout.
Many of you gave it a try and also had questions ...
So, this week, I wanted to go into a little more detail about "Responsive Web Design".
As I said last week, Responsive Designs are designed to work fluidly across large desktop monitors, laptops, tablets, smartphones, etc.
But what does "Fluid" really mean?!
This approach creates a different, but optimized layout, depending on the screen size and resolution.
If you click on the above image, you'll see that the same website is laid out differently depending on the screen resolution / device.
(It's 3-columns on the desktop, 2-columns on the tablet, and 1-column on the smartphone.)
With responsive web design, your website layout automatically changes to make sure your visitors have the best web experience, regardless of what device they're using!
In our "Tiled Responsive" layout, we also created 3 different "sub-layouts" depending on the screen size and resolution (like in the above example).
- There is one layout for phones (which puts everything in one column so that the images can be larger)
- One layout with multiple columns for tablets and smaller screens / lower resolutions
(FYI - these can also be large screens with lower screen resolutions) - And, then there is a layout for larger screens (4-wide columns)
If you just make your browser window "narrower", i.e. pull in the sides, you'll see how the webpage has "jump points".
First, we reduce the size of the images as the page gets narrower.
Then, at specific screen resolution "jump points", we show a different layout depending on the available screen resolution / size.
This is the "responsive" approach.
In essence, we've built 3 different layouts (that also dynamically use different image sizes) into one layout!
Your text and images are still viewable.
However, the focus of our "Tiled Responsive" layout is to provide the biggest images for the available screen size/resolution.
With this in mind, each layout (and image size) has been optimized for a specific range of screen sizes/resolutions.
First, we reduce the size of the images as the page gets narrower.
Then, at specific screen resolution "jump points", we show a different layout depending on the available screen resolution / size.
This is the "responsive" approach.
In essence, we've built 3 different layouts (that also dynamically use different image sizes) into one layout!
Your text and images are still viewable.
However, the focus of our "Tiled Responsive" layout is to provide the biggest images for the available screen size/resolution.
With this in mind, each layout (and image size) has been optimized for a specific range of screen sizes/resolutions.
It's REALLY important to note that what you see / create on your computer is "similar" to what others will see.
But, your website is not static; it's not a PDF ;-)
Even with our older layouts, there will be slight changes in what your visitors see.
(For example, some visitors may not see all your images and have to scroll down to view images or galleries if they're using smaller laptops, tablets and smartphones, i.e. small screens.)
Or, maybe your thumbnails are too small to easily see on smaller screens.)
Only those visitors with EXACTLY the same setup as you - screen resolution, web browser program, etc. - will see your website EXACTLY the same way you created it.
If someone else uses Internet Explorer or Firefox or Chrome or Safari, your website will likely have slight differences because of the way each of those programs translates the webpage code and presents it.
What's most important is that your visitors have a website that works best for THEIR environment!
And, that's what we're trying to do ;-)
I do hope this helps explains the "responsive" philosophy.
Going forward, all our layouts will be responsive because your visitors are now accessing your website from a wide variety of devices and screens!
And, we want to make sure your website looks GREAT on ALL those screens! :-D
But, your website is not static; it's not a PDF ;-)
Even with our older layouts, there will be slight changes in what your visitors see.
(For example, some visitors may not see all your images and have to scroll down to view images or galleries if they're using smaller laptops, tablets and smartphones, i.e. small screens.)
Or, maybe your thumbnails are too small to easily see on smaller screens.)
Only those visitors with EXACTLY the same setup as you - screen resolution, web browser program, etc. - will see your website EXACTLY the same way you created it.
If someone else uses Internet Explorer or Firefox or Chrome or Safari, your website will likely have slight differences because of the way each of those programs translates the webpage code and presents it.
What's most important is that your visitors have a website that works best for THEIR environment!
And, that's what we're trying to do ;-)
I do hope this helps explains the "responsive" philosophy.
Going forward, all our layouts will be responsive because your visitors are now accessing your website from a wide variety of devices and screens!
And, we want to make sure your website looks GREAT on ALL those screens! :-D
Join us on Facebook
Follow us on Twitter
Subscribe on YouTube