PDA

View Full Version : Mobile friendly tutorial


ipbr21054
03-29-2015, 12:46 PM
Hi,
I have followed the tutorial shown here http://www.dreamweaverclub.com/mobile-friendly.php

Here is my page at the moment http://www.theremotedoctor.co.uk/mobile_site.html

So far i have stopped because i have checked on 3 testers and 2 advise not mobile friendly & 1 shows all ok ?
I have an iphone 5,ipad original & ipad 3 and each looks fine to me when viewed.

Please would you mind advising if i did something incorrect.

Many Thanks.

Ricky55
03-29-2015, 03:37 PM
This tutorial is a little dated now.

There are just too many devices now to set your media queries using pixel values like this. you can have phones now with higher screen resolutions than a medium size desktop computer monitor.

What you are best doing is just using responsive design and set your widths using percentages. Then use media queries with rem values. Just use your media queries based on when your content needs them rather than some artbituray pixel value.

What I mean by this is as the screen gets smaller for example when your content no longer works use a media query and change the layout accordingly.

You'd be better looking for a more modern course on responsive design on something like tree house or tuts plus.

Hth post back if you need to.

ipbr21054
03-29-2015, 04:22 PM
Hi,
Thanks for the reply but i am now stuck.
Do you know of a template which i could edit.
Basically i think i am unable to edit my whole site http://www.theremotedoctor.co.uk/index.html
Google sent an email about it not being user friendly.
I thought i would use this mobile friendly page then get people to click an image etc to then take them to my web based site.
Maybe a crude way to do it but its what i can do myself.
Do you have a template which has the responsive design info.
The page only needs to have minimal content but mainly allow Google to see its mobile friendly and climb above my web based site if you know what i mean.
Here is the page so far,see its minimal.
http://www.theremotedoctor.co.uk/mobile_site.html

Ricky55
03-29-2015, 05:50 PM
Don't take this the wrong way but I'd start over, your site looks terrible and very unprofessional and in my opinion will never bring you new business no matter where it appears in the search engines.

there are loads of starter templates out there. Just search for responsive HTML starter template.

Something like this looks much better than your current set up http://www.prowebdesign.ro/simple-responsive-template/basic.html

Or you could go on theme Forrest and buy an HTML theme that you can just change the text and images.

Either of these options will be better than plugging something into your existing site for the reasons stated above.

If you need any more help post back or if you want to find something let us have a look before using it.

Cheers

vinnyvangogh
03-29-2015, 11:19 PM
I have to agree with buying templates...
I gave up the struggle to learn hand coding long ago.
I have used Project Seven aka pvii or P7
A template costs around US$95 full How to's and a support forum.
Just change text and images to start of.. colours etc if you take time to mess with style sheets.
Templates also come with a drop down menu - with its own UI.

Which is why I stopped hand coding around Dreamweaver 4 !

edbr
03-30-2015, 01:39 AM
Google sent an email about it not being user friendly.
Seriously?? i would be very suss of that and just delete it. what did it say?
although i get what the guys are saying thereseems to be right sort of user call to action etc. didnt see anything that would instigate any action from google

vinnyvangogh
03-30-2015, 01:44 AM
Google started sending out these warning a few months back after they declared war on any website not fully functional on a teeny weeny smartphone.
I have removed the domain name


Webmaster Tools
Fix mobile usability issues found on (domain name given)

Google systems have tested 4 pages from your site and found that 100% of them have critical mobile usability errors. The errors on these 4 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.

Fix this now:

1
Find problematic pages
View a report of the non-mobile-friendly pages found on your site, and the issues discovered.
Inspect mobile issues
2
Learn about mobile-friendly design
There are a variety of techniques you can use to make your site mobile-friendly. Specifically, look for information about the issues brought up in Webmaster Tools.
Follow our guidelines
3 Fix mobile usability issues on your site
Fix the issues preventing your site from being mobile-friendly.
Not sure how to proceed?

edbr
03-30-2015, 04:48 AM
@ipbr21054 as to you mobile design that works regarding the menu but dont put enter site. Give information, give abillity to contact you so the site functions. i suspect the visitors to your site are looking for you to get them into their vehicles or homes and wandt tp contact you most of all , not critique your design or add you to facebook

Ricky55
03-30-2015, 11:13 AM
I always wonder why some folks use Dreamweaver.

