I very recently started a new website that was built from the ground up to be mobile device-friendly. I wanted such a site mainly as a marketing tool to drive traffic to my main site.
To do that, I scoured a few sites for a free template that I could use as a starting point. Since I use Microsoft development software, I found some nice templates at Expression Web Tutorials and Templates. The template comes with all the files you need to get started. Be sure to follow the instructions!
You can simply use the template as is, or you can tweak it to suit. Since I am an inveterate tinkerer, and wanted my own look and feel, I used Expression Web to get things done. It is helpful if you know the basics of CSS and HTML, but Expression Web is very powerful, and will make the job less stressful and more fun. The cool thing is, you'll be learning new skills and creating something of value.
If you're on a Windows platform, you can download Expression Web 4 (free), here. If you're new to site development and/or Expression Web, you can find a free eBook here.
The slide show on my sites uses the same script as NPN's home page slide show. You can find the JavaScript code and instructions at Dynamic Drive. It's free. Be sure to follow the instructions!
You do not need to be a coder to use Expression Web, or the slideshow code. I had fun designing my new site, and my main site, and I learned a lot along the way. So, If you want to "Roll Your Own" site there are lots of free templates, and tutorials that will get you started.
Happy developing!
--P
PS: My main site is hosted at Web.com and my mobile site is hosted at Arvixe. Both are well regarded and have excellent tech support.
Posted by Steve Kennedy on August 4, 2015 at 12:50 PM
Thank you for posting this Preston! I have been thinking about doing this but I have no current experience. Your links and subtle encouragement are much apprciated!
Steve, you are welcome. I hope you have some fun with it!
One thing I'm having an issue with is image scaling in the slide show: The images are not scaling down to the screen on some of the smart phones. I think it has to do with the settings in the Dynamic Drive slideshow, so...research continues.
With regard to image scaling (other than the slideshow images), there are a couple of things you need to do...
1. Do Not set width/height attributes in the image (img) tag(s).
2. You need to apply a CSS class to each image in the img tag...
/* class="imgscalable" */ (remove the comment code /*)
and add the following CSS to your style sheet file
/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
.imgscalable {
height: auto !important;
width: auto !important;
max-width: 100%;
}
*/ (remove this comment code)
Let me know how your efforts go, if you decide to dive in.
Discussion
2 repliesHi All,
I very recently started a new website that was built from the ground up to be mobile device-friendly. I wanted such a site mainly as a marketing tool to drive traffic to my main site.
To do that, I scoured a few sites for a free template that I could use as a starting point. Since I use Microsoft development software, I found some nice templates at Expression Web Tutorials and Templates. The template comes with all the files you need to get started. Be sure to follow the instructions!
You can simply use the template as is, or you can tweak it to suit. Since I am an inveterate tinkerer, and wanted my own look and feel, I used Expression Web to get things done. It is helpful if you know the basics of CSS and HTML, but Expression Web is very powerful, and will make the job less stressful and more fun. The cool thing is, you'll be learning new skills and creating something of value.
If you're on a Windows platform, you can download Expression Web 4 (free), here. If you're new to site development and/or Expression Web, you can find a free eBook here.
The slide show on my sites uses the same script as NPN's home page slide show. You can find the JavaScript code and instructions at Dynamic Drive. It's free. Be sure to follow the instructions!
You do not need to be a coder to use Expression Web, or the slideshow code. I had fun designing my new site, and my main site, and I learned a lot along the way. So, If you want to "Roll Your Own" site there are lots of free templates, and tutorials that will get you started.
Happy developing!
--P
PS: My main site is hosted at Web.com and my mobile site is hosted at Arvixe. Both are well regarded and have excellent tech support.
Thank you for posting this Preston! I have been thinking about doing this but I have no current experience. Your links and subtle encouragement are much apprciated!
Steve, you are welcome. I hope you have some fun with it!
One thing I'm having an issue with is image scaling in the slide show: The images are not scaling down to the screen on some of the smart phones. I think it has to do with the settings in the Dynamic Drive slideshow, so...research continues.
With regard to image scaling (other than the slideshow images), there are a couple of things you need to do...
1. Do Not set width/height attributes in the image (img) tag(s).
2. You need to apply a CSS class to each image in the img tag...
/* class="imgscalable" */ (remove the comment code /*)
and add the following CSS to your style sheet file
/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
.imgscalable {
height: auto !important;
width: auto !important;
max-width: 100%;
}
*/ (remove this comment code)
Let me know how your efforts go, if you decide to dive in.
--P