Chaps, I am thinking to redesign and redevelop my site, http://www.antonioborrillo.co.uk/ I want to get rid of those hideous buttons and make
it mobile friendly, add extra info and have a page where people can leave comments on some of
the pix. Now first thing: mobile version. I will go for a fluid layout and with media queries
I will use these breakpoints http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
to make sure that it is displayed ok on every device. There are some issues off the top of my head,
but obviously if you can think of any other please let me know. Here's a list, I'd appreciate
some advice please as to how to tackle them

The issues:
1)display pictures on mobile. I'd like to keep the existing sizes as they are (thumbnails and
full size pics), but I will use
max-width=100% and width:100%; to make sure the photos are resized when the broser resize; For
thumbnails shouldn't be a problem at all, but for full width pictures I am not entirely sure
what to do. I am thinking to scrap my code ad use a plug in to make sure that not only it works
perfectly on as many devices as possible (but I think there are no major problem with my code),
and that the pix are resized correctly on every device.
In terms of how the information is presented
( thumbnails that get clicked on and open up the big version of the photos) is this suitable for mobile usage do you reckon?
Can I keep it the same or should it be presented in a completely different way? Suggestions welcome
2)enable comments: I want people to be able to leave comments on certain pictures. Basically I want to have a section which is almost blog-like,
where I add my pictures and a short description. This section will be separate from the Portfolio or the Gallery. I have found this nice plugin
http://www.htmlcommentbox.com/ but it looks like you can use only one box per page whereas I will have to use a box for a picture,
meaning I will have to have more than 1 in a page.
3)hand code or wordpress? I am for handcoding of course, does anybody think it is a bad idea?
4)From the mobile site, a link to the full desktop size: how does that work? Does it involve building a separate site?
thanks

Recommended Answers

All 3 Replies

Member Avatar for LastMitch

redesigning and redeveloping my website to make mobile friendly

You need to post some code with your issue or an image of the issue.

No one will go back and forward reading the issue and look at your website at the same time.

LastMitch, thanks for that. The site doesn't really have an issue as such I am just planning a redesing/redevelopment. However, if you think posting some of the code will help, then here it is.
1)Home pictures that need resizing (as said assign width:100px/max-width:100px)

<div class="home_page_pic"><img style="display: none;" alt="" src="images/church_full_1.jpg"></img><img style="display: none;" alt="" src="images/city_full_2.jpg"></img><img style="display: none;" alt="" src="images/faith_full_1.jpg"></img><img style="display: none;" alt="" src="images/flower_full_2.jpg"></img><img style="display: block; opacity: 0.878155;" alt="" src="images/gloom_full_2.jpg"></img></div>
      <!--END OF home_page_pic -->
    <div class="footer"></div>
      <!-- END OF footer -->

For the thumbnails, here's an example: I guess I will do the same thing with them:

<div class="thumbnail"><a class="full_image" href="javascript:void(0);"><img onclick="change_image('big_image_1')" style="border:0" alt="" src="images/animal_thumb_1.jpg"></img></a></div>
      <!-- END OF thumbnail 1-->
    <div class="thumbnail"><a class="full_image" href="javascript:void(0);"></a></div>
      <!-- END OF thumbnail 2-->
    <div class="thumbnail"></div>
      <!-- END OF thumbnail 3-->
    <div class="thumbnail"></div>

2)For the comment, I am not sure what to use to enable comments for only selected pictures. As said, I want users to be able to comment on some pictures,which will be in a separate section of the site, a blog-like page

3)Hand code or worpress? I generally like handcoding, but I don't know of any plug in that could allow me to do what wordpress does

4)Linking to desktop site: how do you achieve that?

Now a days mobile friendly websites are very essential because there is a huge number of traffic coming via smart phone's. In this scenario mobile friendly website designs and velopments are very important to get good business as well as traffic on your website.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.