Skip to main content
P
paddyaryan7801343
Participant
January 6, 2018
Question

How to turn a crappy website into mobile friendly?

  • January 6, 2018
  • 3 replies
  • 1043 views

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

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 7, 2018

    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

    Nancy O'Shea— Product User & Community Expert
    rayek.elfin
    rayek.elfin
    Legend
    January 7, 2018

    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
    B i r n o u
    Legend
    January 7, 2018

    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...

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 7, 2018

    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

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices