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.

nicolasks

Members
  • Joined

  • Last visited

Everything posted by nicolasks

  1. Thank you for the suggestion! What is an optimiser, and what does it do? Thank you! But that's basically what I've done. I'm wondering what size should the images be? (Not what size should they render on the browser, but what size should they be? Right now they're 300x300px, is too big.)
  2. My first attempts at this have resulted in slight colour change. Is there a remedy for that? Thanks again!
  3. Oof, Jack, those are hefty suggestions! Like I said, I'm basically done the design and layout -- the website is launched :s I appreciate your attention, though, and I've been thinking about what you've said... your comments have been logged ha ha. I understand where you're coming from about the text spanning too far across the page, I'd already worried about this myself. I'm not sure a sidebar would work well, though, as I already have some pages split into a two-column layout. I'm thinking of making the entire page narrower. When you say the navigation is way too close to the logo, do you mean it just needs to be moved over a bit? And you're absolutely right about the tag index -- it's terrible, really, and already close to the top of my to do list. Question -- Is it possible in a DL to make DDs inline with their DTs? Thanks for your help!
  4. Hi folks, I'm having a conceptual problem here. I've heard some feedback on my website (home page) that my images aren't sized properly (they're too big) and it's affecting page load. I'm using media queries, so the images are bigger or smaller depending on screen size. How do I size them properly? Thank you! Edit: I'm just talking about the photos on the home page, not the logo/illustration in the header.
  5. Thank you both for your suggestions! I agree, it's on my to-do list now to fix the images. dap, your brown bunny did look good... I like the blue but you've convinced me to play around with it Thank you! I'm pretty wedded to the wall of photos thing, but I think I will play around with a slider or something - I don't want to look dated. But what do you mean there's no proper navigation?
  6. I did put the .htaccess file in the root directory, as I said it's up and working. But thank you for the link! The canonicalization code there is basically the same as mine but I have a few questions. Why does it begin with this? Options +FollowSymLinks Also, I'd like to use this part, RewriteCond %{THE_REQUEST} ^[A-Z]{3,9} /index.html HTTP/ RewriteRule ^index.html$ http://www.yoursite.com/ [R=301,L] but I suspect it has www.yoursite.com as the canonical link, whereas I want mine to be yoursite.com. How do I modify it? And there's nothing there about directing www.yoursite.com to www.yoursite.org. Basically I'm still wondering if there's any problem with my code (above)? Thanks everyone!!
  7. Thank you everyone once again for all your help. I took your advice seriously and my website came out the better for it (in my opinion, anyway ha ha). It's all set up now, if you're curious: http://torontorabbits.org. I've got tons of plans to add to it but basically the design side is "done." Thanks again!!!
  8. I have two domains pointing to my website (a .com one and a .org one), which means four domains overall (according to Google, anyway: www. ones and non-www ones). I want to use one in particular as the preferred domain. I've never worked with .htaccess files before or server side anything. I tried looking this up and I couldn't find anything exactly on-point, so I hammered together the following code from what I could find. I'm hoping someone who knows better could look at it, and let me know if there's something wrong with it. It appears to work fine and it validates (according to the Lyxx validator), but I'd appreciate some knowledgeable human input. Thank you!!! RewriteEngine On RewriteCond %{HTTP_HOST} ^www.torontorabbits.org [NC] RewriteRule ^(.*)$ http://torontorabbits.org/$1 [L,R=301] RewriteCond %{HTTP_HOST} ^www.torontorabbits.com [NC] RewriteRule ^(.*)$ http://torontorabbits.org/$1 [L,R=301] RewriteCond %{HTTP_HOST} ^torontorabbits.com [NC] RewriteRule ^(.*)$ http://torontorabbits.org/$1 [L,R=301]
  9. Someone let me know that in Safari the media query doesn't kick in until you refresh the page. So, if someone navigates to the web page while using a high zoom, the media query works -- it's only when you've already loaded the page and then you zoom in that it doesn't work (and only in Safari).
  10. I figured it out. I was testing the media query not by resizing the browser window, but by zooming in on the web page. In FF and Chrome, the above code kicks in when I zoom in, but in Safari it doesn't. Is there anything I can do to make Safari act more like FF and Chrome here?
  11. Hi, I'm just wondering why the following media query works in FF (22.0) and Chrome (28.0.1500.71), but not Safari (6.0.5). In case it's relevant, I'm using the Mac OS X (10.7.5) -- laptop, not mobile. Thanks for your help!!! Also, does anyone know if it works in IE? <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> body {background-color:#efefef;} h1 {color:black;} @media only screen and (max-width:37.5em) { body {background-color:#000000;} h1 {color:white;} } </style> </head> <body> <h1>Hi.</h1> </body> </html>
  12. Hi, I think it looks great! I have to say, I like both designs. But here's some feedback about the content and navigation issues: Use more internal linking, and make your links more intrinsic. For instance, on the homepage, in "Feel free to leave a post in the guestbook," the word "guestbook" links to the guestbook. That's good: it's intuitive, easy to navigate. Do more of that! Like, any time you have the words "contact me," turn that into a link. And eliminate your parenthetical navigation instructions. E.g. in the sentence "If you have any questions, please contact me via the available contact form (See: Contact)," take out that bit in parentheses and turn the word "contact form" into a link. Ask someone skilled to review your copy for grammar, style, spelling, typos. And try to find a more descriptive word than "stuff." On "How does this site work?" it's sometimes confusing to tell what's a screenshot vs what's an active part of the page. Like, I click on the image of the contact form, thinking it's a real contact form, and I'm surprised and annoyed by the Lightbox effect. I'm not sure the lightbox adds anything here. I would make the images simple flat images, no links, no effects; I might also play around with a border, to make it even more clear that they're screenshots. And under "Downloads," that first image I would cut off under the Download button, because it really is confusing seeing the "Leave a Reply" and other footer elements there. About your catalog categories: logically-speaking, wedding dresses and maternity clothes are clothes. Maybe the "clothes" category should include all clothes, with "wedding dresses" and "maternity" as sub-categories? Or else call "clothes" something else, like "casual clothes" or "general clothing" or something. I hope this helps! Good luck
  13. Okay, latest version. I've looked at colour, background, typography... obviously not the photo gallery yet. Whatcha think? I'm still having trouble with small laptop screens/high zoom, where content overflows its container. Suggestions? (I know the trouble with the footer is its defined height, but I don't know how else to do a sticky footer? Edit: And I guess the trouble with the white wrapper is because I've defined the width. But I don't know what to do about it ) And here are the other social networking icons. Let's say the one online is #2. THANK YOU everyone so much for your help!!! Edit 21 July 3:01pm Been playing around with the photo gallery. Thoughts? That is awesome. Could you help me find those scripts?
  14. Thank you! I will check that out. Hey there's a lot of feedback here! Like I said, I'm working through it -- haven't got to the colour scheme yet EDIT -- 1:30pm Okay, been working on colours/patterns... Is this (attached) any improvement? (I've changed the blue.) Or is it the combo of blue with green that people dislike?? I'm also working on a blue/brown but it's not coming together smoothly. (That green is continued throughout my website in links and a few other decorative elements so it's not an easy switch out!) What about the patterned background? Does it take away from the clean/open look I'm going for? PS I haven't settled on social networking icons yet, those are just placeholders. PPS I tried replacing the green with black as suggested and it looked okay but drab -- before this I had a blue and black colour scheme and a repeated feedback on that was not enough colour... EDIT -- 4pm Been working on the brown/blue design I mentioned. What do you guys think? Only two pages right now, the internal links don't work -- page one page two This includes work on the colours, background, and footer content. I haven't gotten around to typography yet or the photo gallery. I'm having a problem with this layout though. The last layout, I know, was not mobile-friendly, but it was fine with small laptop screens, or normal screens set to a high zoom (accessibility), but this one's not: DIV#new, the wrapper with the white background, doesn't contain its contents, and the footer is pretty messed up too. Any advice would be appreciated!
  15. I checked out iconarchive.com (thanks for the suggestion!) and I have three top runners. What do y'all think? Any preferences???
  16. Thank you everyone so much! I really appreciate all the constructive criticism I may have more questions as I work through your advice but for now just two things -- I wanted "About Us" to stand out on purpose because it's a heading, with Contact and Copyright as subpages, but I can see that's unclear so I'll play around with it, thank you! If you have any suggestions for that I'd love to hear them I don't really want the rabbit pictures to look like listings, I'm going for more of a photo gallery feel (these are our pets, not animals up for adoption, and this is the only "social" part of the website so it's not like the photos represent profiles that have more info or anything like that), but I get you're saying it looks dated so I'll play around with the design, thank you!! Could you recommend a photo gallery style I could use as inspiration? Just out of curiosity, do you feel the same about the rest of the website? I mean, below the header, on the other pages, does the content fit more or do you still feel this break between the top and bottom? THANKS AGAIN EVERYONE!!
  17. Thank you both, I appreciate it Thanks for the suggestion! To be honest I've always struggled with social icons. Does anyone have any tips/know any good resources that might help me?? Thank you!!
  18. Hello! First, I'd like to thank everyone again for the first round of testing. All of your suggestions really helped me improve the design! I've got a bunch more done on the website now, and I hope to go live within the next month. torontorabbits.com I'd really appreciate your feedback! Thank you so much Known issues / Next steps: Some of the internal links under "About Rabbits" aren't pointing anywhere yet because I have a bunch of PDFs to upload and a couple more html pages to write. "Local Listings" is a Wordpress blog, on wordpress.com for now but I plan to migrate it to an installation. That's a whole other kettle of fish.
  19. Mein Gott! Could that really be true??
  20. Hi, I'm looking for "best practice" advice. I've been developing web pages for many years (super casually, mostly for fun), but I took some time off this past year, and now I'm at it again but in the meantime I've switched to a Mac. I figure I'll have to use a friend's PC to test for IE, but what about the other browsers (FF, Chrome, Safari)? Should I test for them on PC too, or can I assume what works for Mac works for PC? Does anyone know of any reliable IE simulators I could use instead, like DebugBar only for Mac? (I know about BrowserStack -- I'm going to check it out now -- but other suggestions are welcome, and ideally I'd like something I can download.) Are there any other browsers I should be testing for? Does anyone know where I could find statistics regarding usage of the various IE versions? I know a lot of people are saying forget IE7 but, for my website, the audience group most important to me is not very "modern" and I don't want to leave them behind. Thank you so much for your help!!!
  21. Hi Caleb, I think you're off to a good start! You've got some cool effects going on, too A few comments: More asymmetry might look good in the header. Try pushing the cross off to the right a bit in your banner image, and pushing the words "University of Gloucestershire Christian Union" even more to the right. And in in the navigation, try moving the page links to the left, closer to the logo. Something's wrong with your footer (I'm viewing on a Mac -- see attached pics of the bottom of my browsers). In Safari, it cuts off the bottom of your content. In Firefox, it's fine at first but if the screen is narrow enough* to push down the content then it's cut off there too. Your footer is also very large. I figure you'll be putting some content in there but even still, in relation to the other elements on your page it's very big, I'd make it shorter. For the two small banners (the Twitter feed and the RSS one), try to centre the contents more, because they're a little squished up against the top. Also, the font-size used for the tweet is a little too small. Horizontal scroll isn't working, so when your screen is narrow enough* that content gets cut off, it's literally cut off, you can't scroll over to access it. * Narrow screens aren't just about physically narrow screens, like on small computers or handheld devices, but also regular-sized screens that have a high zoom set, like for people with visual disabilities. Anyway I hope this has been helpful!!! Good luck to you
  22. I love it! There's something surprising about the colour scheme (in a good way). It's well laid out, it's clear -- It looks great!! A few notes: You're missing alt text in some of your images It would look nice if the nav links at the top right had different styles for different states; maybe color:#e95846 for a:hover and a:active The words "contact me" in the h4 at the top could link down to the Contact Me section at the bottom You could use some copyediting. I like your use of short, simple sentences, but they're not always grammatical. For the top, maybe "Hello, my name is Jordan Chalmers / I am a web designer. This is my web portfolio. If you need a website, contact me." Otherwise, I agree with rightthisiswrong about making your name at the top link to your index page. But I have to say, I like h4 as it is!
  23. It didn't matter earlier because my images are all the same size and I wasn't using text, but I've started using your gallery elsewhere and this time it's just a text list. Could you post that Javascript? Thank you so much!!!!!
  24. Hi, I'm afraid I can't comment on your specifics but I thought I'd share this: http://ryanfait.com/sticky-footer/ It's the template I always use when I want a footer and it's worked well for me. Best of luck to you!

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.