How to turn a crappy website into mobile friendly?

[paddyaryan]

Hi Folks,

I have a fairly large website - www.ryanphotographic.com - which used to be near the top of all search engine photo queries. Problem is the site is old, poorly designed and not mobile friendly so I am slipping further and further down the ranks (oh yeah - I'm the only person responsible for this state of affairs).

I guess I could spend a bunch of money for someone in India to fix it for me but I want my photography to be just one part of the endeavor so want to start from scratch.

Well, I started a week ago trying to learn html and CSS . I started off with fluid grid layouts but made the beginner' s mistake of working with the desktop grid instead of the mobile. I finally started again - beginning with the mobile site. Basically I want six thumbnail photos to load just below my banner with the navigation below that (each image is 200 pixels wide as loaded and all are the same  - 140 pixels). In theory I should get two photos across in three rows. I have no trouble achieving this. But when I check it in Chrome, or multiscreen preview, the images stack left instead of centering. It doesn't seem to matter what I do, I can't get the mobile design the way I want it - they are in the correct relative psitions to each other - just not horizontally centered. I can get the navigation bar to center and to scroll horizontally in the desktop. But these bloody inages - aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaargh!

I have no trouble with the desktop and think I understand the idea of rules progressively carrying over from mobile to tablet to desktop unless otherwise directed. But if I can't even get the bloody photos to center, my design is out the window.

I am an absolute beginner so please be gentle - but I am a quick study and can cut and paste with the best of "em.

Cheers and beers,

Paddy Ryan

[BenPleysier]

If I were in your situation, I would first of all make a sketch or a Photoshop composition of the layout that is wanted.

Then I would develop the site using Bootstrap 4 (Bootstrap 3 if my audience used IE 9 and below). If there are a lot of changes to be made each year, I would attach a database; but this is another story.

For those that are not familiar with Bootstrap 4, have a look at Bootstrap 4 Tutorial

[rayek.elfin]

Why not install WordPress with a nice customizable theme? Commercial and free photographer themes are widely available, and the commercial ones cater for just about any option. No coding required, and you may be up and running within a couple of weeks.

Look on Themeforest for examples. Or choose a free theme on wordpress.org.

Plugins may accommodate just about anything you have in mind - no coding required again.

All WP themes are responsive.

[B i r n o u]

I second you on that one, but I agree that many users around here wont have the same idea and point of view.

To what you already said, I will add, that at lower cost one can easly set up a full functionnal web application. We have a constant equation for our customers that include, time, money, easy to use, social network connectable, responsive, graphically up to date, maintainable... and going from a scratch white page in a side, or use a WP/ThemeForest/CodeCanyon in an other... give you tha fatser answer...

again most of association, small office, ... so 90% of the market... want the same type of application and have the same budget...

now... for the developper part... and the fun part of coding... it's amazing how one can easly overide plugin in and template just to respond in a more sharp way to our most demanding clients...

[osgood_]

Have you seen some of the bloated crap which comes with a Wordpress site/template? The coding is abysmal in most of the templated designs which l have encountered. Most even use Bootstrap......Wordpress and Bootstrap ....phewy, not as long as lm still alive.

If you are a coder and can build your own Wordpress theme ld agree with you but most who use a Wordpress solution are clueless bricklayers, pastry makers, grandmas crazy cookies to name but a tiny few or very poor developers who just want to make a quick buck but know little about coding.

And as for the UI thats just about as confusing as being at the controls of a jet plane in my opinion to unleash on a client, most of which cant even add their own email address to their email client without international rescue becoming involved.

Wordpress is an ugly solution unless managed by a developer who knows what they are doing in my opinion and even then its still way bloated and cumbersome.

[BenPleysier]

Wordpress is an ugly solution unless managed by a developer who knows what they are doing in my opinion

Even then the rendering is as slow as.

[osgood_]

Maybe its just very bad commercial templates which l think don't do Wordpress any favours. Someone posted a problem in this forum a few days ago which used a Wordpress/Bootstrap combination along with what seemed like a myriad of 3rd party plugins all with their own css an js files. I lost count of the number of css and js files linked to the page, that cant be good and as for the numerous class names splattered around the mark up, hideous.

I know if you use Wordpress you are likely never to see the code but its there in all its glory, lurking beneath the surface, mostly terrible. Im pretty good at coding but ld have no chance if l ever did have to open one of these templates for one reason or another to sort something out.

[Nancy OShea]

If you're using those legacy Fluid Grid Layouts, I assume you're not using the latest version of DW CC 2018. 

Fluid Grids were a nice idea when they came out in 2012.  The marketing dept loved 'em.  But in truth they never lived up to their full potential.  The layouts were not stable and awfully temperamental to work with.  In most cases editing CSS from design panels resulted in a broken site.  Adobe finally removed Fluid Grids from DW  CC and replaced them with Bootstrap's responsive framework.

Although some people around here don't like Bootstrap (not a view shared by me), I think we can all agree that it's much better than Fluid Grids were.   So my advice is to ditch the Fluid Grid site and start over with something more stable -- either a commercial template from PVII or Bootstrap which is open source.  

To give you an idea of what you can do with Bootstrap, I put together this proof of concept gallery.  The layout is Bootstrap.  The photo viewer is Fancybox3.  All images are dynamically populated with PHP code.   So to change images, one would simply upload new images to the server and be done.

Alt-Web Demo : Dynamic Photo Gallery with Bootstrap, PHP & Fancybox

Nancy