Responsive web design with Dreamweaver CS6 fluid grids & templates
Responsive web design? What is it and why should I care about it?
Responsive web design is the new way of creating web sites that will look great no matter what kind of device they are being viewed on. In the old days, we used to look at our Google Analytics to see what percent of our viewers were using Mac or PC and what kind of monitor resolution and we’d make darned sure that our web sites were meeting that majority.
BANG! Things have completely changed over the last couple of years as hand held devices have flooded into the workplace and home. Do you know how many site visitors are looking at your site with tablets? With mobile phones? You should take a look at this at least every year and get a good snapshot of your visitors info.
Let’s take my Figurative Artist.org web site for example. In the last year, it had 56,350 visits and 6270 were on mobile devices, 3685 on iPads and 1446 on iPhones. Add the figurative blog stats on to that and I’m looking at about 7000 visits on devices much smaller than desktop monitors or even laptop screens!!!
I’ve been on a very steep learning curve and if what I share can help anybody get down this path more smoothly, then writing this blog post is worth it. I updated my PaulaOBrien.com and my SunshineCoastArtists.org site very recently so that they would be fresh and current to synch with the mounting on my 2013 exhibition and take full advantage of all that publicity push.
I have been using Dreamweaver since about 1995 and recently updated to CS6. I had realized that I was probably not using DW in the most efficient way but had muddled through on my own and things worked pretty well. I reworked the two sites with real structural “templates”. Heck, I had thought that I was using templates because I was taking a basic page and then starting a new page by copying it and just giving it a new name.
STOP! NOT the best way to do things!! You’re probably laughing and thinking doesn’t everybody already know all this? Well, uh, no they don’t because I certainly didn’t. Creating real structural “templates” is a MUCH better way to do things. With templates, all the navigation changes on header, footer, sidebar etc will roll down to all pages created with that template. OMG it all seems so simple now!
Wandering around online and muddling through on my own, it took me about 6 days to learn how to use templates and to create some to fit my needs and then another 7 days to fit my PaulaOBrien content into the new templates. Remaking the SunCoast art site only took 3 days to create and move the already existing content over to the new site style.
I made sure my images were no larger than 414 pixels high so they would fit on my phone screen nicely without having to roll up or down to see the entire image. I thought it all looked pretty good, even on my iPhone and thought my work was done. I had literally just launched the two sites and was walking down the street with my friend Lou who said it was a good thing that I had it ready for mobile devices because Google had just come out with a new policy and would soon no longer give much credit to sites which were not formatted to be mobile friendly.
Holy crapola!!! I had not heard that!! I dashed home and looked it up and found out more.
“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.
If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.”
I really looked around and eventfully decided I’d better bite the bullet and do as King Google desires and set myself the task of learning responsive web design using the powerful Adobe Dreamweaver CS6 program. I did not invest past time and energy building sites that have very high search value to have them now shot down because they don’t show well on cell phones as people ramble home from work and surf the web! Several other programs, such as WordPress can do responsive web design very well but as I already owned the program and had a lot of experience with it, I thought I’d give their new fluid grids feature a shot.
It took about 5 days to struggle through learning how to use fluid grids and the following YouTube videos by Tom Green were extremely helpful to my mastering the process.
In the old days, a site would be built to a set size with elements of a set size. Imagine your bedroom is 12 by 15 feet and the bed is 3 by 6 feet. Now think again and imagine that you give the house a “rule” to change the size of the bed depending on the size of the room and to make it a percentage of the room size instead of a fixed size. That’s kind of how responsive web design works. If the room is nearly square, put the bed in the middle, if the room is long and skinny (like a cell phone view) put the bed way up at the top and move everything else below it on the page. That’s sort of how RWD works.
Watch Tom Green video’s several times to catch and absorb all the info. Each div MUST be placed withing the Grid Container or else the page will not hold together even though it may appear to at first. This is quite tricky but eventually makes sense. The image above shows where my cursor on the page is placed: within the editable area in the main.body div within my grid container. This template should hold together.
I built some nice RWD templates and switched my templated pages over to the new templates BUT I eventually found out that when I nudged the layout of the div boxes in one template, it rippled over to another template event though it was called a completely different name! What I learned was that each fluid grid template must be built completely from scratch and NOT be copied and then adjusted or else somehow changes made in one will ripple over mysteriously to another. I looked and looked online and found not much advice and only a lot of moaning about whether Dreamweaver’s fluid grids could be used as templates or not. I can report that yes, they can but use only a few different templates for your site and build each one completely from scratch.
Call the doctor! I went back to the drawing board and created only 3 main templates, one for a wide open page, one for a 2-column page and one for a sidebar page. While I can’t admit that they look absolutely perfect yet, they do function well in desktop, tablet and mobile formats and I feel like I’m really on the road to something very new and radically different from the old ways of doing things.
Here’s what my site looks like on the three different devices. The desktop view with lots of nice space between the image and the sidebar text.
Tablet or iPad view with sidebar text moved over close beside the image.
Mobile screenshot showing the nav sidebar and image and the text has now shifted to below the image a little further down the page. I’m taking a gamble and keeping my navigation very simple to see and hopefully use. Personally I find some drop down navigation that works well with a mouse does not work so well with fingertips on screens as small as mobile phones so I’m going with nice big arrows at top and bottom of many pages because I find it annoying to have to scroll back up to the top to get to the next page and on a cell phone, the bottom of the page is now a long slim way from the top.
Rules can be made within the CSS which defines and drives this whole process and these rules can apply to certain layouts only. Within each template, a different size and position of the page elements is designed and for example, text can be made to wrap around images but only at tablet and/or desktop size. This is amazing and Tom Green explains very well how to create these new CSS rules and where exactly on the code lineup they need to be cut and pasted. Through this whole process I have learned tons about CSS and code and it sure is sweet when you make a rule and the page content jumps through those new hoops.
Another thing I’ve discovered is sometimes there is some corruption when using tables and the best way to fix this is to just create a brand new table and copy the old images over one by one to the new table because it’s hard to see where the corruption is even when you look at the code. There seems to be no other way around it.
Images must be sized correctly before incorporating them in the site and then featured as 100% of their width and nothing in the height description so that they can squeeze and resize as the container or viewing screen changes size and shape. That is the radically different advantage to RWD! It is SWEET when it works well!!
After working very hard on all this learning and brain expanding, I am looking forward to a little jaunt we have planned for some wandering time in Spain and France. That’s where the next post will come from. Good luck with responsive web design. It’s really worth the extra effort to learn and incorporate. Been on a bus lately? See all the people swiping their way through facebook and other sites? This is the wave of the present and future. Onwards and upwards! Don’t let your competition get the advantage on you. Knock them out of the ring with your own punchy site!
When I get back, my next big project will be a complete makeover to the FigurativeArtist site, bringing it up to a more mobile friendly format and introducing a donation/payment element to what has become a very large and highly valued resource for artists and art lovers. No doubt, that will be another brain expanding experience….