If you have no desire to learn web design then there are much easier and frankly better ways to get a nice looking website these days than trying to learn Dreamweaver. Working this way will only bing you headaches and crap results.

I'd just use a template type site but a quality one, something like Square Space. Or you could just buy a theme for WordPress from something like ThemeForrest.

Either of these options will be far easier for you to work with and will produce much better results that trying to work with what you have now in Dreamweaver.

Don't get me wrong Dreamweaver is a good tool for beginners to learn but just the wrong tool in your case. Its a bit like trying to service your own car. Why would you.

eclstar
03-31-2015, 05:10 AM
Ricky55,

What is the difference between buying a template for Wordpress and using that system, as opposed to buying a template to use in Dreamweaver?
Which method allows easier modification of the template?

Reason i ask is that I need to convert a really old site i have to responsive design, as I too have received a notice from Google.

I want to start afresh with a more modern template. I'm wondering whether to stick with DW or change over to wordpress. I'm finding it very difficult to understand responsive design in DW.

thanks

ipbr21054
03-31-2015, 01:45 PM
Reading the above you are right in advising the way forward would be to start again.
My existing site is http://www.theremotedoctor.co.uk/index.html
And i have looked at this page as mentioned above http://www.prowebdesign.ro/simple-responsive-template/basic.html

Would i be able to incorporate my details into this template so it would be mobile friendly for mobiles & tablets etc as well as the pc.

I await your reply,thanks.

edbr
04-01-2015, 02:29 AM
its a layout so all parts can be modified. the grid system shoes basically how columns can be used to show your content.

edbr
04-01-2015, 02:35 AM
but its also a question of design have a look at these free and premium sites. http://templated.co/

Ricky55
04-01-2015, 08:31 PM
Well WordPress is a content management system so if you buy a theme for WordPress you won't be working with HTML and CSS files you'll be working in the WordPress admin This is a bit like working in a software program like Word say.

You do need some knowledge of WordPress though to get these themes set up but its easy to learn.

If you buy a template for Dreamweaver you are just buying a static HTML and CSS template that could be edited in any code editor. You'll be working in Dreamweaver editing your HTML etc.

I'd personally go for WordPress as it will afford you much more flexibility going forward.

If you need any more help I'm a full time freelancer based in the UK. I actually put WordPress sites like this together for some smaller companies that can't afford a custom design. Working this way clients just provide me with a set of images and text in a word document.

If you are wanting just a website and don't want to learn you'd be better just focusing on your business and letting someone help you. Not saying that to get work as I'm very busy at the moment anyway I'm saying it as its what I believe.

Drop me a line if you want to.

Cheers

edbr
04-02-2015, 01:00 AM
i didnt realise it was wordpress. if you do need help you could do worse than our member Dave. not sure of his current situation but he was made redundant and may ( or may not) welcome some work.

d a v e
04-02-2015, 05:35 AM
Ed, The 'simple' template and the http://templated.co/ one aren't wordpress they're html. I think Ricky was just proposing Wordpress as another way forward ;)

Ian - I think that either solution (wordpress template or normal html template such as the simple theme) could be ideal for you but Ricky has nailed it when he said that "If you are wanting just a website and don't want to learn you'd be better just focusing on your business and letting someone help you".

If you're not too hot with your coding and design skills (you still need some idea of web design when you're putting your content into a layout) or you simply don't have time then you will be better paying someone else to do it.

I'm just completing a simple Wordpress template based site for a kitchen range shop in Suffolk and I'm also available for work ;)

just a couple of things that struck me about your existing site is the duplication of the logo - no reason to have the big blue 'R' version and also at first glance it seems that you only do Honda key remote programming - you might be better making it clear that you do several makes or that you also specialise in Honda programming. Is the logo creator attribution something that you're tied into? it would be nice if you could move the "Dr created by Jamie Courtier" to a credits page or the footer.

Feel free to contact Ricky or me, or if you want to go it alone with a template then of course we are here on the forum to offer help and guidance ;)

ipbr21054
04-02-2015, 06:45 PM
I am in the process of editing the template.
http://www.theremotedoctor.co.uk/basic.html

A little way from where i want to be but learning all the way.

