Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

ffmedia

Members
  • Joined

  • Last visited

Everything posted by ffmedia

  1. Thanks for the responses, I've revised the layout so it doesn't feel too boxy. I've tried to keep a clean design but is it look a bit too basic? http://www.cmheatingservicesltd.co.uk
  2. Thanks, it was predominantly CSS but I used js for the smooth scrolling and the image resizing. I used one of the many CSS3 generators to play around with shadows/corner radius and also found the new HTML5 tags to work well. Media queries were a lot easier to implement than I was expecting, all in all I've found the move to responsive design quite good to start with. Next I need to look into adaptive images next so it only loads the smaller files for certain media types. I still think the logo and colours need to be made clearer.
  3. I haven't looked at web design in a while and here is my first attempt at getting up to speed with the changes/developments over the past couple of years (HTML5, CSS5, % widths, media queries). I haven't spent much time on the content yet so I'm only really looking for feedback on how the layout works. http://www.cmheatingservicesltd.co.uk My main issues are the fixed navigation at the top (which I think it needs as there is a lot of vertical scrolling) - this does not show up at all on ie8 and does not stay visible when you scroll down on an iphone. Any help with these problems would be appreciated. Once I am happy with the layout I will address the following : - Make header info into text instead of image - Make the colour scheme stronger (suggestions?) - Add information to all asides (including an image gallery with lightbox for the services sections) - Content. Needs a lot of work to keep the text concise so it doesn't seem too much on mobiles (perhaps use media queries to display:none some of the less vital sections). - Making the images adaptive so they load smaller filesizes on some media. Thanks for any feedback
  4. <script type="text/javascript" src="js/jquery-1.5.min.js"></script> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> These are the two Jquery references I am using but I have tried them in both orders and only the first one referenced will work
  5. I'm having the same problem where only one Jquery script will work. One references jquery-1.5.min.js and the other uses "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js". I have tried only referencing one of these (1.5 as it's more up to date) but can't find a way to get both working. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="Templates/Ricky Rome.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="Shortcut Icon" href="/favicon.ico"> <!-- InstanceBeginEditable name="doctitle" --> <title>Ricky Rome</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="head" --> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" /> <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.5.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <!-- InstanceEndEditable --> </head>
  6. Thanks for the great feedback I've got plenty to change before it goes live and I've used a couple of footer images from Klever Media so need to make my own. I loved Lee's site when he showed it on here and used it for inspiration. I appreciate it just looks like copying it but I wanted to go with a design I knew looked good. It's all my own code written from scratch and different js. @ Ben Evans - I haven't got any photos to work with yet so slider was just to see what it looked like. The slider nav menu on the right probably doesn't look great but it took me ages to work out how to edit nivo slider settings so I left it in there. Maybe time to lose it? @ MikeChipshop - A few bits like the footer are thrown together, now I know the site looks OK I can add the content and hopefully make it look a bit more organised. There will be a couple of pages with photos that will be a lot longer, do you think I should just use the back to top button on those pages or forget it completely? @zed - I like the font but maybe better in small doses? I'll look to change the body font. I want to put the map in a lightbox (along with the pricelists and vouchers). I have tried fancy box and light box but not got either working properly, I'll give one of them another go. Plenty of work to do...
  7. There is no flash header. I've taken out the bg image as well now, not sure if it's an improvement or not?
  8. I may see what it looks like blurred and set to stretch to see what that looks like. Any suggestions to improve the site other than the bg?
  9. Ok, I was trying to keep the filesize down so made it 1680 x 1200 (I think).What size should I make it to cater for most browsers yet not be too large a file?
  10. Hi, I'm fairly new to HTML/CSS/JS but have decided to try and help a friend improve his existing site and would like some feedback on how the design is progressing. (Thankfully his old site was as bad as it gets so anything should be an improvement - and he can't be too demanding for a freebie!) Hair & Beauty Website I'm a bit wary of including too much javascript on the site (I've used 3 jquery scripts - nivo slider, a back to top button and a lightbox that i can't get working yet). I may need to look into combining the js to reduce load times. I know the footer is off centre and there are a few padding/layout issue but otherwise what needs addressing? I will look to go back to the grid system to neaten up the layout then start adding the additional pages. Thanks for any feedback.
  11. Thanks, I thought it should work like that but I have tried and failed to get a couple of jquery scripts working from the same library. I will have another attempt when I get home later. Is it considered to be better practice to host a jquery library with your site or to link to a hosted version from say, google? Will using multiple jquery scripts on a page slow it down noticeably? i.e. should I avoid using too many scripts if similar effects can be acheived using other methods (CSS etc)?
  12. Is it possible to reference different Jquery libraries on one page without them conflicting? Alternatively could I make all JQuery elements use the same library (i.e. the latest version - 1.5?) I would like to use the slider that uses <script type="text/javascript" src="jquery-1.4.3.min.js"></script> and also a to the top script that uses <script type="text/javascript" src="jquery-1.4.2.min.js"></script> Thanks
  13. I have tried using the script but cannot get it to work. I have applied CSS to #div so make sure it is correctly positioned and large enough to show the images. Dreamweaver shows a syntax error in $('#link2').hover(function() { but i can't see the problem. Also how do I change it so it changes the main image on hover rather than click. Just changing it from .click to .hover doesn't seem to do anything. <script src="js/jquery-1.5.js"></script> <script> $(document).ready(function() { //First image $('#link1').hover(function() { $('#div').fadeIn(300); $('#div').html('<img src="images/viewer.png" alt="">'); } //Second image $('#link2').hover(function() { $('#div').fadeIn(300); $('#div').html('<img src="images/btn_down.jpg" alt="">'); } } </script> Thanks
  14. Thanks Shaun, I would like the main div content to change when the menu items are hovered over, is it as straightforward as changing .click to .hover? $(document).ready(function() { //First image $('#link1').click(function() { $('#div').fadeIn(300); $('#div').html('<img src="image1.png" alt="">'); } to $(document).ready(function() { //First image $('#link1').hover(function() { $('#div').fadeIn(300); $('#div').html('<img src="image1.png" alt="">'); } Then would I just include an href link to the new page so it goes to that page when the menu item is clicked? <a id="link1" href="contact_page.html">Link 1</a> Thanks
  15. Could anyone point me in the direction of a menu (probably javascript?) that changes a main image when the menu items are hovered over and goes to a link when clicked? I would like the nav menu on the right hand side that changes the image shown in the left side on rollover. I'd like to be able to have either rollover images for the nav items, or just use css to display a different background image on hover/active. Thanks
  16. You Sir, are a legend. Thanks!
  17. Hi, wondering if anyone could help me identify this font please? I've had a look through a couple of font sites but no luck, the closest I've found on PS are Rage Italic and Borealis. Thanks
  18. I've now gone for a more natural canvas colour and made the images bigger (Thanks mrsminkie). I've spent a bit of time looking for a suitable image scroller and have gone for the content flow jquery script. I haven't done much work on the header/nav menu yet and I don't think the colours are quite sharp enough so I need to address that. I need to decide what to do with the sides regarding border/edge effects, any suggestions welcome. Restyle with new colour scheme Any thoughts? Better/Worse then the first attempt?
  19. Hi, I would like to create an effect with thumbnail images scrolling horizontally across the screen and when clicked the master image opens in a lightbox. I have considered trying to use a combination of Easy Slider and the jquery lightbox plugin but not sure if there is an easier way? Failing that is it possible to have clickable links within the image slider images? i.e. with easy slider can each slide be split into three clickable sections that each link to a seperate page? Thanks
  20. Thanks for the links, all very interesting. After further reading the square grid looks like a good option too. I think I'll go with the 970 on this site and see how it goes
  21. Thanks for the responses. I think I will stick with the 960 px width as I like the flexibility of that grid system and also go with 960 px height for the mockups
  22. I'm going to make a few PS mockups of a site and wondered what size image I should create. I have read up about the 960 grid system so will probably design a site 960px wide (with repeating bg pattern) but wondered about the height. Is there an optimum height for web pages? I understand it's all about how much space is needed for the content but should I aim to make all pages the same height, or should I pick a resolution and aim to fit it on one page without scrolling (say 760px?) Thanks
  23. My vote goes for either 40% or 50%. I agree this seems the way forward rather than the blue text; white just feels right for the site.
  24. I think the blue is definitely easier to read for the main text; the white headings are fine as they have a slight drop shadow that keeps them legible. I personally prefer it in white but it is easier to read in blue so it is probably an improvement. I guess the only alternative is to darken the background of the boxes slightly and keep the white. All in all, blue makes for a more accessible website and doesn't detract from the overall look by much at all
  25. I think it looks good, very clean and functional. I would maybe look to add an effect to the main header text. I see you want to keep it a clean design but maybe some subtle effects to the Snippet Cloud text. Also the text overlaps the magnifying glass in the search box and I can't see the 'Go' text at all on my browser (ie .

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.