ipbr21054
04-02-2015, 06:53 PM
There is one thing at the moment you could assist with.
On the pc the colours of my menu titles "keys & remotes / fobs & cases" etc are highlighted blue when you hoover over them.
Each drop down menu background is dark grey and as you scroll up/down it also highlights each section blue,this is fine.

On the iphone the menu background is near enough the same colour as the menu titles,which i need to edit.
I was looking for the code so i could change the colour slightly to make the menu titles stand out a little better.

Can you point me in the right direction for the correct file etc.
Thanks

ipbr21054
04-02-2015, 06:55 PM
just a couple of things that struck me about your existing site is the duplication of the logo - no reason to have the big blue 'R' version and also at first glance it seems that you only do Honda key remote programming - you might be better making it clear that you do several makes or that you also specialise in Honda programming. Is the logo creator attribution something that you're tied into? it would be nice if you could move the "Dr created by Jamie Courtier" to a credits page or the footer.

;)
In my revised site both have been dropped.

ipbr21054
04-02-2015, 07:54 PM
There is one thing at the moment you could assist with.
On the pc the colours of my menu titles "keys & remotes / fobs & cases" etc are highlighted blue when you hoover over them.
Each drop down menu background is dark grey and as you scroll up/down it also highlights each section blue,this is fine.

On the iphone the menu background is near enough the same colour as the menu titles,which i need to edit.
I was looking for the code so i could change the colour slightly to make the menu titles stand out a little better.

Can you point me in the right direction for the correct file etc.
Thanks

I have now found this.
See,learning all the time.

Ricky55
04-02-2015, 09:25 PM
i didnt realise it was wordpress. if you do need help you could do worse than our member Dave. not sure of his current situation but he was made redundant and may ( or may not) welcome some work.

Yes that's not WordPress. Easy way to tell, just add /wp-login.php to the URL.

Yes of course you can use http://www.prowebdesign.ro/simple-re...ate/basic.html shouldn't take you too long to get your content in.

Post back if you get stuck.

Cheers

Ps
If you do decide you want help let Dave help you sounds like he needs the work more right now.

ipbr21054
04-03-2015, 08:42 PM
Hi,

Now i am stuck so if you could help me out please.

Take this page for example.
http://www.theremotedoctor.co.uk/karaudi.html

What i am looking for is when you click on Flip remote + virgin canbus chip
i need the photo of this item to be shown where there is currently the blue image test photo.
I have created a css file with info of the images like so,

.AUDI001 {
background-image:url(m-images/main-photos/AUDI001.jpg);
width: 640px;
height: 480px;
}
.AUDI002 {
background-image:url(m-images/main-photos/AUDI002.jpg);
width: 640px;
height: 480px;
}
And also created html file like so,

</div>
<div class="AUDI001"></div>
</div>
<div class="AUDI002"></div>
</div>
<div class="BMW001"></div>
</div>
<div class="BMW002"></div>

Now with these 2 files i should be able to do what i require but need help with the missing code to place the image where i want it.

Many thanks.

ipbr21054
04-04-2015, 12:31 AM
Regarding the post above i have now managed to kind of get what i require.
See here,
http://www.theremotedoctor.co.uk/karfiat.html

I am happy with the way its shown/works on the pc BUT when looking on the iphone i can touch the screen & move the page contents left/right.
Other pages are fine & do not move.

One other thing that ive noticed also on the iphone is when i make my selection the photo is shown outside of its border to the right.
The image is not resized and placed inside the border like all the other pages.
Currently the link supplied is the only one which ive applied the new script.

If you can advise please.

ipbr21054
04-06-2015, 02:43 PM
I have now sorted this out.

d a v e
04-07-2015, 11:24 AM
to be blunt it still looks like you've shoved your content (with all its style) into a template (of a differing style) AND you still have 2 logos :)

e.g. the theme use flat design and your buttons (order and info) are anything but. yor blues are different. maybe this is because you're just getting the functionality down first?

ipbr21054
04-07-2015, 11:31 AM
Thanks for the advice.
I am a novice & working my way through it.
Im changing things as i go along.

d a v e
04-07-2015, 01:24 PM
ok -that's fine, just wanted to point it out before you got too far along :)

ipbr21054
04-09-2015, 06:40 PM
Could you check my code please.
I have applied a tooltip to my site and applied an auto hide to it.
Currently set to hide after 5 seconds but it stays on the ios device screen.

Please check http://www.theremotedoctor.co.uk/karford.html